Build & Ship an Airport Directory

Vytvorte skutočný, internacionalizovaný adresár letísk v Profound CMS: jeden vzor URL, ktorý vykreslí stránku pre každé letisko v 35 jazykoch. Vy napíšete kód Next.js a ručne vybudujete štruktúru CMS; Claude Code (prostredníctvom Profound MCP) sa postará o tri úlohy — generovanie dát o letiskách, prepojenie dizajnového systému a vytvorenie štyroch React komponentov. Tri časti: Nastavenie, Výstavba, Produkcia.

Pozrite si celé video s ukážkou.

Čo vytvoríte

• ~50 záznamov o letiskách, každý na vlastnom URL.
• Jedna parametrická trasa /{language}/{airport_code}.
• Štyri prvky UI — nav, headline, body, footer — vykresľované pomocou cms-renderer.
• Živé dáta z CMS cez väzby CEL.
• Všetkých 35 jazykov, preložených na jedno kliknutie.
• Nasadené na Vercel s živým náhľadom a úpravami priamo na stránke.

Predpoklady

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code s pripojeným Profound MCP (časť 1).
• Účet v Profound CMS.
• Pre časť 3: prihlásený GitHub CLI (gh) a účet Vercel prepojený s GitHubom.

Ako to do seba zapadá

• Komponenty definujú tvar obsahu. Pole Route Slug sprístupní komponent ako trasovateľný; štítok UI Element ho umožní umiestniť na stránku; System komponenty (napríklad language) sú dostupné vstavané.
• Varianty sú samotný obsah (JFK, SFO, LAX…).
• Prvky UI sú sekcie stránky, vyplnené pomocou CEL — skriptovania Profoundu priamo v šablóne, ktoré sa vyhodnocuje pri vykreslení.
• Parametrická trasa mapuje URL na variant a sadu prvkov UI.
• Vaša aplikácia Next.js všetko vykreslí cez cms-renderer SDK s API kľúčom na čítanie.

Časť 1 — Nastavenie

Cieľový stav: približne 50 letísk v CMS, aplikácia napojená na ich čítanie a pripravený dizajnový systém.

1. Vytvorte webstránku

Zaregistrujte sa v Profound (overenie WorkOS) a vytvorte web s názvom airports. Skopírujte dve veci: ID webu (UUID v administračnom URL) a API kľúč na čítanie z Deployments → Create API key. Aplikácia len číta, takže kľúč na čítanie úplne stačí.

2. Scaffoldujte a prepojte aplikáciu

bunx create-profound-next airports
cd airports

Pridajte svoje poverenia do .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

Spustite bun dev a otvorte localhost:3000, aby ste potvrdili, že spojenie funguje.

3. Vytvorte komponent airport

V administrácii prejdite na Components → Create new component a pomenujte ho airport. Pridajte šesť polí: code, name, city, country (Text) a latitude, longitude (Number). Označte code ako pole Route Slug a nastavte stav na Active. Všetky polia nechajte voliteľné; nepridávajte žiadny štítok UI Element.

Komponent airport — šesť polí, pričom code je nastavené ako Route Slug.

4. Preneste komponent do typov

bun run generate-schemas

Tým sa zapíšu airportSchema (Zod) a Airport (typ) do generated/cms-schemas.ts a overí sa, že vaše poverenia fungujú.

5. Naplňte údaje cez MCP

Pripojte MCP a autentifikujte sa:

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

Server sa autentifikuje cez OAuth (WorkOS). V Claude Code spustite /mcp, zvoľte Profound a dokončite prihlásenie vo svojom prehliadači — Claude Code vás na to automaticky vyzve aj pri prvom použití nástroja Profound. Keď /mcp zobrazuje Profound ako connected, zadajte pre Claude pokyn:

Vygeneruj päťdesiat skutočných letísk — platné kódy IATA, názvy, mestá, krajiny a súradnice. Ulož ich ako JSON do priečinka data, over ich podľa nášho komponentu airport a potom každé vytvor ako publikovaný dokument cez Profound MCP paralelne.

Otvorte airport → Variants a overte, že je publikovaných približne 50 letísk. Aplikácia číta pomocou API kľúča; MCP zapisuje cez vlastnú reláciu WorkOS.

Približne 50 letísk, pridaných ako publikované varianty.

6. Pridajte dizajnový systém

Scaffold je dodaný bez štýlov. Umiestnite do koreňa projektu súbor DESIGN.md (blok @theme pre Tailwind v4 plus tokeny) — vlastný alebo stiahnutý zo refero.design. Potom dajte Claudeovi pokyn:

Prečítaj DESIGN.md. Nastav Tailwind v4 a zapoj tému a písma. Použi next/font na písma, nie runtime import z Googlu. Len štýlovanie — zatiaľ žiadne stránky ani komponenty.

Overte, že src/app/globals.css obsahuje @import "tailwindcss"; a blok @theme, a že localhost:3000 zobrazuje tokeny.

Časť 2 — Výstavba

Vybudujte vrstvu renderovania: prvky UI, React komponenty, trasu, väzby CEL a preklady.

1. Definujte štyri komponenty prvkov UI

V administrácii vytvorte nový komponent štyrikrát (bez Route Slug). Pre každý pridajte polia ako Text, ak nie je uvedené inak, nastavte stav na Active a v Settings → Tags pridajte štítok UI Element:

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

body.latitude a body.longitude musia byť typu Number, aby zodpovedali komponentu airport.

Každý prvok UI je vlastný komponent — tu body, nastavený na Active so štítkom UI Element.

Všetky štyri prvky UI popri komponente airport.

2. Znovu vygenerujte typy

bun run generate-schemas

3. Vygenerujte React komponenty a zaregistrujte ich

Požiadajte Claudea:

Vytvor štyri React komponenty — nav, headline, body, footer — v components/. Každý prijíma jediný prop content typu BlockComponentProps<T> z cms-renderer/lib/types, kde T je vygenerovaný typ prvku, a číta svoje polia z content. Zaregistruj všetky štyri v registri v catch-all trase podľa názvu komponentu. Nastyluj ich pomocou nášho dizajnového systému, ale ako naše vlastné komponenty — nekopíruj rozloženie zdrojovej stránky. Nav: brand vľavo. Headline: názov letiska s podtitulom code · city, country. Body: panel detailov s kódom, mestom, krajinou a súradnicami. Footer: jeden statický riadok. Len rozloženie a štýlovanie.

Claude vytvorí všetky štyri komponenty a doplní register v src/app/[...slug]/page.tsx:

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

Dve pravidlá: každý komponent číta svoje polia z content (nie ako samostatné props) a kľúče v registri musia presne zodpovedať názvom komponentov v CMS — nesúlad znamená prázdne vykreslenie.

4. Vytvorte parametrickú trasu

V administrácii prejdite na Pages → Create page a nastavte vzor /{airport_code}. V Dynamic Segment Mappings namapujte airport_code na komponent airport, slug pole code. Uložte — dostanete sa do Page Builder. Overte, že /JFK funguje.

5. Pridajte prvky UI, prepojte CEL a publikujte

Pridanie prvku UI na stránku z karty Custom.

Štyri prvky UI pridané k väzbe JFK v Page Builderi.

1. Vyberte väzbu JFK → Add UI Element → karta Custom → pridajte nav, headline, body, footer v tomto poradí. Profound túto sadu propaguje do každej väzby letiska.

2. Vyplňte každé pole. Statické hodnoty (nav brand, text footer): zadajte ich priamo. Dynamické hodnoty: prepnite na dynamické a napíšte CEL. Zdieľané vyhľadávanie je documents.get("airport", meta.params.airport_code).

   Pole	Hodnota 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 (a .longitude)
   nav.brand, footer.text	statické reťazce

3. Publikujte stránku (vpravo hore).

6. Overte v angličtine

Otvorte localhost:3000/JFK, potom /SFO, /LAX — rovnaká šablóna, iné letisko.

Hotová stránka, ktorá zobrazuje údaje JFK v angličtine.

7. Internacionalizujte

1. Najprv preložte komponenty. V administrácii otvorte každý komponent (hociktorý — nemusí to byť prvok UI) a kliknite na Translate → Submit. Profound preloží jeho obsah naraz do všetkých 35 jazykov, vrátane statických hodnôt polí. Urobte to skôr, než začnete upravovať trasu alebo sa dotknete akéhokoľvek CEL.

   

   Translate → Submit odošle komponent naraz do všetkých 35 jazykov.

2. Pridajte jazykovú dimenziu. V Pages zmeňte vzor na /{language}/{airport_code}. Pridajte Dynamic Segment Mapping pre language → vstavaný systémový komponent language, slug pole code. Uložte a overte, že /en/JFK funguje.

   

   Pridanie segmentu {language} do trasy.

3. Nasměrujte každé preložiteľné pole na preložené dáta. Internacionalizácia stránky znamená, že musíte prepnúť každé jazykovo závislé pole — nielen nadpis — z documents.get(...) na documents.translated("airport", meta.params.airport_code, meta.params.language):

   Pole	Preložená hodnota 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 (a .country)

   Nechajte IATA code a súradnice na documents.get — sú rovnaké v každom jazyku. nav.brand a footer.text už pokrýva preklad komponentu v kroku 1.

Keď sú všetky tri kroky hotové, /fr/SFO, /de/SFO a ďalšie sa načítajú úplne preložené.

Časť 3 — Produkcia

1. Nasadenie: najprv GitHub, potom Vercel

Odošlite do GitHubu:

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

Importujte projekt do Vercelu: Add New → Project → importujte repozitár airports. Pridajte premenné prostredia — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL a voliteľne NEXT_PUBLIC_BUNNY_CDN_URL — potom kliknite na Deploy. Navštívte /en/JFK a /fr/SFO. Každé budúce git push spustí nové nasadenie.

2. Živý náhľad a úpravy priamo na stránke

Obe funkcie sú súčasťou scaffoldingu.

• Živý náhľad: <Refresher> v layout.tsx aktualizuje stránku, ktorú si prezeráte, keď upravíte a uložíte v administrácii — bez potreby nového nasadenia.
• Úpravy priamo na stránke: pridajte ?edit_mode=true k ľubovoľnému URL (napr. …/en/JFK?edit_mode=true) a zobrazia sa editačné prekrytia. Verejní návštevníci stále uvidia čistú stránku.

?edit_mode=true zobrazí editor ako prekrytie priamo na živej stránke.

Takto vyzerá výsledok

Päťdesiat letísk, 35 jazykov, všetko naživo — popísané raz a naplnené dátami: jedna trasa, štyri React komponenty a niekoľko väzieb CEL. CMS udržiava obsah, váš kód ho vykresľuje a CEL ich prepája.