Adresář letišť

Vytvořte skutečný, internacionalizovaný adresář letišť na Profound CMS: jeden vzor URL, který vykreslí stránku pro každé letiště, a to v 35 jazycích. Vy napíšete kód v Next.js a ručně postavíte strukturu CMS; Claude Code (přes Profound MCP) se postará o tři úkoly — vygeneruje data o letištích, napojí návrhový systém a vytvoří čtyři komponenty v Reactu. Tři části: Příprava, Stavba, Produkce.

Podívejte se na úplný video průvodce.

Co postavíte

• přibližně 50 záznamů o letištích, každé na vlastní adrese URL.
• jedna parametrická trasa /{language}/{airport_code}.
• čtyři prvky uživatelského rozhraní — nav, headline, body, footer — vykreslované přes cms-renderer.
• živá CMS data pomocí vazeb CEL.
• všech 35 jazyků, přeložených na jedno kliknutí.
• nasazení na Vercel s živým náhledem a editací přímo na stránce.

Předpoklady

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code s připojeným Profound MCP (část 1).
• účet v Profound CMS.
• pro část 3: přihlášené GitHub CLI (gh) a účet Vercel propojený s GitHubem.

Jak to do sebe zapadá

• Komponenty definují tvar obsahu. Pole Route Slug dělá komponentu směrovatelnou; štítek UI Element ji umožní umístit na stránku; Systémové komponenty (například language) jsou vestavěné.
• Varianty jsou samotný obsah (JFK, SFO, LAX…).
• UI prvky jsou sekce stránky plněné pomocí CEL — šablonovacího skriptování Profoundu, které se vyhodnocuje při renderování.
• Parametrická trasa mapuje URL na variantu plus sadu UI prvků.
• Vaše aplikace Next.js všechno vykreslí přes SDK cms-renderer s API klíčem pro čtení.

Část 1 — Příprava

Cílový stav: přibližně 50 letišť v CMS, aplikace napojená na jejich čtení a nasazený návrhový systém.

1. Vytvořte web

Zaregistrujte se v Profound (WorkOS autentizace) a založte web s názvem airports. Zkopírujte dvě věci: ID webu (UUID v URL administrace) a API klíč pro čtení z Deployments → Create API key. Aplikace pouze čte, takže postačí klíč pro čtení.

2. Vygenerujte a propojte aplikaci

bunx create-profound-next airports
cd airports

Přidejte své údaje do .env.local:

PROFOUND_API_KEY=<váš read klíč>
NEXT_PUBLIC_PROFOUND_WEBSITE_ID=<vaše ID webu>
NEXT_PUBLIC_CMS_API_URL=https://cms.dev.tryprofound.com
NEXT_PUBLIC_BUNNY_CDN_URL=https://cms-profound.b-cdn.net

Spusťte bun dev a otevřete localhost:3000, abyste ověřili připojení.

3. Vytvořte komponentu airport

V administraci přejděte do Components → Create new component a pojmenujte ji airport. Přidejte šest polí: code, name, city, country (Text) a latitude, longitude (Number). Označte code jako pole Route Slug a nastavte stav na Active. Všechna pole ponechte nepovinná; nepřidávejte žádný štítek UI Element.

Komponenta airport — šest polí, přičemž code je nastaveno jako Route Slug.

4. Načtěte komponentu do typů

bun run generate-schemas

Tento příkaz zapíše airportSchema (Zod) a Airport (typ) do generated/cms-schemas.ts a potvrdí, že vaše přihlašovací údaje fungují.

5. Naplňte data přes MCP

Připojte MCP a ověřte se:

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

Server se ověřuje přes OAuth (WorkOS). V Claude Code spusťte /mcp, zvolte Profound a dokončete přihlášení v prohlížeči — Claude Code vás k tomu automaticky vyzve také při prvním použití nástroje Profound. Jakmile /mcp ukazuje Profound jako connected, zadejte pokyn pro Claude:

Vygeneruj padesát skutečných letišť — správné kódy IATA, názvy, města, země a souřadnice. Ulož je jako JSON do složky data, validuj proti naší komponentě airport a poté pomocí Profound MCP vytvoř každé jako publikovaný dokument paralelně.

Otevřete airport → Variants a ověřte, že máte přibližně 50 publikovaných letišť. Aplikace je čte pomocí API klíče; MCP zapisuje s vlastní WorkOS relací.

Přibližně 50 letišť, zapsaných jako publikované varianty.

6. Přidejte návrhový systém

Generátor je bez stylů. Umístěte DESIGN.md (blok @theme pro Tailwind v4 plus tokeny) do kořene projektu — vlastní, nebo stažený z refero.design. Poté zadejte pokyn Claude:

Přečti DESIGN.md. Nastav Tailwind v4 a napoj motiv a písma. Použij next/font pro písma, ne import Google za běhu. Jen stylování — žádné stránky ani komponenty.

Ověřte, že src/app/globals.css obsahuje @import "tailwindcss"; spolu s blokem @theme, a že localhost:3000 zobrazuje tokeny.

Část 2 — Stavba

Vybudujte vrstvu vykreslování: UI prvky, komponenty v Reactu, trasu, vazby CEL a překlady.

1. Definujte čtyři komponenty UI prvků

V administraci čtyřikrát zvolte Create new component (bez Route Slug). Pro každou přidejte pole jako Text, pokud není uvedeno jinak, nastavte stav na Active a ve Settings → Tags přidejte štítek UI Element:

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

body.latitude a body.longitude musí být typu Number, aby odpovídaly komponentě airport.

Každý UI prvek je vlastní komponenta — zde body, aktivní se štítkem UI Element.

Všechny čtyři UI prvky vedle komponenty airport.

2. Znovu vygenerujte typy

bun run generate-schemas

3. Vygenerujte React komponenty a zaregistrujte je

Zadejte pokyn pro Claude:

Vytvoř čtyři React komponenty — nav, headline, body, footer — ve složce components/. Každá bere jediný prop content typu BlockComponentProps<T> z cms-renderer/lib/types, kde T je vygenerovaný typ prvku, a čte svá pole z content. Zaregistruj všechny čtyři v registru v záchytné trase podle názvu komponenty. Nastyluj je pomocí našeho návrhového systému, ale jako naše vlastní komponenty — nekopíruj rozvržení zdrojového webu. Nav: značka vlevo. Headline: název letiště s podtitulem code · city, country. Body: panel s detaily s kódem, městem, zemí a souřadnicemi. Footer: jeden statický řádek. Jen rozvržení a styl.

Claude vytvoří čtyři komponenty a doplní registr v src/app/[...slug]/page.tsx:

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

Dvě pravidla: každá komponenta čte svá pole z content (ne jako samostatné propy) a klíče v registru musí přesně odpovídat názvům komponent v CMS — nesoulad znamená prázdné vykreslení.

4. Vytvořte parametrickou trasu

V administraci přejděte do Pages → Create page a nastavte vzor /{airport_code}. V části Dynamic Segment Mappings namapujte airport_code na komponentu airport, pole slug code. Uložte — ocitnete se ve Page Builderu. Ověřte, že /JFK funguje.

5. Přidejte UI prvky, napojte CEL a publikujte

Přidání UI prvku na stránku z karty Custom.

Čtyři UI prvky přidané k vazbě JFK v Page Builderu.

1. Vyberte vazbu JFK → Add UI Element → karta Custom → přidejte nav, headline, body, footer v tomto pořadí. Profound sadu propaguje do každé vazby letiště.

2. Vyplňte jednotlivá pole. Statické hodnoty (značka v navigaci, text patičky): zadejte je přímo. Dynamické hodnoty: přepněte na dynamiku a napište CEL. Sdílený dotaz 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é řetězce

3. Publikujte stránku (vpravo nahoře).

6. Ověřte v angličtině

Otevřete localhost:3000/JFK, poté /SFO, /LAX — stejná šablona, jiné letiště.

Hotová stránka s daty pro JFK, v angličtině.

7. Internacionalizujte

1. Nejprve přeložte komponenty. V administraci otevřete každou komponentu (libovolnou — nemusí to být UI prvek) a klikněte na Translate → Submit. Profound přeloží její obsah do všech 35 jazyků najednou, včetně statických polí. Udělejte to dříve, než upravíte trasu nebo sáhnete na jakýkoli CEL.

   

   Translate → Submit pošle komponentu do všech 35 jazyků najednou.

2. Přidejte dimenzi jazyka. V Pages změňte vzor na /{language}/{airport_code}. Přidejte Dynamic Segment Mapping pro language → vestavěnou systémovou komponentu language, pole slug code. Uložte a ověřte, že /en/JFK funguje.

   

   Přidání segmentu {language} do trasy.

3. Nasměrujte každé přeložitelné pole na překlad. Internacionalizace stránky znamená přepnout každé jazykově závislé pole — nejen headline — z documents.get(...) na documents.translated("airport", meta.params.airport_code, meta.params.language):

   Pole	Přeložená 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)

   Nechte kód IATA code a souřadnice na documents.get — jsou ve všech jazycích stejné. nav.brand a footer.text už pokrývá překlad komponent v kroku 1.

Jakmile dokončíte všechny tři kroky, /fr/SFO, /de/SFO atd. se načítají v plném překladu.

Část 3 — Produkce

1. Nasazení: GitHub, poté Vercel

Nahrajte do GitHubu:

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

Importujte do Vercelu: Add New → Project → importujte repozitář airports. Přidejte proměnné prostředí — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL a volitelně NEXT_PUBLIC_BUNNY_CDN_URL — a poté klikněte na Deploy. Navštivte /en/JFK a /fr/SFO. Každý další git push spustí nové nasazení.

2. Živý náhled a editace přímo na stránce

Oboje je součástí generátoru.

• Živý náhled: <Refresher> v layout.tsx aktualizuje stránku, kterou máte v náhledu, když v administraci upravíte a uložíte — bez nového nasazení.
• Editace na stránce: přidejte ?edit_mode=true k libovolné URL (např. …/en/JFK?edit_mode=true) a zobrazí se editační overlaye. Veřejní návštěvníci uvidí stále čistou stránku.

?edit_mode=true zobrazí editor přímo na živé stránce.

Tím je stavba hotová

Padesát letišť, 35 jazyků, živě — popsáno jednou a vyplněno daty: jedna trasa, čtyři komponenty v Reactu a několik vazeb CEL. CMS drží obsah, váš kód ho vykresluje a CEL je propojuje.