Build & Ship an Airport Directory

Bygg en verklig, internationaliserad flygplatskatalog i Profound CMS: en URL-struktur som renderar en sida för varje flygplats, på 35 språk. Du skriver Next.js-koden och bygger CMS-strukturen för hand; Claude Code (via Profound MCP) hanterar tre uppgifter — att generera flygplatsdatan, koppla in ett designsystem och generera de fyra React-komponenterna. Tre delar: Installation, Bygg, Produktion.

Titta på den fullständiga videoguiden.

Det här bygger du

• ~50 flygplatsposter, var och en på sin egen URL.
• En parametrisk rutt /{language}/{airport_code}.
• Fyra UI-element — nav, rubrik, brödtext, sidfot — renderade av cms-renderer.
• Live-CMS-data via CEL-bindningar.
• Alla 35 språk, översatta med ett klick.
• Distribuerad till Vercel med liveförhandsvisning och redigering på plats.

Förutsättningar

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code med Profound MCP anslutet (Del 1).
• Ett konto på Profound CMS.
• För Del 3: GitHub CLI (gh) inloggad och ett Vercel-konto länkat till GitHub.

Så hänger det ihop

• Komponenter definierar innehållets form. Ett fält Route Slug gör en komponent routbar; en tagg UI Element gör att den kan placeras på en sida; System-komponenter (som language) skickas med från början.
• Varianter är innehållet (JFK, SFO, LAX…).
• UI-element är sidsektioner, fyllda med CEL — Profounds mallskript, utvärderade vid renderingen.
• En parametrisk rutt mappar en URL till en variant plus en uppsättning UI-element.
• Din Next.js-app renderar allt genom SDK:n cms-renderer med en API-nyckel i läsnivån.

Del 1 — Installation

Slutmål: ~50 flygplatser i CMS:et, appen kopplad för att läsa dem och designsystemet på plats.

1. Skapa webbplatsen

Registrera dig på Profound (WorkOS-autentisering) och skapa en webbplats som heter airports. Kopiera två saker: webbplats-ID:t (UUID:t i admin-URL:en) och en API-nyckel i läsnivå från Deployments → Create API key. Appen läser bara, så en läsnyckel räcker.

2. Skapa grundstrukturen och koppla appen

bunx create-profound-next airports
cd airports

Lägg till dina autentiseringsuppgifter i .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

Kör bun dev och öppna localhost:3000 för att bekräfta att den kopplar upp.

3. Skapa komponenten airport

Gå i admin till Components → Create new component och namnge den airport. Lägg till sex fält: code, name, city, country (Text) samt latitude, longitude (Number). Markera code som fältet Route Slug och sätt status till Active. Lämna alla fält valfria; lägg inte till någon UI Element-tagg.

Komponenten airport — sex fält där code är satt som Route Slug.

4. Hämta komponenten till typer

bun run generate-schemas

Detta skriver airportSchema (Zod) och Airport (typ) till generated/cms-schemas.ts och bekräftar att dina autentiseringsuppgifter fungerar.

5. Så frön till datan via MCP:t

Anslut MCP:t och autentisera:

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

Servern autentiserar via OAuth (WorkOS). I Claude Code kör du /mcp, välj Profound och slutför inloggningen i webbläsaren — Claude Code uppmanar dig även automatiskt första gången ett Profound-verktyg anropas. När /mcp visar Profound som connected, uppmana Claude:

Generera femtio verkliga flygplatser — korrekta IATA-koder, namn, städer, länder och koordinater. Spara dem som JSON i en data-mapp, validera mot vår airport-komponent och skapa sedan varje som ett publicerat dokument via Profound MCP, parallellt.

Öppna airport → Variants för att bekräfta att cirka 50 publicerade flygplatser finns. Appen läser med API-nyckeln; MCP:t skriver med sin egen WorkOS-session.

Runt 50 flygplatser, insådda som publicerade varianter.

6. Lägg till ett designsystem

Grundstrukturen levereras ostylad. Lägg ett DESIGN.md (ett Tailwind v4-@theme-block plus tokens) i projektroten — ditt eget eller ladda ner ett från refero.design. Uppmana sedan Claude:

Läs DESIGN.md. Konfigurera Tailwind v4 och koppla in temat och typsnitten. Använd next/font för typsnitten, inte en Google-import i runtime. Endast styling — inga sidor eller komponenter ännu.

Bekräfta att src/app/globals.css har @import "tailwindcss"; plus @theme-blocket och att localhost:3000 visar tokenserna.

Del 2 — Bygg

Bygg renderingslagret: UI-elementen, React-komponenterna, rutten, CEL-bindningarna och översättningen.

1. Definiera de fyra UI-elementkomponenterna

I admin, Create new component fyra gånger (ingen Route Slug). För varje, lägg till fälten som Text om inget annat anges, sätt status till Active och lägg till taggen UI Element i Settings → Tags:

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

body.latitude och body.longitude måste vara Number för att matcha komponenten airport.

Varje UI-element är en egen komponent — här body, satt till Active med taggen UI Element.

Alla fyra UI-elementen tillsammans med komponenten airport.

2. Regenerera typerna

bun run generate-schemas

3. Generera React-komponenterna och registrera dem

Uppmana Claude:

Bygg fyra React-komponenter — nav, headline, body, footer — i components/. Varje komponent tar en enda content-prop typad som BlockComponentProps<T> från cms-renderer/lib/types, där T är elementets genererade typ, och läser sina fält från content. Registrera alla fyra i fång-allt-ruttens register med komponentnamnet. Styla dem med vårt designsystem, men som våra egna komponenter — kopiera inte källsidans layout. Nav: varumärke till vänster. Headline: flygplatsnamn med en undertitel code · city, country. Body: informationspanel med code, city, country och koordinater. Footer: en statisk rad. Endast layout och styling.

Claude skapar de fyra komponenterna och fyller registret i src/app/[...slug]/page.tsx:

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

Två regler: varje komponent läser sina fält från content (inte som separata props), och registry-nycklarna måste matcha CMS-komponenternas namn exakt — annars renderas inget.

4. Skapa den parametriska rutten

Gå i admin till Pages → Create page och sätt mönstret /{airport_code}. Under Dynamic Segment Mappings, mappa airport_code → komponenten airport, slug-fält code. Spara — du hamnar i Page Builder. Kontrollera att /JFK fungerar.

5. Lägg till UI-element, koppla CEL och publicera

Lägga till ett UI-element på sidan från fliken Custom.

De fyra UI-elementen tillagda i bindningen för JFK i Page Builder.

1. Välj bindningen JFK → Add UI Element → fliken Custom → lägg till nav, headline, body, footer i ordning. Profound sprider uppsättningen till varje flygplatsbindning.

2. Fyll varje fält. Statisk text (nav-brand, footer-text): skriv dem direkt. Dynamiska värden: växla till dynamiskt läge och skriv CEL. Den delade uppslagsnyckeln är documents.get("airport", meta.params.airport_code).

   Fält	CEL-värde
   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 (och .longitude)
   nav.brand, footer.text	statiska strängar

3. Publicera sidan (uppe till höger).

6. Verifiera på engelska

Öppna localhost:3000/JFK, sedan /SFO, /LAX — samma mall, olika flygplats.

Den färdiga sidan som renderar JFK:s data, på engelska.

7. Internationalisera

1. Översätt komponenterna först. I admin, öppna varje komponent (vilken som helst — det behöver inte vara ett UI-element) och klicka Translate → Submit. Profound översätter dess innehåll till alla 35 språk på en gång, inklusive statiska fältvärden. Gör detta innan du redigerar rutten eller rör någon CEL.

   

   Translate → Submit skickar en komponent till alla 35 språk samtidigt.

2. Lägg till språkdimensionen. Under Pages ändrar du mönstret till /{language}/{airport_code}. Lägg till en Dynamic Segment Mapping för language → den inbyggda systemkomponenten language, slug-fält code. Spara och kontrollera att /en/JFK fungerar.

   

   Lägga till segmentet {language} i rutten.

3. Peka varje översättningsbart fält mot den översatta hämtningen. Internationalisering av sidan innebär att alla språkbundna fält — inte bara rubriken — byts från documents.get(...) till documents.translated("airport", meta.params.airport_code, meta.params.language):

   Fält	Översatt 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 (och .country)

   Lämna IATA-code och koordinaterna på documents.get — de är identiska på varje språk. nav.brand och footer.text täcks redan av komponentöversättningen i steg 1.

När alla tre stegen är klara fungerar /fr/SFO, /de/SFO osv. fullt översatta.

Del 3 — Produktion

1. Distribuera: GitHub, sedan Vercel

Push till GitHub:

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

Importera till Vercel: Add New → Project → importera airports-repot. Lägg till miljövariablerna — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL och valfritt NEXT_PUBLIC_BUNNY_CDN_URL — och Deploy. Besök /en/JFK och /fr/SFO. Varje framtida git push gör en ny distribution.

2. Liveförhandsvisning och redigering på plats

Båda följer med grundstrukturen.

• Liveförhandsvisning: <Refresher> i layout.tsx uppdaterar sidan du förhandsgranskar när du redigerar och sparar i admin — ingen ny distribution behövs.
• Redigering på plats: lägg till ?edit_mode=true på valfri URL (t.ex. …/en/JFK?edit_mode=true) för redigeringsöverlägg. Publika besökare ser fortfarande den rena sidan.

?edit_mode=true lägger över redigeraren på livesidan.

Det var bygget

Femtio flygplatser, 35 språk, live — beskrivet en gång och fyllt av data: en rutt, fyra React-komponenter och ett fåtal CEL-bindningar. CMS:et håller innehållet, din kod renderar det och CEL kopplar ihop dem.