Build & Ship an Airport Directory

Izgradite stvarni, internacionalizirani direktorij zračnih luka na Profound CMS-u: jedan URL obrazac koji prikazuje stranicu za svaku zračnu luku, na 35 jezika. Vi pišete Next.js kod i ručno gradite CMS strukturu; Claude Code (putem Profound MCP-a) preuzima tri zadatka — generiranje podataka o zračnim lukama, povezivanje dizajnerskog sustava i generiranje četiri React komponente. Tri dijela: Postavljanje, Izgradnja, Produkcija.

Pogledajte cijeli video vodič.

Što ćete izgraditi

• ~50 zapisa o zračnim lukama, svaki na vlastitom URL-u.
• Jedna parametarska ruta /{language}/{airport_code}.
• Četiri UI elementa — nav, headline, body, footer — koje renderira cms-renderer.
• CMS podaci uživo putem CEL vezivanja.
• Svih 35 jezika, prevedenih jednim klikom.
• Objavljeno na Vercelu s pregledom uživo i uređivanjem na licu mjesta.

Preduvjeti

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code s povezanim Profound MCP-om (1. dio).
• Profound CMS račun.
• Za 3. dio: prijavljeni GitHub CLI (gh) i Vercel račun povezan s GitHubom.

Kako se sve uklapa

• Komponente definiraju oblik sadržaja. Polje Route Slug čini komponentu dostupnom kroz rutu; oznaka UI Element smješta je na stranicu; Sistemske komponente (poput language) dolaze ugrađene.
• Varijante su sadržaj (JFK, SFO, LAX…).
• UI elementi su dijelovi stranice, popunjeni pomoću CEL-a — Profoundova skriptiranja unutar predloška, koje se evaluira pri renderiranju.
• Parametarska ruta mapira URL na varijantu plus skup UI elemenata.
• Vaša Next.js aplikacija sve prikazuje putem cms-renderer SDK-a s API ključem za čitanje.

1. dio — Postavljanje

Krajnje stanje: ~50 zračnih luka u CMS-u, aplikacija povezana da ih čita i dizajnerski sustav postavljen.

1. Izradite web-stranicu

Prijavite se na Profound (WorkOS autentifikacija) i izradite web-stranicu nazvanu airports. Kopirajte dvije stvari: ID web-stranice (UUID u administratorskom URL-u) i API ključ razine čitanja iz Deployments → Create API key. Aplikaciji je potrebno samo čitanje, pa je ključ za čitanje dovoljan.

2. Postavite i povežite aplikaciju

bunx create-profound-next airports
cd airports

Dodajte svoje vjerodajnice u .env.local:

PROFOUND_API_KEY=<vaš read ključ>
NEXT_PUBLIC_PROFOUND_WEBSITE_ID=<vaš website id>
NEXT_PUBLIC_CMS_API_URL=https://cms.dev.tryprofound.com
NEXT_PUBLIC_BUNNY_CDN_URL=https://cms-profound.b-cdn.net

Pokrenite bun dev i otvorite localhost:3000 kako biste potvrdili povezivanje.

3. Kreirajte komponentu airport

U adminu idite na Components → Create new component i nazovite je airport. Dodajte šest polja: code, name, city, country (Text) te latitude, longitude (Number). Označite code kao polje Route Slug i postavite status na Active. Ostavite sva polja neobaveznima; nemojte dodavati oznaku UI Element.

Komponenta airport — šest polja, s code postavljenim kao Route Slug.

4. Učitajte komponentu u tipove

bun run generate-schemas

Ovo zapisuje airportSchema (Zod) i Airport (tip) u generated/cms-schemas.ts, i potvrđuje da vaše vjerodajnice rade.

5. Napunite podatke putem MCP-a

Povežite MCP i autentificirajte se:

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

Poslužitelj se autentificira preko OAuth-a (WorkOS). U Claude Codeu pokrenite /mcp, odaberite Profound i dovršite prijavu u pregledniku — Claude Code će vas također automatski potaknuti prvi put kada se pozove Profound alat. Kada /mcp prikaže da je Profound connected, zatražite od Claudea:

Generiraj pedeset stvarnih zračnih luka — ispravne IATA kodove, nazive, gradove, države i koordinate. Spremi ih kao JSON u data mapu, validiraj prema našoj komponenti airport, zatim svaku kreiraj kao objavljen dokument putem Profound MCP-a, paralelno.

Otvorite airport → Variants kako biste potvrdili da postoji ~50 objavljenih zračnih luka. Aplikacija ih čita pomoću API ključa; MCP piše s vlastitom WorkOS sesijom.

Oko 50 zračnih luka, dodanih kao objavljene varijante.

6. Dodajte dizajnerski sustav

Scaffold dolazi bez stilova. Postavite DESIGN.md (Tailwind v4 @theme blok plus tokeni) u korijen projekta — vlastiti ili preuzet s refero.design. Zatim zatražite od Claudea:

Pročitaj DESIGN.md. Postavi Tailwind v4 i poveži temu i fontove. Koristi next/font za fontove, a ne runtime Google import. Samo stiliziranje — bez stranica ili komponenti.

Potvrdite da src/app/globals.css sadrži @import "tailwindcss"; plus @theme blok, te da localhost:3000 prikazuje tokene.

2. dio — Izgradnja

Izgradite render sloj: UI elemente, React komponente, rutu, CEL vezivanja i prijevod.

1. Definirajte četiri komponente UI elemenata

U adminu Create new component četiri puta (bez Route Slug polja). Za svaku dodajte polja kao Text osim gdje je drukčije navedeno, postavite status na Active i dodajte oznaku UI Element u Settings → Tags:

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

body.latitude i body.longitude moraju biti Number kako bi odgovarali komponenti airport.

Svaki UI element je vlastita komponenta — ovdje body, postavljena na Active s oznakom UI Element.

Sva četiri UI elementa uz komponentu airport.

2. Ponovno generirajte tipove

bun run generate-schemas

3. Generirajte React komponente i registrirajte ih

Zatražite od Claudea:

Izgradi četiri React komponente — nav, headline, body, footer — u components/. Svaka prima jedan content prop tipiziran kao BlockComponentProps<T> iz cms-renderer/lib/types, gdje je T generirani tip elementa, i čita svoja polja s content. Registriraj sve četiri u registru catch-all rute prema nazivu komponente. Stiliziraj ih našim dizajnerskim sustavom, ali kao naše vlastite komponente — ne kopiraj izgled izvorišne stranice. Nav: brand s lijeve strane. Headline: naziv zračne luke s podnaslovom code · city, country. Body: panel s detaljima s kodom, gradom, državom i koordinatama. Footer: jedan statični redak. Samo layout i stil.

Claude kreira četiri komponente i popunjava registar u src/app/[...slug]/page.tsx:

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

Dva pravila: svaka komponenta čita svoja polja s content (ne kao zasebne propse), i ključevi registra moraju točno odgovarati nazivima komponenti u CMS-u — u suprotnom se ništa ne prikazuje.

4. Kreirajte parametarsku rutu

U adminu idite na Pages → Create page i postavite obrazac /{airport_code}. Pod Dynamic Segment Mappings mapirajte airport_code → komponenta airport, slug polje code. Spremite — završit ćete u Page Builderu. Provjerite da /JFK radi.

5. Dodajte UI elemente, povežite CEL i objavite

Dodavanje UI elementa na stranicu s kartice Custom.

Četiri UI elementa dodana u JFK vezanje u Page Builderu.

1. Odaberite JFK vezanje → Add UI Element → kartica Custom → dodajte nav, headline, body, footer tim redom. Profound propagira taj skup na svako vezanje zračne luke.

2. Popunite svako polje. Statične vrijednosti (nav brand, footer text): upišite ih izravno. Dinamičke vrijednosti: prebacite na dynamic i napišite CEL. Zajednički upit je documents.get("airport", meta.params.airport_code).

   Polje	CEL vrijednost
   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 (i .longitude)
   nav.brand, footer.text	statični stringovi

3. Objavite stranicu (gore desno).

6. Provjerite na engleskom

Otvorite localhost:3000/JFK, zatim /SFO, /LAX — isti predložak, različite zračne luke.

Dovršena stranica koja prikazuje podatke o JFK-u, na engleskom.

7. Internacionalizirajte

1. Prvo prevedite komponente. U adminu otvorite svaku komponentu (bilo koju — ne mora biti UI element) i kliknite Translate → Submit. Profound prevodi sadržaj na svih 35 jezika odjednom, uključujući statične vrijednosti polja. Učinite to prije uređivanja rute ili CEL koda.

   

   Translate → Submit šalje komponentu na svih 35 jezika odjednom.

2. Dodajte dimenziju jezika. U Pages promijenite obrazac u /{language}/{airport_code}. Dodajte Dynamic Segment Mapping za language → ugrađena language sistemska komponenta, slug polje code. Spremite i provjerite da /en/JFK radi.

   

   Dodavanje segmenta {language} u rutu.

3. Usmjerite sva prevodiva polja na prevedeni fetch. Internacionalizacija stranice znači zamjenu svakog jezično ovisnog polja — ne samo naslovnog — iz documents.get(...) u documents.translated("airport", meta.params.airport_code, meta.params.language):

   Polje	Prevedeni 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 (i .country)

   Ostavite IATA code i koordinate na documents.get — identični su na svim jezicima. nav.brand i footer.text već su pokriveni prijevodom komponenti u koraku 1.

Kada su sva tri koraka gotova, /fr/SFO, /de/SFO, itd. potpuno se prikazuju prevedeni.

3. dio — Produkcija

1. Implementacija: GitHub, zatim Vercel

Gurnite na GitHub:

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

Uvezite u Vercel: Add New → Project → uvezite airports repo. Dodajte varijable okoline — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL, i po želji NEXT_PUBLIC_BUNNY_CDN_URL — zatim Deploy. Posjetite /en/JFK i /fr/SFO. Svaki budući git push ponovno objavljuje.

2. Pregled uživo i uređivanje na licu mjesta

Oboje dolazi sa scaffoldom.

• Pregled uživo: <Refresher> u layout.tsx osvježava stranicu koju pregledavate kada uređujete i spremate u adminu — bez ponovnog deploya.
• Uređivanje na licu mjesta: dodajte ?edit_mode=true bilo kojem URL-u (npr. …/en/JFK?edit_mode=true) za preklapanja za uređivanje. Posjetitelji javnog weba i dalje vide čistu stranicu.

?edit_mode=true postavlja urednik preko žive stranice.

To je cijela izgradnja

Pedeset zračnih luka, 35 jezika, uživo — opisano jednom i ispunjeno podacima: jedna ruta, četiri React komponente i nekoliko CEL vezivanja. CMS drži sadržaj, vaš kod ga renderira, a CEL ih povezuje.