Imenik letališč

Zgradite pravi, internacionaliziran imenik letališč v Profound CMS: en vzorec URL, ki upodobi stran za vsako letališče v 35 jezikih. Vi napišete Next.js kodo in ročno zgradite strukturo CMS; Claude Code (prek Profound MCP) prevzame tri naloge — generiranje podatkov o letališčih, povezovanje oblikovalskega sistema in generiranje štirih React komponent. Trije deli: Nastavitev, Gradnja, Produkcija.

Oglejte si celoten videovodič.

Kaj boste zgradili

• ~50 zapisov letališč, vsak na svojem URL-ju.
• Ena parametrična pot /{language}/{airport_code}.
• Štirje elementi uporabniškega vmesnika — nav, headline, body, footer — ki jih upodobi cms-renderer.
• Živi podatki CMS prek povezav CEL.
• Vseh 35 jezikov, prevedenih z enim klikom.
• Objavljeno na Vercel z živim predogledom in urejanjem na mestu.

Predpogoji

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code s povezanim Profound MCP (1. del).
• Račun Profound CMS.
• Za 3. del: GitHub CLI (gh) s prijavo in račun Vercel, povezan z GitHubom.

Kako se vse poveže

• Komponente definirajo obliko vsebine. Polje Route Slug omogoča, da je komponenta dostopna prek poti; oznaka UI Element omogoča postavitev na stran; Sistemske komponente (npr. language) so že vključene.
• Variant je vsebina (JFK, SFO, LAX…).
• Elementi UI so razdelki strani, napolnjeni s CEL — Profound skriptiranjem v predlogah, ovrednotenim ob upodobitvi.
• Parametrična pot preslika URL v varianto in niz elementov UI.
• Vaša aplikacija Next.js vse skupaj upodobi prek SDK cms-renderer z API ključem za branje.

1. del — Nastavitev

Končno stanje: približno 50 letališč v CMS, aplikacija povezana za njihovo branje ter vzpostavljen oblikovalski sistem.

1. Ustvarite spletno mesto

Prijavite se v Profound (WorkOS overitev) in ustvarite spletno mesto z imenom airports. Prepišite dve stvari: ID spletnega mesta (UUID v administratorskem URL-ju) in API ključ za bralno raven iz Deployments → Create API key. Aplikacija samo bere, zato zadostuje ključ za branje.

2. Postavite ogrodje in povežite aplikacijo

bunx create-profound-next airports
cd airports

Dodajte svoje poverilnice v .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

Zaženite bun dev in odprite localhost:3000, da potrdite povezavo.

3. Ustvarite komponento airport

V administraciji pojdite na Components → Create new component in jo poimenujte airport. Dodajte šest polj: code, name, city, country (Text) ter latitude, longitude (Number). Označite code kot polje Route Slug in nastavite stanje na Active. Vsa polja naj ostanejo neobvezna; ne dodajte oznake UI Element.

Komponenta airport — šest polj, code je nastavljen kot Route Slug.

4. Prenesite komponento v tipe

bun run generate-schemas

To ustvari airportSchema (Zod) in Airport (tip) v generated/cms-schemas.ts ter potrdi veljavnost vaših poverilnic.

5. Napolnite podatke prek MCP

Povežite MCP in se overite:

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

Strežnik se overja prek OAuth (WorkOS). V Claude Code zaženite /mcp, izberite Profound in v brskalniku dokončajte prijavo — Claude Code vas prvič samodejno pozove, ko pokličete orodje Profound. Ko /mcp prikaže Profound kot connected, podajte Claudeu poziv:

Ustvari petdeset resničnih letališč — veljavne kode IATA, imena, mesta, države in koordinate. Shrani jih kot JSON v mapo data, validiraj glede na našo komponento airport in nato vsako ustvari kot objavljen dokument prek Profound MCP, vzporedno.

Odprite airport → Variants, da potrdite približno 50 objavljenih letališč. Aplikacija bere z API ključem; MCP piše s svojo WorkOS sejo.

Približno 50 letališč, vnesenih kot objavljene variacije.

6. Dodajte oblikovalski sistem

Ogrodje je brez sloga. V korenu projekta dodajte DESIGN.md (blok @theme Tailwind v4 plus žetoni) — svojega ali prenesenega s refero.design. Nato Claudeu posredujte poziv:

Preberi DESIGN.md. Nastavi Tailwind v4 in poveži temo ter pisave. Za pisave uporabi next/font, ne runtime uvoza Google. Samo stiliranje — brez strani ali komponent.

Preverite, da src/app/globals.css vsebuje @import "tailwindcss"; in blok @theme ter da localhost:3000 prikazuje žetone.

2. del — Gradnja

Zgradite plast za upodabljanje: elemente UI, React komponente, pot, povezave CEL in prevode.

1. Definirajte štiri komponente elementov UI

V administraciji štirikrat izberite Create new component (brez Route Slug). Za vsako dodajte polja kot Text, razen kjer je navedeno, nastavite stanje na Active in v Settings → Tags dodajte oznako UI Element:

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

body.latitude in body.longitude morata biti tipa Number, da se ujemata s komponento letališča.

Vsak element UI je lastna komponenta — tukaj body, nastavljen na Active z oznako UI Element.

Vsi štirje elementi UI skupaj s komponento airport.

2. Ponovno generirajte tipe

bun run generate-schemas

3. Generirajte React komponente in jih registrirajte

Claudeu posredujte poziv:

Zgradi štiri React komponente — nav, headline, body, footer — v components/. Vsaka naj sprejme en sam prop content, tipiziran kot BlockComponentProps<T> iz cms-renderer/lib/types, kjer je T generirani tip elementa, in naj prebere svoja polja iz content. Registriraj vse štiri v registru zajemne poti v src/app/[...slug]/page.tsx pod imenom komponente. Oblikuj jih z našim oblikovalskim sistemom, vendar kot naše komponente — ne kopiraj postavitve iz izvornega mesta. Nav: brand na levi. Headline: ime letališča s podnaslovom code · city, country. Body: plošča s podrobnostmi s kodo, mestom, državo in koordinatami. Footer: ena statična vrstica. Le postavitev in stiliranje.

Claude ustvari štiri komponente in registracijo v src/app/[...slug]/page.tsx:

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

Dve pravili: vsaka komponenta bere svoja polja iz content (ne kot ločene prope) in ključi registra se morajo natančno ujemati z imeni komponent v CMS — neskladje pomeni prazno upodobitev.

4. Ustvarite parametrično pot

V administraciji pojdite na Pages → Create page in nastavite vzorec /{airport_code}. V Dynamic Segment Mappings preslikajte airport_code → komponenta airport, slug polje code. Shranite — preusmerjeni boste v Page Builder. Preverite, da /JFK deluje.

5. Dodajte elemente UI, povežite CEL in objavite

Dodajanje elementa UI na stran prek zavihka Custom.

Štirje elementi UI, dodani vezavi JFK v Page Builderju.

1. Izberite vezavo JFK → Add UI Element → zavihek Custom → dodajte nav, headline, body, footer po vrsti. Profound nabor razširi na vse vezave letališč.

2. Izpolnite vsako polje. Statične vrednosti (nav brand, footer text): vnesite jih neposredno. Dinamične vrednosti: preklopite na dinamično in vpišite CEL. Skupna poizvedba je documents.get("airport", meta.params.airport_code).

   Polje	Vrednost CEL
   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 (in .longitude)
   nav.brand, footer.text	statični nizi

3. Objavite stran (zgoraj desno).

6. Preverite v angleščini

Odprite localhost:3000/JFK, nato /SFO, /LAX — ista predloga, različna letališča.

Končana stran, ki prikazuje podatke o JFK v angleščini.

7. Internacionalizirajte

1. Najprej prevedite komponente. V administraciji odprite vsako komponento (katerekoli — ni nujno, da so elementi UI) in kliknite Translate → Submit. Profound prevede njeno vsebino v vseh 35 jezikov hkrati, vključno s statičnimi polji. To naredite preden uredite pot ali se dotaknete katerega koli CEL.

   

   Translate → Submit pošlje komponento v vseh 35 jezikov hkrati.

2. Dodajte dimenzijo jezika. V Pages spremenite vzorec v /{language}/{airport_code}. Dodajte Dynamic Segment Mapping za language → vgrajena sistemska komponenta language, slug polje code. Shranite in preverite, da /en/JFK deluje.

   

   Dodajanje segmenta {language} na pot.

3. Vsako prevedljivo polje usmerite na prevedeni zajem. Internacionalizacija strani pomeni, da vsako od jezika odvisno polje — ne le naslov — zamenjate iz documents.get(...) v documents.translated("airport", meta.params.airport_code, meta.params.language):

   Polje	Prevedena vrednost 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 (in .country)

   Kodo IATA code in koordinate pustite na documents.get — enake so v vseh jezikih. nav.brand in footer.text sta že zajeta s prevodom komponent v 1. koraku.

Ko zaključite vse tri korake, /fr/SFO, /de/SFO itd. delujejo v celoti prevedeni.

3. del — Produkcija

1. Objavite: GitHub, nato Vercel

Objavite na GitHub:

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

Uvozite v Vercel: Add New → Project → uvozite repozitorij airports. Dodajte okoljske spremenljivke — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL in po želji NEXT_PUBLIC_BUNNY_CDN_URL — nato Deploy. Obiščite /en/JFK in /fr/SFO. Vsak naslednji git push sproži ponovno objavo.

2. Živ predogled in urejanje na mestu

Oboje je priloženo ogrodju.

• Živ predogled: <Refresher> v layout.tsx osveži stran, ki jo predogledujete, ko v administraciji uredite in shranite — brez ponovne objave.
• Urejanje na mestu: dodajte ?edit_mode=true kateremukoli URL-ju (npr. …/en/JFK?edit_mode=true) za prekrivne plasti urejevalnika. Javni obiskovalci še vedno vidijo čisto stran.

?edit_mode=true doda prekrivanje urejevalnika na objavljeno stran.

To je vse pri gradnji

Petdeset letališč, 35 jezikov, v živo — enkrat opisano in napolnjeno s podatki: ena pot, štiri React komponente in nekaj povezav CEL. CMS hrani vsebino, vaša koda jo upodobi, CEL pa vse poveže.