Build & Ship an Airport Directory

Bangun direktori bandara nyata yang terinternasionalisasi di Profound CMS: satu pola URL yang merender halaman untuk setiap bandara, dalam 35 bahasa. Anda menulis kode Next.js dan menyusun struktur CMS secara manual; Claude Code (melalui Profound MCP) menangani tiga tugas — menghasilkan data bandara, memasang sistem desain, dan menghasilkan empat komponen React. Terdiri dari tiga bagian: Penyiapan, Pembangunan, Produksi.

Tonton panduan video lengkap.

Apa yang akan Anda bangun

• ~50 entri bandara, masing-masing pada URL-nya sendiri.
• Satu rute parametrik /{language}/{airport_code}.
• Empat elemen UI — nav, headline, body, footer — dirender oleh cms-renderer.
• Data CMS live melalui binding CEL.
• Semua 35 bahasa, diterjemahkan dalam sekali klik.
• Dideploy ke Vercel dengan pratinjau langsung dan penyuntingan di tempat.

Prasyarat

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code dengan Profound MCP terhubung (Bagian 1).
• Akun Profound CMS.
• Untuk Bagian 3: GitHub CLI (gh) yang sudah masuk, dan akun Vercel yang ditautkan ke GitHub.

Cara semuanya saling terhubung

• Komponen menentukan bentuk konten. Bidang Route Slug membuat komponen dapat dirutekan; tag UI Element membuatnya dapat ditempatkan di halaman; komponen System (seperti language) tersedia bawaan.
• Varian adalah kontennya (JFK, SFO, LAX…).
• Elemen UI adalah bagian halaman, diisi dengan CEL — skrip in-template milik Profound, dievaluasi saat render.
• Rute parametrik memetakan URL ke varian beserta sekumpulan elemen UI.
• Aplikasi Next.js Anda merender semuanya melalui SDK cms-renderer dengan kunci API tier baca.

Bagian 1 — Penyiapan

Hasil akhir: ~50 bandara di CMS, aplikasi terhubung untuk membacanya, dan sistem desain terpasang.

1. Buat situs webnya

Daftar di Profound (autentikasi WorkOS) dan buat situs web bernama airports. Salin dua hal: ID situs web (UUID di URL admin) dan kunci API tier baca dari Deployments → Create API key. Aplikasi hanya membaca, jadi kunci baca sudah cukup.

2. Susun kerangka dan hubungkan aplikasi

bunx create-profound-next airports
cd airports

Tambahkan kredensial Anda ke .env.local:

PROFOUND_API_KEY=<your read key>
NEXT_PUBLIC_PROFOUND_WEBSITE_ID=<your website id>
NEXT_PUBLIC_CMS_API_URL=https://cms.dev.tryprofound.com
NEXT_PUBLIC_BUNNY_CDN_URL=https://cms-profound.b-cdn.net

Jalankan bun dev dan buka localhost:3000 untuk memastikan koneksi berhasil.

3. Buat komponen airport

Di admin, buka Components → Create new component dan beri nama airport. Tambahkan enam bidang: code, name, city, country (Text) dan latitude, longitude (Number). Tandai code sebagai bidang Route Slug dan setel status ke Active. Biarkan setiap bidang opsional; jangan tambahkan tag UI Element.

Komponen airport — enam bidang, dengan code ditetapkan sebagai Route Slug.

4. Tarik komponen ke dalam tipe

bun run generate-schemas

Perintah ini menulis airportSchema (Zod) dan Airport (tipe) ke generated/cms-schemas.ts, dan memastikan kredensial Anda berfungsi.

5. Isi data melalui MCP

Hubungkan MCP dan lakukan autentikasi:

claude mcp add --transport http Profound http://107.21.107.99:8081/mcp

Server melakukan autentikasi melalui OAuth (WorkOS). Di Claude Code, jalankan /mcp, pilih Profound, dan selesaikan proses masuk di browser Anda — Claude Code juga akan meminta otomatis saat pertama kali alat Profound dipanggil. Setelah /mcp menampilkan Profound sebagai connected, minta Claude:

Hasilkan lima puluh bandara asli — kode IATA, nama, kota, negara, dan koordinat yang benar. Simpan sebagai JSON di folder data, validasi terhadap komponen airport kami, lalu buat masing-masing sebagai dokumen terbit melalui Profound MCP secara paralel.

Buka airport → Variants untuk memastikan ada ~50 bandara berstatus published. Aplikasi membaca dengan kunci API; MCP menulis dengan sesi WorkOS-nya sendiri.

Sekitar 50 bandara, diisi sebagai varian berstatus published.

6. Tambahkan sistem desain

Kerangka awal dikirim tanpa gaya. Letakkan DESIGN.md (blok Tailwind v4 @theme plus token) di root proyek — bisa buatan Anda sendiri, atau unduh dari refero.design. Lalu minta Claude:

Baca DESIGN.md. Siapkan Tailwind v4 dan hubungkan tema serta fontnya. Gunakan next/font untuk font, bukan impor Google saat runtime. Hanya styling — belum ada halaman atau komponen.

Pastikan src/app/globals.css memiliki @import "tailwindcss"; plus blok @theme, dan localhost:3000 menampilkan tokennya.

Bagian 2 — Pembangunan

Bangun lapisan rendering: elemen UI, komponen React, rute, binding CEL, dan terjemahan.

1. Definisikan empat komponen elemen UI

Di admin, Create new component empat kali (tanpa Route Slug). Untuk masing-masing, tambahkan bidang dengan tipe Text kecuali yang disebutkan, setel status ke Active, dan tambahkan tag UI Element di Settings → Tags:

• nav → brand
• headline → title, subtitle
• body → code, city, country, latitude (Number), longitude (Number)
• footer → text

body.latitude dan body.longitude harus berupa Number agar sesuai dengan komponen bandara.

Setiap elemen UI adalah komponen tersendiri — ini body, berstatus Active dengan tag UI Element.

Keempat elemen UI berdampingan dengan komponen airport.

2. Hasilkan ulang tipe

bun run generate-schemas

3. Hasilkan komponen React dan daftarkan

Minta Claude:

Bangun empat komponen React — nav, headline, body, footer — di components/. Masing-masing menerima satu prop content yang diketik sebagai BlockComponentProps<T> dari cms-renderer/lib/types, di mana T adalah tipe elemen yang dihasilkan, dan membaca bidangnya dari content. Daftarkan semuanya di registry rute catch-all sesuai nama komponen. Gaya menggunakan sistem desain kita, namun sebagai komponen kita sendiri — jangan menyalin tata letak situs sumber. Nav: brand di kiri. Headline: nama bandara dengan subtitle code · city, country. Body: panel detail berisi code, city, country, dan koordinat. Footer: satu baris statis. Hanya tata letak dan styling.

Claude membuat keempat komponen dan mengisi registry di src/app/[...slug]/page.tsx:

const registry = { nav: Nav, headline: Headline, body: Body, footer: Footer };

Dua aturan: tiap komponen membaca bidang dari content (bukan sebagai prop terpisah), dan kunci registry harus persis sama dengan nama komponen di CMS — jika tidak cocok, akan kosong.

4. Buat rute parametrik

Di admin, buka Pages → Create page dan atur pola /{airport_code}. Di Dynamic Segment Mappings, petakan airport_code → komponen airport, bidang slug code. Simpan — Anda akan masuk ke Page Builder. Pastikan /JFK dapat diakses.

5. Tambahkan elemen UI, hubungkan CEL, dan terbitkan

Menambahkan elemen UI ke halaman dari tab Custom.

Keempat elemen UI ditambahkan ke binding JFK di Page Builder.

1. Pilih binding JFK → Add UI Element → tab Custom → tambahkan nav, headline, body, footer secara berurutan. Profound menyebarkan set tersebut ke setiap binding bandara.

2. Isi setiap bidang. Nilai statis (nav brand, footer text): ketik langsung. Nilai dinamis: ubah ke mode dinamis dan tulis CEL. Referensi bersama adalah documents.get("airport", meta.params.airport_code).

   Bidang	Nilai CEL
   headline.title	documents.get("airport", meta.params.airport_code).name
   headline.subtitle	documents.get("airport", meta.params.airport_code).code + " · " + documents.get("airport", meta.params.airport_code).city + ", " + documents.get("airport", meta.params.airport_code).country
   body.code / body.city / body.country	documents.get("airport", meta.params.airport_code).<field>
   body.latitude / body.longitude	documents.get("airport", meta.params.airport_code).latitude (dan .longitude)
   nav.brand, footer.text	string statis

3. Publish halaman tersebut (pojok kanan atas).

6. Verifikasi dalam bahasa Inggris

Buka localhost:3000/JFK, lalu /SFO, /LAX — template sama, konten bandara berbeda.

Halaman selesai menampilkan data JFK dalam bahasa Inggris.

7. Internasionalisasikan

1. Terjemahkan komponennya terlebih dahulu. Di admin, buka setiap komponen (komponen apa pun — tidak harus elemen UI) dan klik Translate → Submit. Profound menerjemahkan kontennya ke 35 bahasa sekaligus, termasuk nilai bidang statis. Lakukan ini sebelum Anda mengedit rute atau menyentuh CEL.

   

   Translate → Submit mengirim komponen ke 35 bahasa sekaligus.

2. Tambahkan dimensi bahasa. Di Pages, ubah pola menjadi /{language}/{airport_code}. Tambahkan Dynamic Segment Mapping untuk language → komponen Sistem language, bidang slug code. Simpan dan pastikan /en/JFK dapat diakses.

   

   Menambahkan segmen {language} ke rute.

3. Arahkan setiap bidang yang bisa diterjemahkan ke fetch terjemahan. Menginternasionalisasi halaman berarti mengganti setiap bidang yang bergantung bahasa — bukan hanya headline — dari documents.get(...) ke documents.translated("airport", meta.params.airport_code, meta.params.language):

   Bidang	CEL Terjemahan
   headline.title	documents.translated("airport", meta.params.airport_code, meta.params.language).name
   headline.subtitle	documents.get("airport", meta.params.airport_code).code + " · " + documents.translated("airport", meta.params.airport_code, meta.params.language).city + ", " + documents.translated("airport", meta.params.airport_code, meta.params.language).country
   body.city / body.country	documents.translated("airport", meta.params.airport_code, meta.params.language).city (dan .country)

   Biarkan IATA code dan koordinat tetap menggunakan documents.get — nilainya sama di setiap bahasa. nav.brand dan footer.text sudah tercakup oleh fitur Translate di langkah 1.

Setelah semuanya selesai, /fr/SFO, /de/SFO, dll. tampil sepenuhnya dalam bahasa masing-masing.

Bagian 3 — Produksi

1. Deploy: GitHub, lalu Vercel

Push ke GitHub:

git init
git add -A
git commit -m "Airport directory"
gh repo create airports --public --source=. --push

Impor ke Vercel: Add New → Project → impor repositori airports. Tambahkan variabel environment — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL, dan opsional NEXT_PUBLIC_BUNNY_CDN_URL — lalu Deploy. Kunjungi /en/JFK dan /fr/SFO. Setiap git push berikutnya akan redeploy.

2. Live preview dan penyuntingan di tempat

Keduanya sudah tersedia dalam kerangka.

• Live preview: <Refresher> di layout.tsx memperbarui halaman yang sedang Anda pratinjau ketika Anda mengedit dan menyimpan di admin — tanpa redeploy.
• In-place editing: tambahkan ?edit_mode=true ke URL apa pun (mis. …/en/JFK?edit_mode=true) untuk menampilkan overlay penyuntingan. Pengunjung publik tetap melihat halaman bersih.

?edit_mode=true menampilkan overlay editor di halaman live.

Selesai dibangun

Lima puluh bandara, 35 bahasa, live — dijelaskan sekali dan diisi oleh data: satu rute, empat komponen React, dan beberapa binding CEL. CMS menampung kontennya, kode Anda merendernya, dan CEL menghubungkannya.