Build & Ship an Airport Directory

Készíts egy valódi, nemzetköziesített repülőtér-katalógust a Profound CMS-ben: egyetlen URL-minta, amely minden repülőtérhez külön oldalt renderel, 35 nyelven. Te írod a Next.js kódot és kézzel építed fel a CMS-struktúrát; a Claude Code (a Profound MCP-n keresztül) három feladatot végez el — létrehozza a repülőtéri adatokat, beköti a dizájnrendszert és legenerálja a négy React komponenst. Három rész: Beállítás, Felépítés, Élesítés.

Nézd meg a teljes videós bemutatót.

Mit fogsz elkészíteni

• Körülbelül 50 repülőtéri rekord, mindegyik saját URL-en.
• Egy paraméterezett útvonal /{language}/{airport_code}.
• Négy UI-elem — navigáció, főcím, törzsszöveg, lábléc — amelyet a cms-renderer renderel.
• Élő CMS-adatok CEL kötéseken keresztül.
• Mind a 35 nyelv, egyetlen kattintással lefordítva.
• Telepítve a Vercelre élő előnézettel és helyben szerkesztéssel.

Előfeltételek

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code csatlakoztatott Profound MCP-vel (1. rész).
• Egy Profound CMS fiók.
• A 3. részhez: bejelentkezett GitHub CLI (gh), valamint egy GitHubhoz kapcsolt Vercel fiók.

Hogyan áll össze

• A Komponensek határozzák meg a tartalom szerkezetét. A Route Slug mező teszi egy komponenst útvonalon elérhetővé; a UI Element címke teheti elhelyezhetővé az oldalon; a System komponensek (például a language) beépítve érkeznek.
• A Változatok maguk a tartalmak (JFK, SFO, LAX…).
• A UI-elemek az oldalszekciók, amelyeket CEL tölt ki — a Profound sablonon belüli szkriptje, amely rendereléskor fut.
• A paraméterezett útvonal az URL-t egy változatra és egy UI-elem készletre képezi le.
• A Next.js alkalmazásod mindezt a cms-renderer SDK-val rendereli egy olvasási szintű API-kulccsal.

1. rész — Beállítás

Végállapot: kb. 50 repülőtér a CMS-ben, az alkalmazás összekötve velük, és a dizájnrendszer bekötve.

1. Hozd létre a webhelyet

Regisztrálj a Profoundnál (WorkOS hitelesítés), és hozz létre egy airports nevű webhelyet. Másolj ki két dolgot: a webhelyazonosítót (a UUID-t az admin URL-jében) és egy olvasási szintű API-kulcsot a Deployments → Create API key menüpontból. Az alkalmazás csak olvas, ezért elég egy olvasási kulcs.

2. Generáld és csatlakoztasd az alkalmazást

bunx create-profound-next airports
cd airports

Add hozzá a hitelesítő adataidat a .env.local fájlhoz:

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

bun dev futtatása után nyisd meg a localhost:3000-et, hogy ellenőrizd a kapcsolatot.

3. Hozd létre az airport komponenst

Az adminban menj a Components → Create new component menüpontra, és nevezd el airport-nak. Adj hozzá hat mezőt: code, name, city, country (Text) és latitude, longitude (Number). Jelöld meg a code mezőt Route Slug mezőként, majd állítsd a státuszt Active-ra. Hagyd mindegyik mezőt opcionálisnak; ne adj hozzá UI Element címkét.

Az airport komponens — hat mező, a code Route Slugként beállítva.

4. Húzd be a komponenst a típusok közé

bun run generate-schemas

Ez létrehozza az airportSchema (Zod) sémát és az Airport típust a generated/cms-schemas.ts fájlban, és megerősíti, hogy a hitelesítő adataid működnek.

5. Töltsd fel az adatokat az MCP-n keresztül

Csatlakoztasd az MCP-t és hitelesíts:

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

A szerver OAuth-on (WorkOS) keresztül hitelesít. A Claude Code-ban futtasd a /mcp parancsot, válaszd a Profound opciót, és fejezd be a bejelentkezést a böngésződben — a Claude Code automatikusan is rákérdez, amikor először hívsz meg egy Profound eszközt. Miután a /mcp connected állapotot mutat a Profoundnál, írd be Claude-nak:

Generálj ötven valós repülőteret — valós IATA-kódokkal, nevekkel, városokkal, országokkal és koordinátákkal. Mentsd el JSON-ként egy data mappába, validáld az airport komponensünk ellen, majd hozd létre mindet publikált dokumentumként a Profound MCP-n keresztül, párhuzamosan.

Nyisd meg az airport → Variants nézetet, hogy lásd a közel 50 publikált repülőteret. Az alkalmazás az API-kulccsal olvas, az MCP pedig a saját WorkOS munkamenetével ír.

Körülbelül 50 repülőtér, publikált változatként feltöltve.

6. Adj hozzá egy dizájnrendszert

A sablon stílus nélkül érkezik. Helyezz el egy DESIGN.md fájlt (egy Tailwind v4 @theme blokkot plusz tokeneket) a projekt gyökerébe — lehet saját, vagy letöltheted a refero.design oldalról. Ezután írd meg Claude-nak:

Olvasd be a DESIGN.md-t. Állítsd be a Tailwind v4-et, és kösd be a témát és a fontokat. Használd a next/font megoldást a betűtípusokhoz, ne runtime Google importot. Csak a stílusra fókuszálj — még nincsenek oldalak vagy komponensek.

Ellenőrizd, hogy a src/app/globals.css tartalmazza az @import "tailwindcss"; sort és az @theme blokkot, valamint hogy a localhost:3000 megjeleníti a tokeneket.

2. rész — Felépítés

Építsd fel a renderelési réteget: a UI-elemeket, a React komponenseket, az útvonalat, a CEL kötéseket és a fordítást.

1. Határozd meg a négy UI-elem komponenst

Az adminban hozz létre új komponenst négyszer (Route Slug nélkül). Mindegyikhez add hozzá a mezőket Text típussal, hacsak nincs jelezve máshogy, állítsd a státuszt Active-ra, és add hozzá a UI Element címkét a Settings → Tags menüpontban:

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

A body.latitude és body.longitude mezők legyenek Number típusúak, hogy illeszkedjenek az airport komponenshez.

Minden UI-elem külön komponens — itt a body, Active státusszal és UI Element címkével.

Mind a négy UI-elem az airport komponens mellett.

2. Generáld újra a típusokat

bun run generate-schemas

3. Generáld le a React komponenseket és regisztráld őket

Írd meg Claude-nak:

Készíts négy React komponenst — nav, headline, body, footer — a components/ mappában. Mindegyik egyetlen content propot kap, amely a cms-renderer/lib/types könyvtár BlockComponentProps<T> típusa, ahol T az elem generált típusa, és a mezőket a content-ről olvassa. Regisztráld mind a négyet a fogadó útvonal registryjében komponensnév szerint. Stílusold őket a dizájnrendszerünkkel, de saját komponensként — ne másold az eredeti oldal elrendezését. Nav: brand bal oldalon. Headline: repülőtér neve code · city, country alcímmel. Body: adatlapon jelenjen meg a kód, város, ország és koordináták. Footer: egy statikus sor. Csak elrendezés és stílus.

Claude létrehozza a négy komponenst és kitölti a registryt a src/app/[...slug]/page.tsx fájlban:

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

Két szabály: minden komponens a mezőket a content-ről olvassa (nem külön propként), és a registry kulcsainak pontosan egyezniük kell a CMS-ben lévő komponensnevekkel — ha nem egyeznek, üresen renderelődnek.

4. Hozd létre a paraméterezett útvonalat

Az adminban menj a Pages → Create page oldalra, és állítsd be a mintát /{airport_code}-ra. A Dynamic Segment Mappings résznél rendeld a airport_code szegmenst az airport komponenshez, slug mezőnek a code-ot megadva. Mentsd el — a Page Builder felületre kerülsz. Ellenőrizd, hogy a /JFK elérhető.

5. Add hozzá a UI-elemeket, kösd be a CEL-t, és publikálj

UI-elem hozzáadása az oldalhoz a Custom fülről.

A négy UI-elem hozzáadva a JFK bindinghoz a Page Builderben.

1. Válaszd ki a JFK bindingot → Add UI Element → Custom fül → add hozzá a nav, headline, body, footer elemeket ebben a sorrendben. A Profound ezt a készletet minden repülőtéri bindingra propagálja.

2. Töltsd ki a mezőket. A statikus értékeket (nav brand, footer szöveg) közvetlenül beírhatod. A dinamikus értékekhez válts dinamikus módra, és írj CEL-t. A közös lekérdezés: documents.get("airport", meta.params.airport_code).

   Mező	CEL érték
   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 (és .longitude)
   nav.brand, footer.text	statikus karakterláncok

3. Publikáld az oldalt (jobb felső sarok).

6. Ellenőrzés angolul

Nyisd meg a localhost:3000/JFK, majd a /SFO, /LAX útvonalakat — azonos sablon, eltérő repülőtér.

Az elkészült oldal JFK adataival, angol nyelven.

7. Nemzetköziesítés

1. Először fordítsd le a komponenseket. Az adminban nyisd meg az egyes komponenseket (bármelyiket — nem kell, hogy UI-elem legyen), majd kattints a Translate → Submit gombra. A Profound egyszerre fordítja le a tartalmát mind a 35 nyelvre, beleértve a statikus mezőket is. Ezt tedd meg mielőtt módosítanád az útvonalat vagy bármilyen CEL-t.

   

   A Translate → Submit egyszerre küldi be a komponenst mind a 35 nyelvre.

2. Add hozzá a nyelvi dimenziót. A Pages alatt változtasd meg a mintát /{language}/{airport_code} formára. Adj hozzá egy Dynamic Segment Mapping bejegyzést a language szegmenshez → a beépített language rendszerkomponenshez, slug mezőnek a code-ot megadva. Mentsd el, és ellenőrizd, hogy /en/JFK betöltődik.

   

   A {language} szegmens hozzáadása az útvonalhoz.

3. Minden fordítható mezőt irányíts a fordított lekérésre. A nemzetköziesített oldalhoz minden nyelvfüggő mezőt — nem csak a főcímet — át kell állítani a documents.get(...) hívásról a documents.translated("airport", meta.params.airport_code, meta.params.language) hívásra:

   Mező	Fordított 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 (és .country)

   Hagyd az IATA code mezőt és a koordinátákat a documents.get híváson — ezek minden nyelven azonosak. A nav.brand és a footer.text már lefedett az 1. lépésben lefuttatott fordítással.

Amint mindhárom lépés kész, a /fr/SFO, /de/SFO stb. oldalak teljesen lefordítva töltődnek be.

3. rész — Élesítés

1. Telepítés: GitHub, majd Vercel

Töltsd fel GitHubra:

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

Importáld a projektet a Vercelbe: Add New → Project → importáld az airports repót. Add hozzá a környezeti változókat — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL, és opcionálisan NEXT_PUBLIC_BUNNY_CDN_URL — majd kattints a Deploy gombra. Látogasd meg a /en/JFK és /fr/SFO oldalakat. Minden további git push újradeployt indít.

2. Élő előnézet és helyben szerkesztés

Mindkettő a sablonnal érkezik.

• Élő előnézet: a layout.tsx fájlban lévő <Refresher> frissíti az éppen előnézetben lévő oldalt, amikor az adminban szerkesztesz és mentesz — nincs szükség új deployra.
• Helyben szerkesztés: adj a URL végéhez ?edit_mode=true paramétert (pl. …/en/JFK?edit_mode=true), hogy megjelenjenek a szerkesztő rétegek. A publikus látogatók továbbra is a tiszta oldalt látják.

A ?edit_mode=true a szerkesztőt rávetíti az élő oldalra.

Kész is a projekt

Ötven repülőtér, 35 nyelven, élőben — egyszer leírva és adatokkal feltöltve: egy útvonal, négy React komponens és néhány CEL-kötés. A CMS tárolja a tartalmat, a kódod rendereli, a CEL pedig összeköti őket.