Flughafenverzeichnis

Erstellen Sie ein echtes, internationalisiertes Flughafenverzeichnis auf Profound CMS: ein URL-Muster, das für jeden Flughafen eine Seite in 35 Sprachen rendert. Sie schreiben den Next.js-Code und bauen die CMS-Struktur von Hand; Claude Code (über den Profound MCP) übernimmt drei Aufgaben — die Generierung der Flughafendaten, das Verdrahten eines Designsystems und das Erzeugen der vier React-Komponenten. Drei Teile: Setup, Build, Production.

Sehen Sie sich die vollständige Videoanleitung an.

Was Sie bauen werden

• ~50 Flughafen-Datensätze, jeder unter seiner eigenen URL.
• Eine parametrische Route /{language}/{airport_code}.
• Vier UI-Elemente — nav, headline, body, footer — gerendert von cms-renderer.
• Live-CMS-Daten über CEL-Bindings.
• Alle 35 Sprachen, mit einem Klick übersetzt.
• Bereitstellung auf Vercel mit Live-Vorschau und Inline-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: angemeldete GitHub CLI (gh) und ein mit GitHub verknüpftes Vercel-Konto.

So greift alles ineinander

• Komponenten definieren die Inhaltsstruktur. Ein Feld Route Slug macht eine Komponente routbar; ein UI Element-Tag macht sie auf einer Seite platzierbar; System-Komponenten (wie language) sind eingebaut.
• Dokumente sind der Inhalt (JFK, SFO, LAX…).
• UI-Elemente sind Seitenabschnitte, gefüllt mit CEL — Profounds In-Template-Skripting, das zur Renderzeit ausgewertet wird.
• Eine parametrische Route ordnet eine URL einem Dokument plus einem Satz UI-Elemente zu.
• Ihre Next.js-App rendert alles über das cms-renderer-SDK mit einem API-Schlüssel der Lesestufe.

Teil 1 — Setup

Endzustand: ~50 Flughäfen im CMS, die App ist zum Lesen verdrahtet und das Designsystem steht bereit.

1. Website erstellen

Registrieren Sie sich bei Profound (WorkOS-Auth) und erstellen Sie eine Website mit dem Namen airports. Kopieren Sie zwei Dinge: die Website-ID (die UUID in der Admin-URL) und einen API-Schlüssel der Lesestufe unter Deployments → Create API key. Die App liest nur, daher genügt ein Leseschlüssel.

2. App erstellen und verbinden

bunx create-profound-next airports
cd airports

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

PROFOUND_API_KEY=<Ihr Leseschlüssel>
NEXT_PUBLIC_PROFOUND_WEBSITE_ID=<Ihre 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 die Verbindung zu bestätigen.

3. Erstellen Sie die Komponente airport

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

Die Komponente airport — sechs Felder, wobei code als Route Slug festgelegt ist.

4. Komponente in Typen übernehmen

bun run generate-schemas

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

5. Daten über den MCP befüllen

Verbinden Sie den MCP und authentifizieren Sie sich:

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

Führen Sie mcp__Profound__authenticate aus und schließen Sie den WorkOS-Flow ab, dann 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 Ordner data, validiere sie gegen unsere Flughafenkomponente und erstelle dann jeden als veröffentlichtes Dokument über den Profound MCP parallel.

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

Rund 50 Flughäfen, als veröffentlichte Dokumente befüllt.

6. Designsystem hinzufügen

Das Gerüst wird ohne Stil ausgeliefert. Legen Sie ein DESIGN.md (ein Tailwind-v4-@theme-Block plus Tokens) im Projektstamm ab — Ihr eigenes oder laden Sie eines von refero.design herunter. Fordern Sie dann Claude auf:

Lies DESIGN.md. Richte Tailwind v4 ein und verdrahte das Theme und die Schriften. Verwende next/font für Schriften, keinen Laufzeit-Import von Google. Nur Styling — keine Seiten oder Komponenten.

Bestätigen Sie, dass src/app/globals.css @import "tailwindcss"; plus den @theme-Block enthält und 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. Definieren Sie die vier UI-Element-Komponenten

Erstellen Sie im Admin viermal Create new component (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 das Tag UI Element unter Settings → Tags 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, um zur Flughafenkomponente zu passen.

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

Alle vier UI-Elemente neben der Komponente airport.

2. Typen erneut generieren

bun run generate-schemas

3. React-Komponenten generieren und registrieren

Fordern Sie Claude auf:

Erstelle vier React-Komponenten — nav, headline, body, footer — im Ordner components/. Jede erhält ein einzelnes Prop content, typisiert als BlockComponentProps<T> aus cms-renderer/lib/types, wobei T der generierte Typ des Elements ist, und liest ihre Felder aus content. Registriere alle vier im Catch-all-Route-Registry nach Komponentenname. Style sie mit unserem Designsystem, aber als unsere eigenen Komponenten — kopiere nicht das Layout der Quellseite. Nav: Marke links. Headline: Flughafenname mit einem Untertitel code · city, country. Body: Detailbereich mit Code, Stadt, Land und Koordinaten. Footer: eine statische Zeile. Nur Layout und Styling.

Claude erstellt die vier Komponenten und füllt 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 Registry-Schlüssel müssen exakt den CMS-Komponentennamen entsprechen — eine Abweichung rendert leer.

4. Parametrische Route erstellen

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

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

Hinzufügen eines UI-Elements zur Seite über den Tab Custom.

Die vier UI-Elemente, hinzugefügt zum Binding für JFK im Page Builder.

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

2. Füllen Sie jedes Feld aus. Statische Werte (nav brand, footer text): direkt eintippen. Dynamische Werte: auf dynamisch umschalten und CEL formulieren. 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 (bzw. .longitude)
   nav.brand, footer.text	statische Zeichenketten

3. Publish (oben rechts).

6. In Englisch überprüfen

Öffnen Sie localhost:3000/JFK, dann /SFO, /LAX — gleiche Vorlage, anderer Flughafen.

Die fertige Seite, die die Daten von JFK rendert, auf Englisch.

7. Internationalisieren

1. Übersetzen Sie zuerst die Komponenten. Öffnen Sie im Admin jede Komponente (beliebig — muss kein UI-Element sein) und klicken Sie Translate → Submit. Profound übersetzt den Inhalt auf einmal in alle 35 Sprachen, statische Feldwerte eingeschlossen. 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. Ändern Sie unter Pages das Muster in /{language}/{airport_code}. Fügen Sie ein Dynamic Segment Mapping für language → die eingebaute Systemkomponente language, Feld slug code, hinzu. Speichern und überprüfen Sie, dass /en/JFK aufgelöst wird.

   

   Das Segment {language} zur Route hinzufügen.

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

   Feld	Übersetzter 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 (bzw. .country)

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

Wenn alle drei Schritte abgeschlossen sind, lösen /fr/SFO, /de/SFO usw. vollständig übersetzt auf.

Teil 3 — Produktion

1. Bereitstellen: GitHub, dann Vercel

Pushen Sie nach GitHub:

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

Importieren Sie in Vercel: Add New → Project → importieren Sie das Repo 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 auf Deploy. Besuchen Sie /en/JFK und /fr/SFO. Jeder zukünftige git push löst eine erneute Bereitstellung aus.

2. Live-Vorschau und Inline-Bearbeitung

Beides wird mit dem Gerüst ausgeliefert.

• Live-Vorschau: Die <Refresher> in layout.tsx aktualisiert die Seite, die Sie in der Admin-Oberfläche bearbeiten und speichern — ganz ohne erneute Bereitstellung.
• Inline-Bearbeitung: Hängen Sie ?edit_mode=true an jede URL (z. B. …/en/JFK?edit_mode=true) für Bearbeitungs-Overlays an. Besucher:innen sehen weiterhin die unveränderte Seite.

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

Das ist der Build

Fünfzig Flughäfen, 35 Sprachen, live — einmal beschrieben und datenbasiert befüllt: eine Route, vier React-Komponenten und ein paar CEL-Bindings. Das CMS verwaltet den Inhalt, Ihr Code rendert ihn, und CEL verbindet beides.