Build & Ship an Airport Directory

Izveidojiet īstu, internacionālu lidostu direktoriju Profound CMS: viens URL paraugs, kas atveido lapu katrai lidostai 35 valodās. Jūs rakstāt Next.js kodu un manuāli veidojat CMS struktūru; Claude Code (caur Profound MCP) paveic trīs darbus — ģenerē lidostu datus, pieslēdz dizaina sistēmu un izveido četrus React komponentus. Trīs daļas: Iestatīšana, Izveide, Produkcija.

Noskatieties pilnu video pamācību.

Ko jūs izveidosit

• ~50 lidostu ierakstu, katrs savā URL.
• Viens parametrisks maršruts /{language}/{airport_code}.
• Četri lietotāja saskarnes elementi — navigācija, virsraksts, pamatteksts, kājene — ko atveido cms-renderer.
• Tiešraides CMS dati ar CEL sasaistēm.
• Visas 35 valodas, iztulkotas ar vienu klikšķi.
• Izvietots Vercel ar tiešsaistes priekšskatījumu un rediģēšanu uz vietas.

Priekšnoteikumi

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code ar pieslēgtu Profound MCP (1. daļa).
• Profound CMS konts.
• 3. daļai: pieslēgts GitHub CLI (gh) un Vercel konts, kas savienots ar GitHub.

Kā tas viss darbojas kopā

• Komponenti nosaka satura struktūru. Route Slug lauks padara komponentu maršrējam, UI Element tags ļauj to novietot lapā; System komponenti (piemēram, language) ir iebūvēti.
• Variants ir saturs (JFK, SFO, LAX…).
• Lietotāja saskarnes elementi ir lapas sadaļas, kuras aizpilda CEL — Profound veidņu skriptēšana, kas tiek izpildīta atveidošanas brīdī.
• Paraparametrais maršruts sasaista URL ar variantu un UI elementu kopu.
• Jūsu Next.js lietotne visu atveido, izmantojot cms-renderer SDK ar lasīšanas līmeņa API atslēgu.

1. daļa — Iestatīšana

Gala rezultāts: ~50 lidostas CMS vidē, lietotne pieslēgta to nolasīšanai un vietā esoša dizaina sistēma.

1. Izveidojiet tīmekļa vietni

Reģistrējieties Profound (WorkOS autentifikācija) un izveidojiet vietni ar nosaukumu airports. Nokopējiet divas lietas: vietnes ID (UUID administrācijas URL) un lasīšanas līmeņa API atslēgu sadaļā Deployments → Create API key. Lietotne tikai lasa, tāpēc pietiek ar lasīšanas atslēgu.

2. Ģenerējiet karkasu un pieslēdziet lietotni

bunx create-profound-next airports
cd airports

Pievienojiet akreditācijas datus .env.local failā:

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

Palaidiet bun dev un atveriet localhost:3000, lai pārliecinātos, ka savienojums darbojas.

3. Izveidojiet komponentu airport

Administrācijā dodieties uz Components → Create new component un nosauciet to par airport. Pievienojiet sešus laukus: code, name, city, country (Text) un latitude, longitude (Number). Atzīmējiet code kā Route Slug lauku un iestatiet statusu uz Active. Atstājiet visus laukus neobligātus, UI Element tagu nepievienojiet.

Komponents airport — seši lauki, ar code, kas iestatīts kā Route Slug.

4. Ielasiet komponentu tipos

bun run generate-schemas

Tas saglabā airportSchema (Zod) un Airport (tipu) failā generated/cms-schemas.ts un apstiprina, ka jūsu akreditācijas dati darbojas.

5. Ievelciet datus, izmantojot MCP

Pieslēdziet MCP un autentificējieties:

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

Serveris autentificējas ar OAuth (WorkOS). Claude Code ievadiet /mcp, izvēlieties Profound un pabeidziet pierakstīšanos pārlūkā — Claude Code jūs arī automātiski aicina to darīt, kad pirmoreiz tiek izsaukts Profound rīks. Kad /mcp rāda, ka Profound ir connected, uzdodiet Claude pieprasījumu:

Ģenerē piecdesmit reālas lidostas — pareizi IATA kodi, nosaukumi, pilsētas, valstis un koordinātas. Saglabā tās kā JSON mapē data, validē pēc mūsu airport komponenta un pēc tam izveido katru kā publicētu dokumentu, izmantojot Profound MCP, paralēli.

Atveriet airport → Variants, lai pārliecinātos, ka ir ~50 publicētas lidostas. Lietotne lasa ar API atslēgu, MCP raksta ar savu WorkOS sesiju.

Apmēram 50 lidostas, ielādētas kā publicēti varianti.

6. Pievienojiet dizaina sistēmu

Karkass tiek piegādāts bez stiliem. Novietojiet DESIGN.md (Tailwind v4 @theme bloks ar tokeniem) projekta saknē — savu vai lejupielādētu no refero.design. Pēc tam dodiet Claude uzdevumu:

Izlasi DESIGN.md. Uzstādi Tailwind v4 un pieslēdz tēmu un fontus. Izmanto next/font, nevis Google fontu ielādi izpildlaikā. Tikai stili — ne lapas un ne komponenti.

Pārliecinieties, ka src/app/globals.css satur @import "tailwindcss"; un @theme bloku, kā arī ka localhost:3000 attēlo tokenus.

2. daļa — Izveide

Izveidojiet atveidošanas slāni: UI elementus, React komponentus, maršrutu, CEL sasaistes un tulkojumu.

1. Definējiet četrus UI elementu komponentus

Administrācijā četras reizes izvēlieties Create new component (bez Route Slug). Katram pievienojiet laukus kā Text, ja nav norādīts citādi, iestatiet statusu uz Active un pievienojiet tagu UI Element sadaļā Settings → Tags:

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

body.latitude un body.longitude jābūt Number, lai atbilstu airport komponentam.

Katrs UI elements ir atsevišķs komponents — šeit body, iestatīts Active ar tagu UI Element.

Visi četri UI elementi blakus komponentam airport.

2. Ģenerējiet tipus no jauna

bun run generate-schemas

3. Izveidojiet React komponentus un reģistrējiet tos

Dodiet Claude norādi:

Uztaisi četrus React komponentus — nav, headline, body, footer — mapē components/. Katrā ir viens content props ar tipu BlockComponentProps<T> no cms-renderer/lib/types, kur T ir elementa ģenerētais tips, un lauki tiek lasīti no content. Reģistrē visus četrus kopīgajā maršruta reģistrā pēc komponenta nosaukuma. Stilē tos ar mūsu dizaina sistēmu, bet kā mūsu pašu komponentus — nekopē avota vietnes izkārtojumu. Navigācija: zīmols pa kreisi. Virsraksts: lidostas nosaukums ar apakšvirsrakstu code · city, country. Body: detaļu panelis ar kodu, pilsētu, valsti un koordinātēm. Footer: viena statiska rindiņa. Tikai izkārtojums un stili.

Claude izveido četrus komponentus un aizpilda reģistru failā src/app/[...slug]/page.tsx:

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

Divi noteikumi: katrs komponents savus laukus lasa no content (nevis kā atsevišķus rekvizītus), un reģistra atslēgām precīzi jāsakrīt ar CMS komponenšu nosaukumiem — neatbilstības gadījumā nekas netiks atveidots.

4. Izveidojiet parametrisko maršrutu

Administrācijā dodieties uz Pages → Create page un iestatiet paraugu /{airport_code}. Sadaļā Dynamic Segment Mappings sasaistiet airport_code ar komponentu airport, slug lauku code. Saglabājiet — nonāksiet Page Builder. Pārbaudiet, ka /JFK strādā.

5. Pievienojiet UI elementus, pieslēdziet CEL un publicējiet

UI elementa pievienošana lapai no cilnes Custom.

Četri UI elementi, pievienoti JFK sasaistē Page Builder vidē.

1. Izvēlieties sasaisti JFK → Add UI Element → cilne Custom → pievienojiet nav, headline, body, footer šādā secībā. Profound piemēro šo komplektu katrai lidostas sasaistē.

2. Aizpildiet laukus. Statiskās vērtības (navigācijas zīmols, kājenes teksts): ierakstiet tās tieši. Dinamiskās vērtības: pārslēdziet uz dinamisko režīmu un rakstiet CEL. Koplietojamā meklēšana ir documents.get("airport", meta.params.airport_code).

   Lauks	CEL vērtība
   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 (un .longitude)
   nav.brand, footer.text	statiskas virknes

3. Publicējiet lapu (augšējā labajā stūrī).

6. Pārbaudiet angļu valodā

Atveriet localhost:3000/JFK, pēc tam /SFO, /LAX — viens un tas pats veidnes izkārtojums, bet cita lidosta.

Pabeigtā lapa ar JFK datiem angļu valodā.

7. Internacionālēšana

1. Vispirms iztulkojiet komponentus. Administrācijā atveriet katru komponentu (jebkuru — nav jābūt UI elementam) un noklikšķiniet Translate → Submit. Profound pārtulko saturu visās 35 valodās vienlaikus, ieskaitot statiskos laukus. Dariet to pirms maršruta rediģēšanas vai jebkādas CEL izmaiņas.

   

   Translate → Submit nosūta komponentu tulkošanai visās 35 valodās reizē.

2. Pievienojiet valodas dimensiju. Sadaļā Pages mainiet paraugu uz /{language}/{airport_code}. Pievienojiet Dynamic Segment Mapping vērtībai language → iebūvētajam language System komponentam, slug lauks code. Saglabājiet un pārbaudiet, ka /en/JFK darbojas.

   

   Maršrutam pievienots segments {language}.

3. Pāradresējiet katru tulkojamo lauku uz tulkoto izgūšanu. Lapai jābūt pilnībā internacionālai, tāpēc katru no valodas atkarīgo lauku — ne tikai virsrakstu — nomainiet no documents.get(...) uz documents.translated("airport", meta.params.airport_code, meta.params.language):

   Lauks	Tulkotā 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 (un .country)

   IATA code un koordinātes atstājiet ar documents.get — tās visās valodās ir identiskas. nav.brand un footer.text jau aptverti, tulkojot komponentu 1. solī.

Kad visi trīs soļi ir paveikti, /fr/SFO, /de/SFO u.c. lapas būs pilnībā iztulkotas.

3. daļa — Produkcija

1. Izvietošana: GitHub, pēc tam Vercel

Augšupielādējiet GitHub:

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

Importējiet Vercel: Add New → Project → importējiet repozitoriju airports. Pievienojiet vides mainīgos — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL un, ja nepieciešams, NEXT_PUBLIC_BUNNY_CDN_URL — pēc tam izvēlieties Deploy. Apmeklējiet /en/JFK un /fr/SFO. Katrs turpmākais git push palaidīs jaunu izvietošanu.

2. Tiešsaistes priekšskatījums un rediģēšana uz vietas

Abi ir iekļauti karkasā.

• Tiešsaistes priekšskatījums: <Refresher> failā layout.tsx atjauno lapu, kuru priekšskatāt, tiklīdz administrācijā saglabājat izmaiņas — izvietošana nav nepieciešama.
• Rediģēšana uz vietas: pievienojiet ?edit_mode=true jebkuram URL (piemēram, …/en/JFK?edit_mode=true), lai redzētu redaktora pārklājumus. Publiskie apmeklētāji joprojām redz tīru lapu.

?edit_mode=true pārklāj tiešsaistes lapu ar redaktora elementiem.

Tas ir viss par izstrādi

Piecdesmit lidostas, 35 valodas, tiešsaistes režīms — aprakstīts vienreiz un aizpildīts ar datiem: viens maršruts, četri React komponenti un pāris CEL sasaistes. CMS glabā saturu, jūsu kods to atveido, un CEL visu savieno kopā.