Build & Ship an Airport Directory

Створіть справжній, інтернаціоналізований довідник аеропортів на Profound CMS: один шаблон URL, який відображає сторінку для кожного аеропорту 35 мовами. Ви пишете код Next.js і власноруч конструюєте структуру CMS; Claude Code (через Profound MCP) виконує три завдання — генерує дані про аеропорти, підключає дизайн-систему та створює чотири компоненти React. Три частини: Налаштування, Розробка, Продакшн.

Перегляньте повний відеоогляд.

Що ви створите

• ~50 записів про аеропорти, кожен на власному URL.
• Один параметричний маршрут /{language}/{airport_code}.
• Чотири елементи інтерфейсу — навігація, заголовок, основний блок, футер — які рендерить cms-renderer.
• Живі дані CMS через прив'язки CEL.
• Усі 35 мов, перекладені одним кліком.
• Розгортання на Vercel із живим попереднім переглядом та редагуванням на місці.

Передумови

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code з підключеним Profound MCP (Частина 1).
• Обліковий запис Profound CMS.
• Для Частини 3: GitHub CLI (gh) з авторизацією та обліковий запис Vercel, прив'язаний до GitHub.

Як це працює разом

• Компоненти визначають форму контенту. Поле Route Slug робить компонент маршрутизованим; тег UI Element дозволяє розміщувати його на сторінці; системні компоненти (як-от language) постачаються вбудовано.
• Варіанти — це контент (JFK, SFO, LAX…).
• Елементи інтерфейсу — це секції сторінки, заповнені за допомогою CEL — шаблонного скриптингу Profound, що виконується під час рендерингу.
• Параметричний маршрут зіставляє URL із варіантом і набором елементів інтерфейсу.
• Ваш застосунок Next.js усе це рендерить через SDK cms-renderer, використовуючи API-ключ рівня читання.

Частина 1 — Налаштування

Кінцевий стан: приблизно 50 аеропортів у CMS, застосунок підключено для читання, дизайн-система налаштована.

1. Створіть сайт

Зареєструйтеся в Profound (аутентифікація WorkOS) і створіть сайт із назвою airports. Скопіюйте дві речі: ідентифікатор сайту (UUID в адміністративному URL) і API-ключ рівня читання з Deployments → Create API key. Застосунку потрібен лише доступ на читання.

2. Створіть шаблон і підключіть застосунок

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. Створіть компонент airport

В адмінці перейдіть до Components → Create new component і назвіть його airport. Додайте шість полів: code, name, city, country (Text) та latitude, longitude (Number). Позначте code як поле Route Slug і встановіть статус Active. Залиште всі поля необов'язковими; не додавайте тег UI Element.

Компонент airport — шість полів, де code позначено як Route Slug.

4. Імпортуйте компонент у типи

bun run generate-schemas

Це створює airportSchema (Zod) і тип Airport у generated/cms-schemas.ts та підтверджує, що ваші облікові дані працюють.

5. Засійте дані через 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 підключено, надішліть запит Claude:

Згенеруй п'ятдесят реальних аеропортів — коректні коди IATA, назви, міста, країни та координати. Збережи їх як JSON у папці data, провалідуй за нашим компонентом airport, а потім створи кожен як опублікований документ через Profound MCP паралельно.

Відкрийте airport → Variants, щоб переконатися, що є приблизно 50 опублікованих аеропортів. Застосунок читає за допомогою API-ключа, MCP записує за власною сесією WorkOS.

Близько 50 аеропортів, доданих як опубліковані варіанти.

6. Додайте дизайн-систему

Шаблон постачається без стилів. Розмістіть DESIGN.md (блок @theme Tailwind v4 плюс токени) в корені проєкту — власний або завантажте з refero.design. Потім надішліть Claude запит:

Прочитай DESIGN.md. Налаштуй Tailwind v4 і підключи тему та шрифти. Використовуй next/font для шрифтів, без імпорту Google під час виконання. Лише стилі — жодних сторінок чи компонентів поки що.

Переконайтеся, що в src/app/globals.css є @import "tailwindcss"; і блок @theme, а localhost:3000 відображає токени.

Частина 2 — Розробка

Створіть шар рендерингу: елементи інтерфейсу, компоненти React, маршрут, прив'язки CEL і переклад.

1. Визначте чотири компоненти елементів інтерфейсу

В адмінці створіть новий компонент чотири рази (без 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, щоб відповідати компоненту airport.

Кожен елемент інтерфейсу — окремий компонент; на ілюстрації body, активний і з тегом UI Element.

Усі чотири елементи інтерфейсу поруч із компонентом airport.

2. Перегенеруйте типи

bun run generate-schemas

3. Згенеруйте компоненти React і зареєструйте їх

Надішліть Claude запит:

Створи чотири компоненти React — nav, headline, body, footer — у components/. Кожен приймає єдиний проп content, типізований як BlockComponentProps<T> із cms-renderer/lib/types, де T — згенерований тип елемента, і читає свої поля з content. Зареєструй усі чотири в реєстрі catch-all маршруту за назвою компонента. Стилізуй їх нашою дизайн-системою, але як наші власні компоненти — не копіюй макет вихідного сайту. Nav: бренд ліворуч. Headline: назва аеропорту з підзаголовком code · city, country. Body: панель деталей із кодом, містом, країною та координатами. Footer: один статичний рядок. Лише верстка та стилі.

Claude створює чотири компоненти та доповнює реєстр у src/app/[...slug]/page.tsx:

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

Два правила: кожен компонент читає свої поля з content (не як окремі пропси), а ключі реєстру мають точно збігатися з назвами компонентів у CMS — інакше рендер буде порожнім.

4. Створіть параметричний маршрут

В адмінці перейдіть до Pages → Create page і задайте шаблон /{airport_code}. У Dynamic Segment Mappings відобразіть airport_code на компонент airport, поле slug code. Збережіть — ви потрапите до Page Builder. Переконайтеся, що /JFK відкривається.

5. Додайте елементи інтерфейсу, налаштуйте CEL і опублікуйте

Додавання елемента інтерфейсу на сторінку з вкладки Custom.

Чотири елементи інтерфейсу, додані до зв'язування JFK у Page Builder.

1. Оберіть зв'язування JFK → Add UI Element → вкладка Custom → додайте nav, headline, body, footer по порядку. Profound застосує набір до кожного зв'язування аеропорту.

2. Заповніть кожне поле. Статичні значення (бренд навігації, текст футера): введіть їх вручну. Динамічні значення: перемкніться на динамічний режим і напишіть CEL. Спільний виклик: 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 — той самий шаблон, але інші аеропорти.

Готова сторінка з даними JFK англійською мовою.

7. Інтернаціоналізація

1. Спершу перекладіть компоненти. В адмінці відкрийте кожен компонент (будь-який, не обов'язково елемент інтерфейсу) і натисніть Translate → Submit. Profound миттєво перекладає контент на всі 35 мов, включно зі статичними полями. Зробіть це до редагування маршруту та CEL.

   

   Translate → Submit надсилає компонент на всі 35 мов одночасно.

2. Додайте вимір мов. У Pages змініть шаблон на /{language}/{airport_code}. Додайте Dynamic Segment Mapping для language → вбудованого системного компонента language, поле slug code. Збережіть і переконайтеся, що /en/JFK відкривається.

   

   Додавання сегмента {language} до маршруту.

3. Підключіть кожне поле, що перекладається, до перекладеного запиту. Інтернаціоналізація сторінки означає, що кожне мовозалежне поле — не лише заголовок — має перейти з 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 уже перекладені на кроці 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

Імпортуйте в Vercel: Add New → Project → імпортуйте репозиторій 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 запускає повторне розгортання.

2. Живий попередній перегляд і редагування на місці

Обидві функції входять до шаблону.

• Живий попередній перегляд: <Refresher> у layout.tsx оновлює сторінку, яку ви переглядаєте, коли в адмінці зберігаються зміни — без повторного розгортання.
• Редагування на місці: додайте ?edit_mode=true до будь-якого URL (наприклад, …/en/JFK?edit_mode=true), щоб увімкнути накладки для редагування. Публічні відвідувачі бачать чисту сторінку.

?edit_mode=true накладає інтерфейс редагування на живу сторінку.

Ось і вся збірка

П'ятдесят аеропортів, 35 мов, усе в онлайні — описано один раз і заповнюється даними: один маршрут, чотири компоненти React і кілька прив'язок CEL. CMS зберігає контент, ваш код його рендерить, а CEL поєднує їх.