Build & Ship an Airport Directory

Bouw een echte, geïnternationaliseerde luchthavengids op Profound CMS: één URL-patroon dat een pagina voor elke luchthaven rendert, in 35 talen. Jij schrijft de Next.js-code en bouwt de CMS-structuur met de hand; Claude Code (via de Profound MCP) verzorgt drie taken — het genereren van de luchthavengegevens, het aansluiten van een designsysteem en het genereren van de vier React-componenten. Drie delen: Installatie, Bouw, Productie.

Bekijk de volledige videorondleiding.

Wat je gaat bouwen

• ~50 luchthavenrecords, elk op een eigen URL.
• Eén parametrische route /{language}/{airport_code}.
• Vier UI-elementen — nav, headline, body, footer — gerenderd door cms-renderer.
• Live CMS-gegevens via CEL-bindings.
• Alle 35 talen, in één klik vertaald.
• Gedeployed naar Vercel met live preview en inline bewerken.

Vereisten

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code met de Profound MCP verbonden (Deel 1).
• Een Profound CMS-account.
• Voor deel 3: GitHub CLI (gh) aangemeld en een Vercel-account gekoppeld aan GitHub.

Hoe het samenhangt

• Componenten bepalen de contentstructuur. Een veld Route Slug maakt een component routable; een UI Element-tag maakt het plaatsbaar op een pagina; Systeemcomponenten (zoals language) worden meegeleverd.
• Varianten zijn de content (JFK, SFO, LAX…).
• UI-elementen zijn paginasecties, gevuld met CEL — Profounds in-template scripting, geëvalueerd bij het renderen.
• Een parametrische route koppelt een URL aan een variant plus een set UI-elementen.
• Je Next.js-app rendert alles via de cms-renderer-SDK met een API-sleutel op leesniveau.

Deel 1 — Installatie

Eindtoestand: ~50 luchthavens in het CMS, de app gekoppeld om ze te lezen en het designsysteem aangesloten.

1. Maak de website aan

Schrijf je in bij Profound (WorkOS-auth) en maak een website genaamd airports. Kopieer twee dingen: de website-ID (de UUID in de admin-URL) en een API-sleutel op leesniveau via Deployments → Create API key. De app leest alleen, dus een leessleutel volstaat.

2. Scaffold de app en maak verbinding

bunx create-profound-next airports
cd airports

Voeg je inloggegevens toe aan .env.local:

PROFOUND_API_KEY=<je leessleutel>
NEXT_PUBLIC_PROFOUND_WEBSITE_ID=<je website-id>
NEXT_PUBLIC_CMS_API_URL=https://cms.dev.tryprofound.com
NEXT_PUBLIC_BUNNY_CDN_URL=https://cms-profound.b-cdn.net

Voer bun dev uit en open localhost:3000 om te bevestigen dat de verbinding werkt.

3. Maak de component airport aan

Ga in de admin naar Components → Create new component en noem hem airport. Voeg zes velden toe: code, name, city, country (Text) en latitude, longitude (Number). Markeer code als het veld Route Slug en zet de status op Active. Laat elk veld optioneel; voeg geen UI Element-tag toe.

De component airport — zes velden, met code ingesteld als Route Slug.

4. Haal de component op naar types

bun run generate-schemas

Dit schrijft airportSchema (Zod) en Airport (type) naar generated/cms-schemas.ts, en bevestigt dat je inloggegevens werken.

5. Vul de gegevens via de MCP

Verbind de MCP en doe de authenticatie:

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

De server authenticeert via OAuth (WorkOS). Voer in Claude Code /mcp uit, kies Profound en rond de aanmelding in je browser af — Claude Code vraagt je er ook automatisch naar zodra een Profound-tool wordt aangeroepen. Zodra /mcp Profound als connected toont, geef Claude de prompt:

Genereer vijftig echte luchthavens — correcte IATA-codes, namen, steden, landen en coördinaten. Sla ze op als JSON in een map data, valideer tegen onze airport-component en maak elk aan als een gepubliceerd document via de Profound MCP, parallel.

Open airport → Variants om ~50 gepubliceerde luchthavens te bevestigen. De app leest met de API-sleutel; de MCP schrijft met zijn eigen WorkOS-sessie.

Ongeveer 50 luchthavens, gevuld als gepubliceerde varianten.

6. Voeg een designsysteem toe

Het scaffold wordt zonder stijl geleverd. Plaats een DESIGN.md (een Tailwind v4-@theme-blok plus tokens) in de projectroot — je eigen, of download er één van refero.design. Geef Claude daarna de prompt:

Lees DESIGN.md. Zet Tailwind v4 op en koppel het thema en de fonts. Gebruik next/font voor fonts, geen runtime-import van Google. Alleen styling — nog geen pagina’s of componenten.

Bevestig dat src/app/globals.css @import "tailwindcss"; plus het @theme-blok bevat, en dat localhost:3000 de tokens toont.

Deel 2 — Bouw

Bouw de renderlaag: de UI-elementen, de React-componenten, de route, de CEL-bindings en de vertaling.

1. Definieer de vier UI-elementcomponenten

Maak in de admin vier keer een Create new component aan (geen Route Slug). Voeg voor elk de velden als Text toe, tenzij anders aangegeven, zet de status op Active en geef de tag UI Element via Settings → Tags:

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

body.latitude en body.longitude moeten Number zijn om overeen te komen met de airport-component.

Elk UI-element is een eigen component — hier body, ingesteld op Active met de UI Element-tag.

Alle vier UI-elementen naast de component airport.

2. Genereer de types opnieuw

bun run generate-schemas

3. Genereer de React-componenten en registreer ze

Geef Claude de prompt:

Bouw vier React-componenten — nav, headline, body, footer — in components/. Elk krijgt één content-prop getypt als BlockComponentProps<T> uit cms-renderer/lib/types, waarbij T het gegenereerde type van het element is, en leest zijn velden uit content. Registreer alle vier in het register van de catch-all-route op componentnaam. Style ze met ons designsysteem, maar als onze eigen componenten — kopieer de lay-out van de bronwebsite niet. Nav: brand links. Headline: luchthavenaam met een subtitel code · city, country. Body: detailpaneel met code, city, country en coördinaten. Footer: één statische regel. Alleen lay-out en styling.

Claude maakt de vier componenten en vult het register in src/app/[...slug]/page.tsx:

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

Twee regels: elke component leest zijn velden via content (niet als losse props), en de registratiesleutels moeten exact overeenkomen met de componentnamen in het CMS — een afwijking rendert leeg.

4. Maak de parametrische route

Ga in de admin naar Pages → Create page en stel het patroon /{airport_code} in. Onder Dynamic Segment Mappings koppel je airport_code aan de component airport, slug-veld code. Sla op — je komt uit in de Page Builder. Controleer dat /JFK werkt.

5. Voeg UI-elementen toe, koppel CEL en publiceer

Een UI-element toevoegen aan de pagina via de tab Custom.

De vier UI-elementen toegevoegd aan de JFK-binding in de Page Builder.

1. Kies de binding JFK → Add UI Element → tab Custom → voeg nav, headline, body, footer in deze volgorde toe. Profound verspreidt de set naar elke luchthavenbinding.

2. Vul elk veld. Statische waarden (nav brand, footer-tekst): typ ze direct in. Dynamische waarden: schakel naar dynamic en schrijf CEL. De gedeelde lookup is documents.get("airport", meta.params.airport_code).

   Veld	CEL-waarde
   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 (en .longitude)
   nav.brand, footer.text	statische strings

3. Publiceer de pagina (rechtsboven).

6. Controleer in het Engels

Open localhost:3000/JFK, daarna /SFO, /LAX — dezelfde template, een andere luchthaven.

De voltooide pagina die de gegevens van JFK rendert, in het Engels.

7. Internationaliseer

1. Vertaal eerst de componenten. Open in de admin elke component (een willekeurige — het hoeft geen UI-element te zijn) en klik Translate → Submit. Profound vertaalt de inhoud in één keer naar alle 35 talen, inclusief statische veldwaarden. Doe dit voordat je de route wijzigt of CEL aanpast.

   

   Translate → Submit stuurt een component naar alle 35 talen tegelijk.

2. Voeg de taaldimensie toe. Wijzig in Pages het patroon naar /{language}/{airport_code}. Voeg een Dynamic Segment Mapping toe voor language → de ingebouwde systeemcomponent language, slug-veld code. Sla op en controleer dat /en/JFK rendert.

   

   Het segment {language} aan de route toevoegen.

3. Richt elk vertaalbaar veld op de vertaalde fetch. Internationaliseren van de pagina betekent dat je elk taalonafhankelijk veld — niet alleen de headline — overschakelt van documents.get(...) naar documents.translated("airport", meta.params.airport_code, meta.params.language):

   Veld	Vertaalde 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 (en .country)

   Laat de IATA-code en de coördinaten op documents.get staan — die zijn identiek in elke taal. nav.brand en footer.text zijn al gedekt door de componentvertaling in stap 1.

Wanneer alle drie klaar zijn, rendert /fr/SFO, /de/SFO, enz. volledig vertaald.

Deel 3 — Productie

1. Deploy: GitHub, daarna Vercel

Push naar GitHub:

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

Importeer in Vercel: Add New → Project → importeer de repo airports. Voeg de omgevingsvariabelen toe — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL en optioneel NEXT_PUBLIC_BUNNY_CDN_URL — en klik vervolgens op Deploy. Bezoek /en/JFK en /fr/SFO. Elke toekomstige git push triggert een nieuwe deploy.

2. Live preview en inline bewerken

Beide worden meegeleverd met het scaffold.

• Live preview: de <Refresher> in layout.tsx ververst de pagina die je bekijkt wanneer je in de admin iets bewerkt en opslaat — geen redeploy nodig.
• Inline bewerken: voeg ?edit_mode=true toe aan een willekeurige URL (bijv. …/en/JFK?edit_mode=true) voor bewerkingsoverlays. Publieke bezoekers zien nog steeds de schone pagina.

?edit_mode=true legt de editor over de live pagina heen.

Dat is de build

Vijftig luchthavens, 35 talen, live — één keer beschreven en gevuld met data: één route, vier React-componenten en een handvol CEL-bindings. Het CMS beheert de content, jouw code rendert, en CEL verbindt alles.