Flughafenverzeichnis

Erstellen Sie ein echtes, internationalisiertes Flughafenverzeichnis in Profound CMS: ein URL-Muster, das für jeden Flughafen in 35 Sprachen eine Seite rendert. Sie schreiben den Next.js-Code und bauen die CMS-Struktur von Hand; Claude Code (über den Profound MCP) übernimmt drei Aufgaben — die Flughafendaten zu generieren, ein Designsystem anzubinden und die vier React-Komponenten zu erzeugen. Drei Abschnitte: Setup, Build, Production.

Sehen Sie sich die komplette Video-Anleitung an.

Was Sie bauen

• ~50 Flughafen-Datensätze, jeweils unter einer eigenen URL.
• Eine parametrische Route /{language}/{airport_code}.
• Vier UI-Elemente — Navigation, Überschrift, Textkörper, Footer — gerendert von cms-renderer.
• Live-CMS-Daten über CEL-Bindings.
• Alle 35 Sprachen, mit einem Klick übersetzt.
• Deployment auf Vercel mit Live-Vorschau und In-Place-Bearbeitung.

Voraussetzungen

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code mit verbundenem Profound MCP (Teil 1).
• Ein Profound CMS-Konto.
• Für Teil 3: GitHub CLI (gh) angemeldet und ein Vercel-Konto, das mit GitHub verknüpft ist.

So greift alles ineinander

• Components definieren die Inhaltsstruktur. Ein Route Slug-Feld macht eine Komponente routbar; ein UI Element-Tag macht sie auf einer Seite platzierbar; System-Komponenten (wie language) sind eingebaut.
• Variants sind die Inhalte (JFK, SFO, LAX …).
• UI elements sind Seitenabschnitte, gefüllt mit CEL — Profounds In-Template-Scripting, das beim Rendern ausgewertet wird.
• Eine parametric route ordnet eine URL einer Variante plus einer Reihe von UI-Elementen zu.
• Ihre Next.js-App rendert alles über das cms-renderer-SDK mit einem Read-Tier-API-Schlüssel.

Teil 1 — Setup

Endzustand: ~50 Flughäfen im CMS, die App ist zum Lesen angebunden und das Designsystem ist eingerichtet.

1. Website erstellen

Registrieren Sie sich bei Profound (WorkOS-Authentifizierung) und erstellen Sie eine Website mit dem Namen airports. Kopieren Sie zwei Dinge: die Website-ID (die UUID in der Admin-URL) und einen Read-Tier-API-Schlüssel aus Deployments → Create API key. Die App liest nur, daher reicht ein Read-Key.

2. App scaffolden und verbinden

bunx create-profound-next airports
cd airports

Fügen Sie Ihre Zugangsdaten in .env.local ein:

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

Führen Sie bun dev aus und öffnen Sie localhost:3000, um zu bestätigen, dass die Verbindung steht.

3. Die airport-Komponente erstellen

Gehen Sie im Admin-Bereich zu Components → Create new component und nennen Sie sie airport. Fügen Sie sechs Felder hinzu: code, name, city, country (Text) sowie latitude, longitude (Number). Markieren Sie code als Route Slug-Feld und setzen Sie den Status auf Active. Lassen Sie alle Felder optional; fügen Sie kein UI-Element-Tag hinzu.

Die airport-Komponente — sechs Felder, mit code als Route Slug.

4. Komponente in Typen übernehmen

bun run generate-schemas

Damit werden airportSchema (Zod) und Airport (Typ) in generated/cms-schemas.ts geschrieben und Ihre Zugangsdaten bestätigt.

5. Daten über den MCP einspielen

Verbinden Sie den MCP und authentifizieren Sie sich:

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

Der Server authentifiziert über OAuth (WorkOS). Führen Sie in Claude Code /mcp aus, wählen Sie Profound und schließen Sie die Anmeldung in Ihrem Browser ab – Claude Code fragt Sie automatisch beim ersten Aufruf eines Profound-Tools. Sobald /mcp Profound als connected anzeigt, fordern Sie Claude auf:

Generiere fünfzig reale Flughäfen — korrekte IATA-Codes, Namen, Städte, Länder und Koordinaten. Speichere sie als JSON in einem data-Ordner, validiere sie gegen unsere airport-Komponente und erstelle anschließend jedes Dokument parallel als veröffentlichte Variante über den Profound MCP.

Öffnen Sie airport → Variants, um ~50 veröffentlichte Flughäfen zu bestätigen. Die App liest mit dem API-Schlüssel; der MCP schreibt mit seiner eigenen WorkOS-Session.

Rund 50 Flughäfen, als veröffentlichte Varianten eingespielt.

6. Designsystem hinzufügen

Das Gerüst ist ungestylt. Legen Sie eine DESIGN.md (ein Tailwind-v4-@theme-Block plus Tokens) im Projekt-Root an – entweder Ihre eigene oder laden Sie eine von refero.design herunter. Dann fordern Sie Claude auf:

Lies DESIGN.md. Richte Tailwind v4 ein und binde das Theme sowie die Fonts ein. Verwende next/font für Fonts, nicht einen Google-Import zur Laufzeit. Nur Styling — noch keine Seiten oder Komponenten.

Stellen Sie sicher, dass src/app/globals.css @import "tailwindcss"; sowie den @theme-Block enthält und dass localhost:3000 die Tokens anzeigt.

Teil 2 — Build

Bauen Sie die Rendering-Schicht: die UI-Elemente, die React-Komponenten, die Route, die CEL-Bindings und die Übersetzung.

1. Die vier UI-Element-Komponenten definieren

Erstellen Sie im Admin viermal eine neue Komponente (kein Route Slug). Fügen Sie für jede die Felder als Text hinzu, sofern nicht anders angegeben, setzen Sie den Status auf Active und fügen Sie unter Settings → Tags den Tag UI Element hinzu:

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

body.latitude und body.longitude müssen Number sein, damit sie zur airport-Komponente passen.

Jedes UI-Element ist eine eigene Komponente — hier body, auf Active gesetzt und mit dem Tag UI Element.

Alle vier UI-Elemente neben der airport-Komponente.

2. Typen neu generieren

bun run generate-schemas

3. React-Komponenten erzeugen und registrieren

Fordern Sie Claude auf:

Erstelle vier React-Komponenten — nav, headline, body, footer — in components/. Jede nimmt ein einziges content-Prop vom Typ BlockComponentProps<T> aus cms-renderer/lib/types, wobei T der generierte Typ des Elements ist, und liest seine Felder aus content aus. Registriere alle vier im Registry der Catch-all-Route unter dem Komponentennamen. Style sie mit unserem Designsystem, aber als unsere eigenen Komponenten — kopiere nicht das Layout der Quellseite. Nav: Brand links. Headline: Flughafenname mit einem Untertitel code · city, country. Body: Detailpanel mit Code, Stadt, Land und Koordinaten. Footer: eine statische Zeile. Nur Layout und Styling.

Claude erstellt die vier Komponenten und ergänzt das Registry in src/app/[...slug]/page.tsx:

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

Zwei Regeln: Jede Komponente liest ihre Felder aus content (nicht als separate Props), und die Registry-Schlüssel müssen exakt mit den Komponentennamen im CMS übereinstimmen — bei Abweichungen bleibt die Ausgabe leer.

4. Parametrische Route erstellen

Gehen Sie im Admin zu Pages → Create page und setzen Sie das Muster auf /{airport_code}. Unter Dynamic Segment Mappings ordnen Sie airport_code der airport-Komponente mit dem Slug-Feld code zu. Speichern — Sie landen im Page Builder. Prüfen Sie, dass /JFK aufgelöst wird.

5. UI-Elemente hinzufügen, CEL verdrahten und veröffentlichen

Ein UI-Element aus dem Reiter Custom zur Seite hinzufügen.

Die vier UI-Elemente im JFK-Binding des Page Builders hinzugefügt.

1. Wählen Sie das JFK-Binding → Add UI Element → Tab Custom → fügen Sie nav, headline, body, footer in dieser Reihenfolge hinzu. Profound überträgt das Set auf jedes Flughafen-Binding.

2. Füllen Sie jedes Feld aus. Statische Werte (Nav-Brand, Footer-Text): direkt eingeben. Dynamische Werte: auf dynamic umschalten und CEL schreiben. Der gemeinsame Lookup lautet documents.get("airport", meta.params.airport_code).

   Feld	CEL-Wert
   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 (und .longitude)
   nav.brand, footer.text	statische Strings

3. Veröffentlichen Sie die Seite (oben rechts).

6. In Englisch prüfen

Öffnen Sie localhost:3000/JFK, anschließend /SFO, /LAX — dasselbe Template, unterschiedliche Flughäfen.

Die fertige Seite mit den Daten von JFK, auf Englisch gerendert.

7. Internationalisieren

1. Übersetzen Sie zuerst die Komponenten. Öffnen Sie im Admin jede Komponente (beliebig — muss kein UI-Element sein) und klicken Sie auf Translate → Submit. Profound übersetzt den Inhalt auf einmal in alle 35 Sprachen, inklusive statischer Feldwerte. Tun Sie das, bevor Sie die Route bearbeiten oder CEL anfassen.

   

   Translate → Submit sendet eine Komponente auf einmal in alle 35 Sprachen.

2. Fügen Sie die Sprachdimension hinzu. Gehen Sie in Pages und ändern Sie das Muster auf /{language}/{airport_code}. Fügen Sie ein Dynamic Segment Mapping für language → die eingebaute Systemkomponente language, Slug-Feld code, hinzu. Speichern und prüfen Sie, dass /en/JFK aufgelöst wird.

   

   Das Hinzufügen des Segments {language} zur Route.

3. Richten Sie jedes übersetzbare Feld auf den übersetzten Abruf aus. Die Internationalisierung der Seite bedeutet, jedes sprachabhängige Feld — nicht nur die Überschrift — von documents.get(...) auf documents.translated("airport", meta.params.airport_code, meta.params.language) umzustellen:

   Feld	Übersetztes 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 (und .country)

   Belassen Sie den IATA-code und die Koordinaten bei documents.get — sie sind in jeder Sprache identisch. nav.brand und footer.text sind dank der Übersetzung der Komponente in Schritt 1 bereits abgedeckt.

Wenn alle drei Schritte erledigt sind, funktionieren /fr/SFO, /de/SFO usw. vollständig übersetzt.

Teil 3 — Production

1. Deployment: zuerst GitHub, dann Vercel

Push zu GitHub:

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

Importieren Sie das Projekt in Vercel: Add New → Project → importieren Sie das Repository airports. Fügen Sie die Umgebungsvariablen hinzu — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL und optional NEXT_PUBLIC_BUNNY_CDN_URL — und klicken Sie dann auf Deploy. Besuchen Sie /en/JFK und /fr/SFO. Jeder zukünftige git push löst ein neues Deployment aus.

2. Live-Vorschau und Inline-Bearbeitung

Beides wird mit dem Gerüst ausgeliefert.

• Live preview: Der <Refresher> in layout.tsx aktualisiert die Seite, die Sie gerade in der Vorschau ansehen, sobald Sie im Admin bearbeiten und speichern – ganz ohne Redeploy.
• In-place editing: Hängen Sie ?edit_mode=true an jede URL an (z. B. …/en/JFK?edit_mode=true) für Editier-Overlays. Öffentliche Besucher sehen weiterhin die bereinigte Seite.

?edit_mode=true blendet den Editor über die Live-Seite ein.

Das war der Build

Fünfzig Flughäfen, 35 Sprachen, live — einmal beschrieben und durch Daten gefüllt: eine Route, vier React-Komponenten und ein paar CEL-Bindings. Das CMS hält den Inhalt, Ihr Code rendert ihn, und CEL verbindet beide.