Build & Ship an Airport Directory

Δημιουργήστε έναν πραγματικό, διεθνοποιημένο κατάλογο αεροδρομίων στο Profound CMS: ένα μοτίβο URL που αποδίδει μια σελίδα για κάθε αεροδρόμιο, σε 35 γλώσσες. Εσείς γράφετε τον κώδικα Next.js και στήνετε χειροκίνητα τη δομή του CMS· το Claude Code (μέσω του Profound MCP) αναλαμβάνει τρεις εργασίες — τη δημιουργία των δεδομένων των αεροδρομίων, τη σύνδεση ενός design system και τη δημιουργία των τεσσάρων React components. Τρία μέρη: Ρύθμιση, Κατασκευή, Παραγωγή.

Δείτε ολόκληρο το βίντεο περιήγησης.

Τι θα δημιουργήσετε

• ~50 εγγραφές αεροδρομίων, καθεμία στο δικό της URL.
• Μία παραμετρική διαδρομή /{language}/{airport_code}.
• Τέσσερα στοιχεία διεπαφής — nav, headline, body, footer — που αποδίδονται από το cms-renderer.
• Ζωντανά δεδομένα CMS μέσω δεσμεύσεων CEL.
• Και τις 35 γλώσσες, μεταφρασμένες με ένα κλικ.
• Ανάπτυξη στο Vercel με live preview και επεξεργασία επί τόπου.

Προαπαιτούμενα

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code με συνδεδεμένο το Profound MCP (Μέρος 1).
• Ένας λογαριασμός Profound CMS.
• Για το Μέρος 3: GitHub CLI (gh) συνδεδεμένο και ένας λογαριασμός Vercel που είναι συνδεδεμένος με το GitHub.

Πώς συνδέονται όλα μεταξύ τους

• Τα Components ορίζουν το σχήμα του περιεχομένου. Ένα πεδίο Route Slug κάνει ένα component δρομολογήσιμο· μια ετικέτα UI Element το κάνει τοποθετήσιμο σε σελίδα· τα System components (όπως το language) παρέχονται ενσωματωμένα.
• Τα Variants είναι το περιεχόμενο (JFK, SFO, LAX…).
• Τα UI elements είναι ενότητες σελίδας, γεμισμένες με CEL — το in-template scripting του Profound, που αξιολογείται κατά την απόδοση.
• Μια παραμετρική διαδρομή αντιστοιχίζει ένα URL σε ένα variant συν ένα σύνολο UI elements.
• Η εφαρμογή σας Next.js τα αποδίδει όλα μέσω του SDK cms-renderer με ένα API key ανάγνωσης.

Μέρος 1 — Ρύθμιση

Τελική κατάσταση: περίπου 50 αεροδρόμια στο CMS, η εφαρμογή συνδεδεμένη ώστε να τα διαβάζει και το design system εγκατεστημένο.

1. Δημιουργήστε τον ιστότοπο

Εγγραφείτε στο Profound (WorkOS auth) και δημιουργήστε έναν ιστότοπο με όνομα airports. Αντιγράψτε δύο πράγματα: το website ID (το UUID στο admin URL) και ένα API key ανάγνωσης από Deployments → Create API key. Η εφαρμογή μόνο διαβάζει, οπότε αρκεί ένα κλειδί ανάγνωσης.

2. Δημιουργήστε scaffold και συνδέστε την εφαρμογή

bunx create-profound-next airports
cd airports

Προσθέστε τα διαπιστευτήριά σας στο .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

Εκτελέστε bun dev και ανοίξτε το localhost:3000 για να επιβεβαιώσετε ότι συνδέεται.

3. Δημιουργήστε το component airport

Στο admin, πηγαίνετε σε Components → Create new component και ονομάστε το airport. Προσθέστε έξι πεδία: code, name, city, country (Text) και latitude, longitude (Number). Σημάνετε το code ως το πεδίο Route Slug και ορίστε την κατάσταση σε Active. Αφήστε όλα τα πεδία προαιρετικά· μην προσθέσετε ετικέτα UI Element.

Το component airport — έξι πεδία, με το code ορισμένο ως Route Slug.

4. Εισαγάγετε το component στα types

bun run generate-schemas

Αυτό γράφει τα airportSchema (Zod) και Airport (type) στο generated/cms-schemas.ts, και επιβεβαιώνει ότι τα διαπιστευτήριά σας λειτουργούν.

5. Κάντε seed τα δεδομένα μέσω του MCP

Συνδέστε το MCP και κάντε έλεγχο ταυτότητας:

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

Ο διακομιστής κάνει έλεγχο ταυτότητας μέσω OAuth (WorkOS). Στο Claude Code, εκτελέστε /mcp, επιλέξτε Profound και ολοκληρώστε τη σύνδεση στο πρόγραμμα περιήγησής σας — το Claude Code σάς προτρέπει επίσης αυτόματα την πρώτη φορά που καλείται ένα εργαλείο Profound. Μόλις το /mcp εμφανίσει το Profound ως connected, ζητήστε από το Claude:

Δημιούργησε πενήντα πραγματικά αεροδρόμια — κανονικούς κωδικούς IATA, ονόματα, πόλεις, χώρες και συντεταγμένες. Αποθήκευσέ τα ως JSON σε έναν φάκελο data, επικύρωσέ τα με βάση το component airport και στη συνέχεια δημιούργησε το καθένα ως δημοσιευμένο document μέσω του Profound MCP, παράλληλα.

Ανοίξτε airport → Variants για να επιβεβαιώσετε περίπου 50 δημοσιευμένα αεροδρόμια. Η εφαρμογή διαβάζει με το API key· το MCP γράφει με τη δική του συνεδρία WorkOS.

Περίπου 50 αεροδρόμια, seeded ως δημοσιευμένα Variants.

6. Προσθέστε ένα design system

Το scaffold παραδίδεται χωρίς στυλ. Τοποθετήστε ένα DESIGN.md (ένα μπλοκ @theme του Tailwind v4 συν tokens) στη ρίζα του έργου — δικό σας ή κατεβάστε ένα από το refero.design. Έπειτα ζητήστε από το Claude:

Διάβασε το DESIGN.md. Ρύθμισε το Tailwind v4 και σύνδεσε το theme και τις γραμματοσειρές. Χρησιμοποίησε next/font για τις γραμματοσειρές, όχι εισαγωγή Google στο runtime. Μόνο styling — χωρίς pages ή components ακόμη.

Επιβεβαιώστε ότι το src/app/globals.css περιλαμβάνει @import "tailwindcss"; καθώς και το μπλοκ @theme, και ότι το localhost:3000 εμφανίζει τα tokens.

Μέρος 2 — Κατασκευή

Δημιουργήστε το στρώμα απόδοσης: τα UI elements, τα React components, τη διαδρομή, τις δεσμεύσεις CEL και τη μετάφραση.

1. Ορίστε τα τέσσερα UI element components

Στο admin, Create new component τέσσερις φορές (χωρίς Route Slug). Για καθένα, προσθέστε τα πεδία ως Text εκτός αν αναφέρεται διαφορετικά, ορίστε την κατάσταση σε Active και προσθέστε την ετικέτα UI Element στο Settings → Tags:

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

Τα body.latitude και body.longitude πρέπει να είναι Number ώστε να ταιριάζουν με το component airport.

Κάθε UI element είναι δικό του component — εδώ το body, ορισμένο σε Active με την ετικέτα UI Element.

Και τα τέσσερα UI elements δίπλα στο component airport.

2. Αναγεννήστε τα types

bun run generate-schemas

3. Δημιουργήστε τα React components και καταχωρίστε τα

Ζητήστε από το Claude:

Δημιούργησε τέσσερα React components — nav, headline, body, footer — μέσα στο components/. Κάθε ένα δέχεται μια μοναδική prop content με type BlockComponentProps<T> από το cms-renderer/lib/types, όπου το T είναι ο παραγόμενος τύπος του στοιχείου, και διαβάζει τα πεδία του από το content. Καταχώρισέ τα όλα στο registry της catch-all διαδρομής ανά όνομα component. Στυλιζάρισέ τα με το design system μας, αλλά ως δικά μας components — μην αντιγράψεις τη διάταξη του πηγαίου site. Nav: brand στα αριστερά. Headline: όνομα αεροδρομίου με υπότιτλο code · city, country. Body: πάνελ λεπτομερειών με code, city, country και συντεταγμένες. Footer: μία στατική γραμμή. Μόνο διάταξη και στυλ.

Ο Claude δημιουργεί τα τέσσερα components και συμπληρώνει το registry στο src/app/[...slug]/page.tsx:

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

Δύο κανόνες: κάθε component διαβάζει τα πεδία του από το content (όχι ως ξεχωριστές props) και τα κλειδιά του registry πρέπει να ταιριάζουν ακριβώς με τα ονόματα των components στο CMS — διαφορετικά δεν αποδίδεται τίποτα.

4. Δημιουργήστε την παραμετρική διαδρομή

Στο admin, πηγαίνετε σε Pages → Create page και ορίστε το μοτίβο /{airport_code}. Στο Dynamic Segment Mappings, αντιστοιχίστε το airport_code → στο component airport, πεδίο slug code. Αποθηκεύστε — μεταφέρεστε στο Page Builder. Επαληθεύστε ότι το /JFK επιλύεται.

5. Προσθέστε τα UI elements, συνδέστε τα CEL και δημοσιεύστε

Προσθέτοντας ένα UI element στη σελίδα από την καρτέλα Custom.

Τα τέσσερα UI elements προστιθέμενα στη δέσμευση JFK στο Page Builder.

1. Επιλέξτε τη δέσμευση JFK → Add UI Element → καρτέλα Custom → προσθέστε nav, headline, body, footer με αυτή τη σειρά. Το Profound αντιγράφει το σύνολο σε κάθε δέσμευση αεροδρομίου.

2. Συμπληρώστε κάθε πεδίο. Στατικές τιμές (nav brand, footer text): πληκτρολογήστε τις απευθείας. Δυναμικές τιμές: αλλάξτε σε dynamic και γράψτε CEL. Το κοινό lookup είναι documents.get("airport", meta.params.airport_code).

   Πεδίο	Τιμή 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 (και .longitude)
   nav.brand, footer.text	στατικές συμβολοσειρές

3. Δημοσιεύστε τη σελίδα (πάνω δεξιά).

6. Επαληθεύστε στα αγγλικά

Ανοίξτε localhost:3000/JFK, έπειτα /SFO, /LAX — ίδιο template, διαφορετικό αεροδρόμιο.

Η ολοκληρωμένη σελίδα που αποδίδει τα δεδομένα του JFK, στα αγγλικά.

7. Διεθνοποιήστε

1. Μεταφράστε πρώτα τα components. Στο admin, ανοίξτε κάθε component (οποιοδήποτε — δεν χρειάζεται να είναι UI element) και κάντε κλικ στο Translate → Submit. Το Profound μεταφράζει το περιεχόμενό του σε όλες τις 35 γλώσσες ταυτόχρονα, συμπεριλαμβανομένων των στατικών πεδίων. Κάντε το πριν επεξεργαστείτε τη διαδρομή ή αγγίξετε οποιοδήποτε CEL.

   

   Το Translate → Submit στέλνει ένα component σε όλες τις 35 γλώσσες ταυτόχρονα.

2. Προσθέστε τη διάσταση της γλώσσας. Στις Pages, αλλάξτε το μοτίβο σε /{language}/{airport_code}. Προσθέστε ένα Dynamic Segment Mapping για το language → το ενσωματωμένο System component language, πεδίο slug code. Αποθηκεύστε και επιβεβαιώστε ότι το /en/JFK επιλύεται.

   

   Προσθέτοντας το segment {language} στη διαδρομή.

3. Κατευθύνετε κάθε μεταφράσιμο πεδίο στη μεταφρασμένη ανάκτηση. Η διεθνοποίηση της σελίδας σημαίνει ότι θα αλλάξετε κάθε πεδίο που εξαρτάται από τη γλώσσα — όχι μόνο το headline — από documents.get(...) σε documents.translated("airport", meta.params.airport_code, meta.params.language):

   Πεδίο	Μεταφρασμένο 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 (και .country)

   Αφήστε τον κωδικό IATA code και τις συντεταγμένες στο documents.get — είναι ίδιες σε κάθε γλώσσα. Τα nav.brand και footer.text καλύπτονται ήδη από τη μετάφραση του component στο βήμα 1.

Όταν ολοκληρωθούν και τα τρία, τα /fr/SFO, /de/SFO κ.λπ. αποδίδονται πλήρως μεταφρασμένα.

Μέρος 3 — Παραγωγή

1. Ανάπτυξη: GitHub, κατόπιν Vercel

Κάντε push στο GitHub:

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

Κάντε import στο Vercel: Add New → Project → εισάγετε το repo airports. Προσθέστε τις μεταβλητές περιβάλλοντος — PROFOUND_API_KEY, NEXT_PUBLIC_PROFOUND_WEBSITE_ID, NEXT_PUBLIC_CMS_API_URL, και προαιρετικά NEXT_PUBLIC_BUNNY_CDN_URL — έπειτα Deploy. Επισκεφθείτε /en/JFK και /fr/SFO. Κάθε μελλοντικό git push κάνει redeploy.

2. Live preview και επεξεργασία επί τόπου

Και τα δύο περιλαμβάνονται στο scaffold.

• Live preview: το <Refresher> στο layout.tsx ενημερώνει τη σελίδα που προεπισκοπείτε όταν επεξεργάζεστε και αποθηκεύετε στο admin — χωρίς redeploy.
• Επεξεργασία επί τόπου: προσθέστε ?edit_mode=true σε οποιοδήποτε URL (π.χ. …/en/JFK?edit_mode=true) για επικάλυψη επεξεργασίας. Οι δημόσιοι επισκέπτες εξακολουθούν να βλέπουν την καθαρή σελίδα.

Το ?edit_mode=true επικαλύπτει τον επεξεργαστή πάνω στη ζωντανή σελίδα.

Αυτό είναι το build

Πενήντα αεροδρόμια, 35 γλώσσες, live — περιγράφονται μία φορά και συμπληρώνονται από δεδομένα: μία διαδρομή, τέσσερα React components και μερικές δεσμεύσεις CEL. Το CMS κρατά το περιεχόμενο, ο κώδικάς σας το αποδίδει και το CEL τα συνδέει.