Build & Ship an Airport Directory

Profound CMS üzerinde gerçek, uluslararasılaştırılmış bir havaalanı dizini oluşturun: her havaalanı için bir sayfa oluşturan tek bir URL deseni, 35 dilde. Next.js kodunu yazan ve CMS yapısını elle kuran sizsiniz; Claude Code (Profound MCP aracılığıyla) üç işi üstlenir — havaalanı verilerini üretmek, bir tasarım sistemini bağlamak ve dört React bileşeni üretmek. Üç bölüm: Kurulum, İnşa, Üretim.

Tam video anlatımını izleyin.

İnşa edeceğiniz şeyler

• ~50 havaalanı kaydı, her biri kendi URL'sinde.
• /{language}/{airport_code} şeklinde tek bir parametreli rota.
• cms-renderer tarafından oluşturulan dört UI öğesi — nav, headline, body, footer.
• CEL bağlamaları aracılığıyla canlı CMS verileri.
• Tek tıklamayla çevrilen tüm 35 dil.
• Canlı önizleme ve yerinde düzenleme ile Vercel'e dağıtım.

Önkoşullar

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code ile bağlantılı Profound MCP (Bölüm 1).
• Profound CMS hesabı.
• 3. Bölüm için: giriş yapılmış GitHub CLI (gh) ve GitHub'a bağlı bir Vercel hesabı.

Nasıl bir araya geliyor

• Bileşenler içerik biçimini tanımlar. Bir Route Slug alanı bir bileşeni yönlendirilebilir yapar; bir UI Element etiketi onu bir sayfaya yerleştirilebilir kılar; Sistem bileşenleri (ör. language) yerleşik gelir.
• Varyantlar içeriğin kendisidir (JFK, SFO, LAX…).
• UI öğeleri sayfa bölümleridir, kalıp içinde değerlendirilen CEL ile doldurulur.
• Bir parametreli rota, bir URL'yi bir varyant ve bir dizi UI öğesiyle eşler.
• Next.js uygulamanız bunların tümünü, cms-renderer SDK'sı ve okuma katmanı bir API anahtarıyla render eder.

Bölüm 1 — Kurulum

Son durum: CMS'de ~50 havaalanı, uygulama onları okumak üzere bağlanmış ve tasarım sistemi kurulmuş.

1. Web sitesini oluşturun

Profound'a (WorkOS kimlik doğrulaması) kaydolun ve airports adında bir web sitesi oluşturun. İki şeyi kopyalayın: yönetici URL'sindeki website ID (UUID) ve Deployments → Create API key bölümünden bir okuma katmanı API anahtarı. Uygulama yalnızca okur, bu yüzden bir okuma anahtarı yeterlidir.

2. Uygulamayı iskeletleyin ve bağlayın

bunx create-profound-next airports
cd airports

Kimlik bilgilerinizi .env.local dosyasına ekleyin:

PROFOUND_API_KEY=<okuma anahtarınız>
NEXT_PUBLIC_PROFOUND_WEBSITE_ID=<web sitesi kimliğiniz>
NEXT_PUBLIC_CMS_API_URL=https://cms.dev.tryprofound.com
NEXT_PUBLIC_BUNNY_CDN_URL=https://cms-profound.b-cdn.net

bun dev komutunu çalıştırın ve bağlantıyı doğrulamak için localhost:3000 adresini açın.

3. airport bileşenini oluşturun

Yönetimde Components → Create new component bölümüne gidin ve adını airport koyun. Altı alan ekleyin: code, name, city, country (Text) ve latitude, longitude (Number). code alanını Route Slug alanı olarak işaretleyin ve durumu Active olarak ayarlayın. Her alanı isteğe bağlı bırakın; UI Element etiketi eklemeyin.

airport bileşeni — altı alan, code Route Slug olarak ayarlı.

4. Bileşeni tiplere çekin

bun run generate-schemas

Bu işlem generated/cms-schemas.ts dosyasına airportSchema (Zod) ve Airport (tip) yazar ve kimlik bilgilerinizin çalıştığını doğrular.

5. Veriyi MCP üzerinden tohumlayın

MCP'yi bağlayın ve kimlik doğrulayın:

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

Sunucu OAuth (WorkOS) üzerinden kimlik doğrular. Claude Code'da /mcp komutunu çalıştırın, Profound'u seçin ve tarayıcınızda oturumu tamamlayın — bir Profound aracı ilk kez çağrıldığında Claude Code sizi otomatik olarak yönlendirir. /mcp Profound'u connected olarak gösterdiğinde, Claude'a şunu istem olarak verin:

Gerçek IATA kodları, adları, şehirleri, ülkeleri ve koordinatlarıyla elli gerçek havaalanı üret. Bunları data klasöründe JSON olarak kaydet, havaalanı bileşenimize karşı doğrula ve ardından her birini Profound MCP aracılığıyla eşzamanlı olarak yayımlanmış belge olarak oluştur.

Yaklaşık ~50 yayımlanmış havaalanını doğrulamak için airport → Variants bölümünü açın. Uygulama API anahtarıyla okur; MCP kendi WorkOS oturumuyla yazar.

Yaklaşık 50 havaalanı, yayımlanmış varyantlar olarak tohumlandı.

6. Bir tasarım sistemi ekleyin

İskelet stil olmadan gelir. Proje köküne bir DESIGN.md (Tailwind v4 @theme bloğu ve belirteçleri) yerleştirin — kendi belgeniz olabilir ya da refero.design adresinden indirin. Ardından Claude'a şunu isteyin:

DESIGN.md'yi oku. Tailwind v4'ü kur ve temayı ve fontları bağla. Fontlar için çalışma zamanı Google içe aktarması değil, next/font kullan. Yalnızca stil — sayfa veya bileşen yok.

src/app/globals.css dosyasında @import "tailwindcss"; satırının ve @theme bloğunun bulunduğunu, ayrıca localhost:3000 adresinin belirteçleri gösterdiğini doğrulayın.

Bölüm 2 — İnşa

Render katmanını oluşturun: UI öğeleri, React bileşenleri, rota, CEL bağlamaları ve çeviri.

1. Dört UI öğesi bileşenini tanımlayın

Yönetimde (Route Slug olmadan) dört kez Create new component oluşturun. Her biri için alanları Text olarak ekleyin (belirtildiğinde hariç), durumu Active olarak ayarlayın ve Settings → Tags bölümüne UI Element etiketini ekleyin:

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

body.latitude ve body.longitude alanlarının, havaalanı bileşeniyle eşleşmesi için Number olması gerekir.

Her UI öğesi kendi bileşenidir — burada body, Active olarak ayarlanmış ve UI Element etiketi eklenmiş.

Tüm dört UI öğesi, airport bileşeninin yanında.

2. Tipleri yeniden oluşturun

bun run generate-schemas

3. React bileşenlerini oluşturun ve kaydedin

Claude'a şunu istem olarak verin:

components/ içinde nav, headline, body, footer olmak üzere dört React bileşeni oluştur. Her biri, cms-renderer/lib/types içindeki BlockComponentProps<T> tipinde tek bir content prop'u alsın; burada T öğenin üretilmiş tipidir ve alanlarını content üzerinden okusun. Dördünü de kademeli rota kayıt defterine bileşen adıyla kaydet. Tasarım sistemimizle stillendir ama kendi bileşenlerimiz olarak — kaynak sitenin düzenini kopyalama. Nav: marka solda. Headline: başlıkta havaalanı adı, altta code · city, country alt başlığı. Body: kod, şehir, ülke ve koordinatları içeren detay paneli. Footer: tek statik satır. Sadece düzen ve stil.

Claude dört bileşeni oluşturur ve src/app/[...slug]/page.tsx dosyasındaki kayıt defterini doldurur:

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

İki kural: Her bileşen alanlarını content üzerinden okur (ayrı props olarak değil) ve kayıt defteri anahtarları, CMS bileşen adlarıyla birebir eşleşmelidir — bir uyuşmazlık render'ı boş bırakır.

4. Parametreli rotayı oluşturun

Yönetimde Pages → Create page bölümüne gidin ve deseni /{airport_code} olarak ayarlayın. Dynamic Segment Mappings altında airport_code → airport bileşenini, slug alanı code olacak şekilde eşleyin. Kaydedin — Page Builder'a yönlendirilirsiniz. /JFK adresinin çözümlendiğini doğrulayın.

5. UI öğeleri ekleyin, CEL bağlayın ve yayımlayın

Sayfaya özel sekmesinden bir UI öğesi eklemek.

JFK bağlamasında dört UI öğesi, Page Builder'da eklenmiş.

1. JFK bağlamasını seçin → Add UI Element → Custom sekmesi → sırayla nav, headline, body, footer ekleyin. Profound bu seti her havaalanı bağlamasına uygular.

2. Her alanı doldurun. Statik değerler (nav markası, footer metni): doğrudan yazın. Dinamik değerler: dinamiğe geçin ve CEL yazın. Ortak sorgu documents.get("airport", meta.params.airport_code).

   Alan	CEL değeri
   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 (ve .longitude)
   nav.brand, footer.text	statik dizeler

3. Sayfayı Publish (sağ üst) ile yayımlayın.

6. İngilizce olarak doğrulayın

localhost:3000/JFK, ardından /SFO, /LAX adreslerini açın — aynı şablon, farklı havaalanı.

Tamamlanmış sayfa, JFK verilerini İngilizce olarak gösteriyor.

7. Uluslararasılaştırın

1. Önce bileşenleri çevirin. Yönetimde her bileşeni açın (herhangi biri — UI öğesi olmak zorunda değil) ve Translate → Submit'e tıklayın. Profound içeriği tek seferde tüm 35 dile çevirir, statik alanlar dahil. Bunu, rotayı düzenlemeden veya herhangi bir CEL'e dokunmadan önce yapın.

   

   Translate → Submit, bir bileşeni tek seferde tüm 35 dile gönderir.

2. Dil boyutunu ekleyin. Pages bölümünde deseni /{language}/{airport_code} olarak değiştirin. language için bir Dynamic Segment Mapping ekleyin → yerleşik language Sistem bileşeni, slug alanı code. Kaydedin ve /en/JFK adresinin çözümlendiğini doğrulayın.

   

   Rotaya {language} segmentini eklemek.

3. Her çevrilebilir alanı çevrilmiş sorguya yönlendirin. Sayfayı uluslararasılaştırmak, dil bağımlı her alanı — yalnızca başlığı değil — documents.get(...) yerine documents.translated("airport", meta.params.airport_code, meta.params.language) kullanacak şekilde değiştirmek demektir:

   Alan	Çevrilmiş CEL
   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 (ve .country)

   IATA code ve koordinatları documents.get üzerinde bırakın — her dilde aynıdırlar. nav.brand ve footer.text adım 1'deki bileşen çevirisiyle zaten kapsanmıştır.

Üçü de tamamlandığında /fr/SFO, /de/SFO vb. tamamen çevrilmiş olarak açılır.

Bölüm 3 — Üretim

1. Dağıtın: GitHub, ardından Vercel

GitHub'a gönderin:

git init
git add -A
git commit -m "Havaalanı dizini"
gh repo create airports --public --source=. --push

Vercel'e içe aktarın: Add New → Project → airports deposunu içe aktarın. Ortam değişkenlerini ekleyin — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL ve isteğe bağlı olarak NEXT_PUBLIC_BUNNY_CDN_URL — ardından Deploy deyin. /en/JFK ve /fr/SFO adreslerini ziyaret edin. Bundan sonra her git push yeniden dağıtır.

2. Canlı önizleme ve yerinde düzenleme

Her ikisi de iskeletle birlikte gelir.

• Canlı önizleme: layout.tsx içindeki <Refresher>, yönetimde düzenleyip kaydettiğinizde önizlediğiniz sayfayı yeniden yükler — yeniden dağıtım gerekmez.
• Yerinde düzenleme: Her URL'ye ?edit_mode=true ekleyin (ör. …/en/JFK?edit_mode=true) ve düzenleme katmanlarını görün. Ziyaretçiler hâlâ temiz sayfayı görür.

?edit_mode=true, canlı sayfanın üstüne düzenleyiciyi bindirir.

İnşa bu kadar

Elli havaalanı, 35 dil, hepsi canlı — bir kez tanımlanıp verilerle dolduruldu: tek bir rota, dört React bileşeni ve bir avuç CEL bağlaması. CMS içeriği tutar, kodunuz onu render eder ve CEL ikisini birbirine bağlar.