Build & Ship an Airport Directory

Ehita Profound CMS-is tõeline, rahvusvahelistatud lennujaamade kataloog: üks URL-i muster, mis renderdab iga lennujaama jaoks lehe 35 keeles. Sina kirjutad Next.js koodi ja ehitad CMS-i struktuuri käsitsi; Claude Code (läbi Profound MCP) teeb kolm tööd — loob lennujaama andmed, ühendab disainisüsteemi ja genereerib neli Reacti komponenti. Kolm osa: Seadistus, Ehitus, Tootmine.

Vaata täispikka videoülevaadet.

Mida sa ehitad

• ~50 lennujaama kirjet, igaüks oma URL-il.
• Üks parametriline marsruut /{language}/{airport_code}.
• Neli kasutajaliidese elementi — nav, headline, body, footer — renderdatud cms-rendereri poolt.
• Reaalajas CMS-i andmed CEL-i sidumiste kaudu.
• Kõik 35 keelt, tõlgitud ühe klikiga.
• Paigaldatud Vercelisse koos reaalajas eelvaate ja kohapealse muutmisega.

Eeldused

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code, mis on ühendatud Profound MCP-ga (osa 1).
• Profound CMS-i konto.
• Osa 3 jaoks: sisselogitud GitHub CLI (gh) ja GitHubiga ühendatud Verceli konto.

Kuidas see kokku sobitub

• Komponendid määravad sisu kuju. Route Slug väli muudab komponendi marsruuditavaks; UI Element silt teeb selle lehel paigutatavaks; Süsteemi komponendid (näiteks language) on sisseehitatud.
• Variandid on sisu (JFK, SFO, LAX…).
• Kasutajaliidese elemendid on lehe jaotised, mis täidetakse CEL-iga — Profoundi mallipõhine skriptimine, mida hinnatakse renderdamisel.
• Parametriline marsruut seob URL-i variandi ja valiku UI elementidega.
• Sinu Next.js rakendus renderdab kõik cms-renderer SDK kaudu, kasutades lugemistaseme API võtit.

Osa 1 — Seadistus

Lõppseis: ~50 lennujaama CMS-is, rakendus on ühendatud nende lugemiseks ja disainisüsteem on paigas.

1. Loo veebisait

Registreeru Profoundis (WorkOS autentimine) ja loo veebisait nimega airports. Kopeeri kaks asja: veebisaidi ID (administraatori URL-is olev UUID) ja lugemistaseme API võti menüüst Deployments → Create API key. Rakendus ainult loeb, seega piisab lugemisvõtmest.

2. Skafoldeeri ja ühenda rakendus

bunx create-profound-next airports
cd airports

Lisa oma mandaadid faili .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äivita bun dev ja ava localhost:3000, et kinnitada ühendust.

3. Loo komponent airport

Administraatoris mine Components → Create new component ja nimeta see airport. Lisa kuus välja: code, name, city, country (Text) ja latitude, longitude (Number). Määra code Route Slug väljaks ja sea staatus Active. Jäta kõik väljad valikuliseks; ära lisa UI Element silti.

Komponent airport — kuus välja, code määratud Route Slug’iks.

4. Tõmba komponent tüüpidesse

bun run generate-schemas

See kirjutab airportSchema (Zod) ja Airport (tüüp) faili generated/cms-schemas.ts ning kinnitab, et sinu mandaadid töötavad.

5. Külva andmed MCP kaudu

Ühenda MCP ja autentige:

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

Server autentib OAuthi (WorkOS) kaudu. Käivita Claude Code’is käsk /mcp, vali Profound ja lõpeta sisselogimine brauseris — Claude Code soovitab seda automaatselt ka esimesel Profoundi tööriista kutsel. Kui /mcp näitab Profoundi staatust connected, küsi Claude’ilt:

Genereeri viiskümmend päris lennujaama — õiged IATA koodid, nimed, linnad, riigid ja koordinaadid. Salvesta need JSON-ina kausta data, valideeri meie lennujaama komponendi vastu ning loo seejärel igaüks avaldatud dokumendina Profound MCP kaudu, paralleelselt.

Ava airport → Variants, et kinnitada ~50 avaldatud lennujaama. Rakendus loeb API võtmega; MCP kirjutab oma WorkOS seansi abil.

Umbes 50 lennujaama, külvatud avaldatud variantidena.

6. Lisa disainisüsteem

Skafold on vaikimisi stiilita. Aseta projekti juurkausta fail DESIGN.md (Tailwind v4 @theme plokk koos tokenitega) — sinu enda või laadi alla refero.design lehelt. Seejärel küsi Claude’ilt:

Loe faili DESIGN.md. Sea üles Tailwind v4 ja ühenda teema ning fondid. Kasuta fontide jaoks next/fonti, mitte käitusajal toimuvat Google’i importi. Ainult stiilid — ei mingeid lehti ega komponente.

Veendu, et failis src/app/globals.css oleks @import "tailwindcss"; ja @theme plokk ning et localhost:3000 kuvaks tokeneid.

Osa 2 — Ehitus

Ehita renderduskiht: UI elemendid, Reacti komponendid, marsruut, CEL sidumised ja tõlkimine.

1. Määra neli kasutajaliidese komponenti

Administraatoris loo uus komponent neli korda (ilma Route Slug’ita). Igaühel lisa väljad Text-tüübina, kui pole teisiti märgitud, sea staatus Active ja lisa UI Element silt menüüs Settings → Tags:

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

body.latitude ja body.longitude peavad olema Number, et need ühtiksid lennujaama komponendiga.

Iga UI element on oma komponent — siin body, seatud staatusega Active ja sildiga UI Element.

Kõik neli UI elementi koos komponendiga airport.

2. Regenereri tüübid

bun run generate-schemas

3. Genereeri Reacti komponendid ja registreeri need

Küsi Claude’ilt:

Ehita neli Reacti komponenti — nav, headline, body, footer — kausta components/. Igaüks võtab ühe prop’i content, mille tüüp on BlockComponentProps<T> pärit cms-renderer/lib/types-ist, kus T on elemendi genereeritud tüüp, ja loeb väljad content-ist. Registreeri kõik neli kõiki hõlmavas marsruudis registrisse komponendi nime järgi. Stiliseeri need meie disainisüsteemi alusel, aga oma komponentidena — ära kopeeri lähtelehe paigutust. Nav: bränd vasakul. Headline: lennujaama nimi, mille all on alapealkiri code · city, country. Body: detailide paneel koodi, linna, riigi ja koordinaatidega. Footer: üks staatiline rida. Ainult paigutus ja stiil.

Claude loob neli komponenti ja täidab registri failis src/app/[...slug]/page.tsx:

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

Kaks reeglit: iga komponent loeb oma väljad content-ist (mitte eraldi proppidena) ja registri võtmed peavad täpselt ühtima CMS-i komponentide nimedega — mittevastavus jätab renderduse tühjaks.

4. Loo parametriline marsruut

Administraatoris mine Pages → Create page ja määra mustriks /{airport_code}. Jaotises Dynamic Segment Mappings seo airport_code → komponent airport, slug-väli code. Salvesta — jõuad Page Builderisse. Kontrolli, et /JFK avaneks.

5. Lisa UI elemendid, seo CEL ja avalda

UI elemendi lisamine lehele, valides selle vahekaardilt Custom.

Neli UI elementi lisatud Page Builderis JFK sidumisele.

1. Vali JFK sidumine → Add UI Element → vahekaart Custom → lisa nav, headline, body, footer selles järjekorras. Profound kopeerib sama komplekti iga lennujaama sidumisele.

2. Täida iga väli. Statiilised väärtused (navigatsiooni bränd, jaluse tekst): kirjuta need otse. Dünaamiliste väärtuste puhul lülitu dünaamilisele režiimile ja kirjuta CEL. Jagatud päring on documents.get("airport", meta.params.airport_code).

   Väli	CEL väärtus
   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 (ja .longitude)
   nav.brand, footer.text	staatilised stringid

3. Avalda leht (üleval paremal).

6. Kontrolli inglise keeles

Ava localhost:3000/JFK, seejärel /SFO, /LAX — sama mall, erinev lennujaam.

Lõplik leht, mis renderdab JFK andmeid inglise keeles.

7. Rahvusvaheliseks muutmine

1. Tõlgi kõigepealt komponendid. Administraatoris ava iga komponent (ükskõik milline — see ei pea olema UI element) ja klõpsa Translate → Submit. Profound tõlgib sisu korraga kõigisse 35 keelde, kaasa arvatud statiilised väljatekstid. Tee seda enne, kui muudad marsruuti või puudutad CEL-i.

   

   Translate → Submit saadab komponendi korraga kõigisse 35 keelde.

2. Lisa keelemõõde. Menüü Pages all muuda mustriks /{language}/{airport_code}. Lisa Dynamic Segment Mapping väärtusele language → sisseehitatud süsteemikomponent language, slug-väli code. Salvesta ja veendu, et /en/JFK avaneb.

   

   {language} segmendi lisamine marsruudile.

3. Suuna iga tõlgitav väli tõlgitud päringule. Lehe rahvusvaheliseks muutmine tähendab, et kõik keelepõhised väljad — mitte ainult pealkiri — tuleb viia päringule documents.translated("airport", meta.params.airport_code, meta.params.language):

   Väli	Tõlgitud 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 (ja .country)

   Jäta IATA code ja koordinaadid päringule documents.get — need on igas keeles samad. nav.brand ja footer.text on juba kaetud komponendi tõlkimisega 1. sammus.

Kui kõik kolm sammu on tehtud, avanevad /fr/SFO, /de/SFO jne täielikult tõlgituna.

Osa 3 — Tootmine

1. Paigaldamine: GitHub, seejärel Vercel

Lükka GitHubi:

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

Impordi Vercelisse: Add New → Project → impordi repo airports. Lisa keskkonnamuutujad — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL ja soovi korral NEXT_PUBLIC_BUNNY_CDN_URL — ning klõpsa Deploy. Külasta /en/JFK ja /fr/SFO. Iga järgmine git push käivitab uue deploy.

2. Reaalajas eelvaade ja kohapealne muutmine

Mõlemad tulevad skafoldiga kaasa.

• Reaalajas eelvaade: layout.tsx failis olev <Refresher> värskendab vaadeldavat lehte kohe, kui adminis midagi muutad ja salvestad — redeploy’t pole vaja.
• Kohapealne muutmine: lisa ükskõik millisele URL-ile ?edit_mode=true (nt …/en/JFK?edit_mode=true), et kuvada redigeerimise ülekatteid. Avalikud külastajad näevad endiselt puhast lehte.

?edit_mode=true kuvab redaktori reaalajas lehel.

See ongi ehitus

Viiskümmend lennujaama, 35 keelt, reaalajas — kirjeldatud korra ja täidetud andmetega: üks marsruut, neli Reacti komponenti ja peotäis CEL sidumisi. CMS hoiab sisu, sinu kood renderdab selle ja CEL ühendab need.