Build & Ship an Airport Directory

Byg et ægte, internationaliseret lufthavnsregister på Profound CMS: ét URL-mønster, der gengiver en side for hver lufthavn på 35 sprog. Du skriver Next.js-koden og bygger CMS-strukturen manuelt; Claude Code (via Profound MCP) håndterer tre opgaver — generering af lufthavnsdata, tilslutning af et designsystem og generering af de fire React-komponenter. Tre dele: Opsætning, Byg, Produktion.

Se hele videovejledningen.

Det du bygger

• ~50 lufthavnsoptegnelser, hver med sin egen URL.
• Én parametrisk rute /{language}/{airport_code}.
• Fire UI-elementer — navigation, overskrift, brødtekst, footer — gengivet af cms-renderer.
• Live CMS-data via CEL-bindinger.
• Alle 35 sprog oversat med ét klik.
• Udrullet til Vercel med live-preview og inline-redigering.

Forudsætninger

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code med Profound MCP tilkoblet (Del 1).
• En Profound CMS-konto.
• Til Del 3: GitHub CLI (gh) med login samt en Vercel-konto forbundet til GitHub.

Sådan hænger det sammen

• Komponenter definerer indholdets form. Et felt af typen Route Slug gør en komponent kan knyttes til en rute; et UI Element-tag gør den placerbar på en side; System-komponenter (som language) følger med som standard.
• Varianter er selve indholdet (JFK, SFO, LAX …).
• UI-elementer er sektionerne på siden, fyldt med CEL — Profounds in-template-scripting, evalueret ved rendering.
• En parametrisk rute kortlægger en URL til en variant plus et sæt UI-elementer.
• Din Next.js-app gengiver det hele via cms-renderer-SDK'et med en API-nøgle i læseniveau.

Del 1 — Opsætning

Sluttilstand: ~50 lufthavne i CMS'et, appen koblet på til at læse dem, og designsystemet på plads.

1. Opret websitet

Tilmeld dig hos Profound (WorkOS-login) og opret et website med navnet airports. Kopiér to ting: website-ID'et (UUID'en i admin-URL'en) og en API-nøgle i læseniveau fra Deployments → Create API key. Appen læser kun, så en læsenøgle er nok.

2. Scaffold og forbind appen

bunx create-profound-next airports
cd airports

Tilføj dine legitimationsoplysninger til .env.local:

PROFOUND_API_KEY=<din læsenøgle>
NEXT_PUBLIC_PROFOUND_WEBSITE_ID=<dit 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 og åbn localhost:3000 for at bekræfte forbindelsen.

3. Opret airport-komponenten

Gå i admin til Components → Create new component og navngiv den airport. Tilføj seks felter: code, name, city, country (Text) og latitude, longitude (Number). Markér code som Route Slug-felt og sæt status til Active. Lad alle felter være valgfrie; tilføj intet UI Element-tag.

airport-komponenten — seks felter, med code sat som Route Slug.

4. Hent komponenten ind som typer

bun run generate-schemas

Dette skriver airportSchema (Zod) og Airport (type) til generated/cms-schemas.ts og bekræfter, at dine legitimationsoplysninger virker.

5. Seed data via MCP'en

Tilslut MCP'en og autentificér:

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

Serveren autentificerer via OAuth (WorkOS). I Claude Code kører du /mcp, vælger Profound og fuldfører login i din browser — Claude Code beder dig også automatisk, første gang et Profound-værktøj kaldes. Når /mcp viser Profound som connected, prompt Claude:

Generér halvtreds rigtige lufthavne — korrekte IATA-koder, navne, byer, lande og koordinater. Gem dem som JSON i en data-mappe, valider mod vores airport-komponent, og opret derefter hver som et publiceret dokument via Profound MCP, parallelt.

Åbn airport → Variants for at bekræfte ~50 publicerede lufthavne. Appen læser med API-nøglen; MCP'en skriver med sin egen WorkOS-session.

Omkring 50 lufthavne seedet som publicerede varianter.

6. Tilføj et designsystem

Scaffoldet leveres uden styling. Placér en DESIGN.md (en Tailwind v4-@theme-blok plus tokens) i projektroden — din egen, eller download én fra refero.design. Prompt derefter Claude:

Læs DESIGN.md. Opsæt Tailwind v4 og tilslut temaet og skrifterne. Brug next/font til skrifter, ikke et runtime-import fra Google. Kun styling — ingen sider eller komponenter endnu.

Bekræft, at src/app/globals.css indeholder @import "tailwindcss"; plus @theme-blokken, og at localhost:3000 viser tokensene.

Del 2 — Byg

Byg rendringslaget: UI-elementerne, React-komponenterne, ruten, CEL-bindingerne og oversættelsen.

1. Definér de fire UI-elementkomponenter

I admin: Create new component fire gange (ingen Route Slug). Tilføj felterne som Text, medmindre andet er angivet, sæt status til Active, og tilføj UI Element-tagget under Settings → Tags:

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

body.latitude og body.longitude skal være Number for at matche airport-komponenten.

Hvert UI-element er sin egen komponent — her body, sat til Active med UI Element-tagget.

Alle fire UI-elementer ved siden af airport-komponenten.

2. Regenerér typer

bun run generate-schemas

3. Generér React-komponenterne og registrér dem

Prompt Claude:

Byg fire React-komponenter — nav, headline, body, footer — i components/. Hver tager en enkelt content-prop typet som BlockComponentProps<T> fra cms-renderer/lib/types, hvor T er elementets genererede type, og læser felterne fra content. Registrér alle fire i den catch-all-rutes registry efter komponentnavn. Style dem med vores designsystem, men som vores egne komponenter — kopier ikke kildewebsitets layout. Nav: brand til venstre. Headline: lufthavnens navn med en code · city, country-undertekst. Body: detaljepanel med kode, by, land og koordinater. Footer: én statisk linje. Kun layout og styling.

Claude opretter de fire komponenter og udfylder registry i src/app/[...slug]/page.tsx:

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

To regler: hver komponent læser sine felter fra content (ikke som separate props), og registry-nøgler skal matche CMS-komponentnavnene præcist — uoverensstemmelser gengiver intet.

4. Opret den parametriske rute

I admin: gå til Pages → Create page og angiv mønsteret /{airport_code}. Under Dynamic Segment Mappings, map airport_code → airport-komponenten, slug-felt code. Gem — du lander i Page Builder. Verificér, at /JFK virker.

5. Tilføj UI-elementer, forbind CEL og publicér

Tilføjelse af et UI-element til siden fra fanen Custom.

De fire UI-elementer tilføjet til JFK-bindingen i Page Builder.

1. Vælg JFK-bindingen → Add UI Element → fanen Custom → tilføj nav, headline, body, footer i nævnte rækkefølge. Profound udbreder sættet til hver lufthavnsbinding.

2. Udfyld hvert felt. Statisk indhold (nav-brand, footer-tekst): skriv dem direkte. Dynamiske værdier: skift til dynamisk og skriv CEL. Den fælles opslagning er documents.get("airport", meta.params.airport_code).

   Felt	CEL-værdi
   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 (og .longitude)
   nav.brand, footer.text	statiske strenge

3. Publicér siden (øverst til højre).

6. Verificér på engelsk

Åbn localhost:3000/JFK, derefter /SFO, /LAX — samme skabelon, forskellige lufthavne.

Den færdige side gengiver JFK's data på engelsk.

7. Internationalisér

1. Oversæt komponenterne først. I admin: åbn hver komponent (enhver komponent — det behøver ikke være et UI-element) og klik Translate → Submit. Profound oversætter indholdet til alle 35 sprog på én gang, inklusive statiske feltværdier. Gør dette før du redigerer ruten eller rører ved CEL.

   

   Translate → Submit sender en komponent til alle 35 sprog på én gang.

2. Tilføj sprogdimensionen. Under Pages ændres mønsteret til /{language}/{airport_code}. Tilføj en Dynamic Segment Mapping for language → den indbyggede language-systemkomponent, slug-felt code. Gem og verificér, at /en/JFK virker.

   

   Tilføjelse af {language}-segmentet til ruten.

3. Peg hvert oversættelige felt mod den oversatte fetch. Internationalisering betyder, at alle sprogspecifikke felter — ikke kun overskriften — skifter fra documents.get(...) til documents.translated("airport", meta.params.airport_code, meta.params.language):

   Felt	Oversat 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 (og .country)

   Lad IATA-code og koordinaterne blive på documents.get — de er identiske på alle sprog. nav.brand og footer.text er allerede dækket af komponentoversættelsen i trin 1.

Når alle tre trin er færdige, fungerer /fr/SFO, /de/SFO osv. fuldt oversat.

Del 3 — Produktion

1. Udrul: GitHub og derefter Vercel

Push til GitHub:

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

Importér til Vercel: Add New → Project → importér airports-repoet. Tilføj miljøvariablerne — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL og valgfrit NEXT_PUBLIC_BUNNY_CDN_URL — og Deploy. Besøg /en/JFK og /fr/SFO. Hver fremtidig git push udruller på ny.

2. Live-preview og inline-redigering

Begge følger med scaffoldet.

• Live-preview: <Refresher> i layout.tsx opdaterer siden, du previewer, når du redigerer og gemmer i admin — ingen ny deploy nødvendig.
• Inline-redigering: tilføj ?edit_mode=true til enhver URL (fx …/en/JFK?edit_mode=true) for redigeringsoverlays. Offentlige besøgende ser fortsat den rene side.

?edit_mode=true lægger editoren oven på den live side.

Sådan er byggeriet

Halvtreds lufthavne, 35 sprog, live — beskrevet én gang og fyldt ud af data: én rute, fire React-komponenter og en håndfuld CEL-bindinger. CMS'et holder indholdet, din kode gengiver det, og CEL forbinder dem.