Build & Ship an Airport Directory

Sukurkite tikrą, internacionalizuotą oro uostų katalogą „Profound CMS“ platformoje: vienas URL šablonas, kuris sugeneruoja puslapį kiekvienam oro uostui 35 kalbomis. Jūs rašote Next.js kodą ir rankiniu būdu sukuriate CMS struktūrą; Claude Code (per Profound MCP) atlieka tris darbus — sugeneruoja oro uostų duomenis, sujungia dizaino sistemą ir sugeneruoja keturis React komponentus. Trys dalys: Parengimas, Kūrimas, Produkcija.

Peržiūrėkite visą vaizdo įrašo apžvalgą.

Ką sukursite

• ~50 oro uostų įrašų, kiekvienas savo URL.
• Vienas parametrinis maršrutas /{language}/{airport_code}.
• Keturi sąsajos elementai — navigacija, antraštė, turinys, poraštė — kuriuos atvaizduoja cms-renderer.
• Tiesioginiai CMS duomenys per CEL susiejimus.
• Visos 35 kalbos, išverčiamos vienu spustelėjimu.
• Diegimas į Vercel su tiesiogine peržiūra ir redagavimu vietoje.

Reikalingos sąlygos

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code su prijungtu Profound MCP (1 dalis).
• Profound CMS paskyra.
• 3 daliai: prisijungta GitHub CLI (gh) ir prie GitHub prijungta Vercel paskyra.

Kaip viskas susiję

• Komponentai apibrėžia turinio struktūrą. Route Slug laukas daro komponentą maršrutuojamą; UI Element žyma leidžia jį patalpinti puslapyje; System komponentai (pvz., language) pateikiami įdiegtieji.
• Variantai yra turinys (JFK, SFO, LAX…).
• UI elementai yra puslapio sekcijos, užpildytos CEL — Profound šablonų skriptais, įvertinamais atvaizduojant.
• Parametrinis maršrutas susieja URL su variantu ir UI elementų rinkiniu.
• Jūsų Next.js programa viską atvaizduoja per cms-renderer SDK su skaitymo lygio API raktu.

1 dalis — Parengimas

Galutinis rezultatas: ~50 oro uostų CMS sistemoje, programa, kuri juos skaito, ir įdiegta dizaino sistema.

1. Sukurkite svetainę

Prisiregistruokite Profound (WorkOS autentifikacija) ir sukurkite svetainę airports pavadinimu. Nukopijuokite du dalykus: svetainės ID (UUID administratoriaus URL adrese) ir skaitymo lygio API raktą iš Deployments → Create API key. Programa tik skaito, todėl pakanka skaitymo rakto.

2. Paruoškite ir prijunkite programą

bunx create-profound-next airports
cd airports

Pridėkite savo kredencialus į .env.local:

PROFOUND_API_KEY=<jūsų skaitymo raktas>
NEXT_PUBLIC_PROFOUND_WEBSITE_ID=<jūsų svetainės id>
NEXT_PUBLIC_CMS_API_URL=https://cms.dev.tryprofound.com
NEXT_PUBLIC_BUNNY_CDN_URL=https://cms-profound.b-cdn.net

Paleiskite bun dev ir atidarykite localhost:3000, kad patikrintumėte, ar ryšys veikia.

3. Sukurkite airport komponentą

Administratoriaus aplinkoje eikite į Components → Create new component ir pavadinkite jį airport. Pridėkite šešis laukus: code, name, city, country (Text) ir latitude, longitude (Number). Pažymėkite code kaip Route Slug lauką ir nustatykite būseną į Active. Palikite visus laukus pasirenkamus; nepridėkite UI Element žymos.

airport komponentas — šeši laukai, kuriame code nustatytas kaip Route Slug.

4. Įtraukite komponentą į tipus

bun run generate-schemas

Tai įrašo airportSchema (Zod) ir Airport (tipą) į generated/cms-schemas.ts ir patvirtina, kad jūsų kredencialai veikia.

5. Užpildykite duomenis per MCP

Prijunkite MCP ir autentifikuokite:

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

Serveris autentifikuoja per OAuth (WorkOS). Claude Code aplinkoje paleiskite /mcp, pasirinkite Profound ir užbaikite prisijungimą naršyklėje — Claude Code taip pat automatiškai paragins jus pirmą kartą kviečiant Profound įrankį. Kai /mcp rodo, kad Profound yra connected, paraginkite Claude:

Sugeneruok penkiasdešimt realių oro uostų — teisingi IATA kodai, pavadinimai, miestai, šalys ir koordinatės. Išsaugok juos JSON formatu data aplanke, patikrink pagal mūsų oro uosto komponentą, tada sukurk kiekvieną kaip publikuotą dokumentą per Profound MCP, lygiagrečiai.

Atidarykite airport → Variants ir patvirtinkite, kad yra ~50 publikuotų oro uostų. Programa skaito su API raktu; MCP rašo su savo WorkOS sesija.

Apie 50 oro uostų, užpildytų kaip publikuoti variantai.

6. Pridėkite dizaino sistemą

Parengtas šablonas pateikiamas be stiliaus. Projekto šaknyje įdėkite DESIGN.md (Tailwind v4 @theme blokas su žetonais) — savo arba atsisiųskite iš refero.design. Tada paraginkite Claude:

Perskaityk DESIGN.md. Nustatyk Tailwind v4 ir prijunk temą bei šriftus. Naudok next/font šriftams, o ne „Google“ importą vykdymo metu. Tik stilius — jokie puslapiai ar komponentai dar nekurti.

Patikrinkite, ar src/app/globals.css yra @import "tailwindcss"; ir @theme blokas bei ar localhost:3000 rodo žetonus.

2 dalis — Kūrimas

Sukurkite atvaizdavimo sluoksnį: UI elementus, React komponentus, maršrutą, CEL susiejimus ir vertimą.

1. Apibrėžkite keturis UI elementų komponentus

Administratoriaus aplinkoje keturis kartus pasirinkite Create new component (be Route Slug). Kiekvienam pridėkite laukus kaip Text, nebent nurodyta kitaip, nustatykite būseną į Active ir pridėkite UI Element žymą skiltyje Settings → Tags:

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

body.latitude ir body.longitude turi būti Number, kad atitiktų oro uosto komponentą.

Kiekvienas UI elementas yra atskiras komponentas — čia body, nustatytas Active su UI Element žyma.

Visi keturi UI elementai greta airport komponento.

2. Iš naujo sugeneruokite tipus

bun run generate-schemas

3. Sugeneruokite React komponentus ir juos užregistruokite

Paraginkite Claude:

Sukurk keturis React komponentus — nav, headline, body, footer — kataloge components/. Kiekvienas priima vieną content rekvizitą, tipizuotą kaip BlockComponentProps<T> iš cms-renderer/lib/types, kur T yra elemento sugeneruotas tipas, ir skaito savo laukus iš content. Užregistruok visus keturis pagavimo maršruto registre pagal komponento pavadinimą. Stiliuok juos pagal mūsų dizaino sistemą, bet kaip savo komponentus — nekopijuok šaltinio svetainės išdėstymo. Navigacija: ženklas kairėje. Antraštė: oro uosto pavadinimas su code · city, country paantrašte. Turinys: informacijos panelė su kodu, miestu, šalimi ir koordinatėmis. Poraštė: viena statiška eilutė. Tik išdėstymas ir stilius.

Claude sukuria visus keturis komponentus ir užpildo registrą faile src/app/[...slug]/page.tsx:

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

Dvi taisyklės: kiekvienas komponentas skaito laukus iš content (ne kaip atskirus rekvizitus), o registro raktai turi tiksliai atitikti CMS komponentų pavadinimus — neatitikimas nieko neatvaizduos.

4. Sukurkite parametrinį maršrutą

Administratoriaus aplinkoje eikite į Pages → Create page ir nustatykite šabloną /{airport_code}. Skiltyje Dynamic Segment Mappings susiekite airport_code su airport komponentu, šliužo lauku code. Išsaugokite — būsite nukreipti į Page Builder. Patikrinkite, ar /JFK veikia.

5. Pridėkite UI elementus, sujunkite CEL ir publikuokite

Pridedant UI elementą prie puslapio iš skilties Custom.

Keturi UI elementai pridėti prie JFK susiejimo Page Builder aplinkoje.

1. Pasirinkite JFK susiejimą → Add UI Element → Custom skirtukas → pridėkite nav, headline, body, footer eilės tvarka. Profound pritaiko rinkinį visiems oro uostų susiejimams.

2. Užpildykite kiekvieną lauką. Statinės reikšmės (navigacijos ženklas, poraštės tekstas): įveskite jas tiesiogiai. Dinaminės reikšmės: perjunkite į dinaminį režimą ir parašykite CEL. Bendras paieškos sakinys yra documents.get("airport", meta.params.airport_code).

   Laukas	CEL reikšmė
   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 (ir .longitude)
   nav.brand, footer.text	statinės eilutės

3. Publikuokite puslapį (viršuje dešinėje).

6. Patikrinkite anglų kalba

Atidarykite localhost:3000/JFK, tada /SFO, /LAX — tas pats šablonas, skirtingi oro uostai.

Baigtas puslapis, atvaizduojantis JFK duomenis anglų kalba.

7. Internacionalizacija

1. Pirmiausia išverskite komponentus. Administratoriaus aplinkoje atidarykite kiekvieną komponentą (bet kurį — tai nebūtinai turi būti UI elementas) ir spauskite Translate → Submit. Profound išverčia jo turinį į visas 35 kalbas vienu metu, įskaitant statinių laukų reikšmes. Padarykite tai prieš redaguodami maršrutą ar liesdami CEL.

   

   Translate → Submit išsiunčia komponentą visoms 35 kalboms vienu ypu.

2. Pridėkite kalbos dimensiją. Skiltyje Pages pakeiskite šabloną į /{language}/{airport_code}. Pridėkite Dynamic Segment Mapping kalbos segmentui: language → įdiegtasis language sisteminis komponentas, šliužo laukas code. Išsaugokite ir patikrinkite, ar /en/JFK veikia.

   

   Pridedant {language} segmentą prie maršruto.

3. Visus verčiamus laukus nukreipkite į išverstą užklausą. Internacionalizuodami puslapį, kiekvieną nuo kalbos priklausomą lauką — ne tik antraštę — pakeiskite iš documents.get(...) į documents.translated("airport", meta.params.airport_code, meta.params.language):

   Laukas	Išverstas 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 (ir .country)

   Palikite IATA code ir koordinates su documents.get — jos identiškos visomis kalbomis. nav.brand ir footer.text jau išversti per Translate veiksmą 1 žingsnyje.

Kai visi trys veiksmai atlikti, /fr/SFO, /de/SFO ir kt. atsidaro visiškai išversti.

3 dalis — Produkcija

1. Diegimas: GitHub, tuomet Vercel

Išsiųskite į GitHub:

git init
git add -A
git commit -m "Oro uostų katalogas"
gh repo create airports --public --source=. --push

Importuokite į Vercel: Add New → Project → importuokite airports repozitoriją. Pridėkite aplinkos kintamuosius — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL ir, esant poreikiui, NEXT_PUBLIC_BUNNY_CDN_URL — tada spauskite Deploy. Aplankykite /en/JFK ir /fr/SFO. Kiekvienas būsimas git push pradeda naują diegimą.

2. Tiesioginė peržiūra ir redagavimas vietoje

Abi funkcijos pateikiamos su šablonu.

• Tiesioginė peržiūra: <Refresher> layout.tsx faile atnaujina puslapį, kurį peržiūrite, kai redaguojate ir įrašote administratoriaus aplinkoje — nereikia naujo diegimo.
• Redagavimas vietoje: pridėkite ?edit_mode=true prie bet kurio URL (pvz., …/en/JFK?edit_mode=true), kad matytumėte redagavimo perdangas. Vieši lankytojai vis tiek mato švarų puslapį.

?edit_mode=true uždeda redaktoriaus perdangas tiesioginiame puslapyje.

Štai ir kūrimas

Penkiasdešimt oro uostų, 35 kalbos, viskas gyvai — aprašyta vieną kartą ir užpildyta duomenimis: vienas maršrutas, keturi React komponentai ir keli CEL susiejimai. CMS laiko turinį, jūsų kodas jį atvaizduoja, o CEL juos sujungia.