Build & Ship an Airport Directory

Profound CMS 上で本物の多言語対応の空港ディレクトリを構築します。ひとつの URL パターンで 35 言語のすべての空港ページをレンダリングします。Next.js のコードを書くのも、CMS 構造を手作業で組むのもあなたの役割。Claude Code（Profound MCP 経由）は 3 つの作業 — 空港データの生成、デザインシステムの接続、React コンポーネント 4 つの生成 — を担当します。3 つのパート：セットアップ、ビルド、本番運用。

完全なビデオウォークスルーを見る。

作るもの

• 約 50 件の空港レコード。それぞれが固有の URL を持つ。
• パラメトリックルート /{language}/{airport_code} を 1 つ。
• 4 つの UI 要素 — ナビ、見出し、本文、フッター — を cms-renderer がレンダリング。
• CEL バインディングを介したライブ CMS データ。
• 35 言語すべてをワンクリックで翻訳。
• ライブプレビューとインプレース編集を備えた Vercel へのデプロイ。

前提条件

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Profound MCP と接続済みの Claude Code（パート 1）。
• Profound CMS アカウント。
• パート 3 用：サインイン済みの GitHub CLI (gh) と GitHub にリンクした Vercel アカウント。

全体像

• コンポーネントはコンテンツの構造を定義します。ルートスラッグフィールドでコンポーネントをルーティング可能にし、UI Element タグでページに配置可能にします。System コンポーネント（language など）は標準搭載です。
• バリアントが実際のコンテンツ（JFK、SFO、LAX…）。
• UI 要素はページセクションで、レンダリング時に評価される Profound のテンプレート内スクリプト CEL で埋められます。
• パラメトリックルートは URL をバリアントと UI 要素のセットにマッピングします。
• Next.js アプリはリード階層 API キーを用いて cms-renderer SDK からすべてをレンダリングします。

パート 1 — セットアップ

最終状態：CMS に約 50 件の空港データが存在し、アプリはそれを読み込み、デザインシステムが組み込まれている。

1. ウェブサイトを作成する

Profound（WorkOS 認証）にサインアップし、airports という名前のウェブサイトを作成します。2 つコピーします：ウェブサイト ID（管理画面 URL の UUID）と、Deployments → Create API key から リード階層 API キー。アプリは読み取りのみなのでリードキーだけで十分です。

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 と名付けます。6 つのフィールド code、name、city、country（Text）、latitude、longitude（Number）を追加します。code を Route Slug フィールドに設定し、ステータスを Active にします。すべてのフィールドを任意のままにし、UI Element タグは追加しません。

airport コンポーネント — 6 つのフィールドがあり、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 を選んでブラウザでサインインを完了します — Profound のツールが初めて呼び出されるときは Claude Code が自動的に促します。/mcp で Profound が connected と表示されたら、Claude に次のように促します：

実在する空港を 50 件生成してください — 正しい IATA コード、名称、都市、国、座標付きで。data フォルダーに JSON として保存し、airport コンポーネントに対してバリデーションしたうえで、公開済みドキュメントとして Profound MCP 経由で並列作成してください。

管理画面の airport → Variants を開いて、約 50 件の公開済み空港を確認します。アプリは API キーで読み取り、MCP は独自の WorkOS セッションで書き込みます。

公開済みバリアントとして投入された約 50 件の空港。

6. デザインシステムを追加する

スキャフォールドはスタイルが未設定です。プロジェクトルートに DESIGN.md（Tailwind v4 の @theme ブロックとトークン）を配置します — 自作しても、refero.design からダウンロードしても構いません。その後 Claude に次のように促します：

DESIGN.md を読み込み、Tailwind v4 をセットアップしてテーマとフォントを組み込んでください。フォントにはランタイムの Google インポートではなく next/font を使用します。スタイリングのみで、ページやコンポーネントは不要です。

src/app/globals.css に @import "tailwindcss"; と @theme ブロックが含まれ、localhost:3000 にトークンが表示されることを確認します。

パート 2 — ビルド

レンダリングレイヤーを構築します：UI 要素、React コンポーネント、ルート、CEL バインディング、翻訳。

1. 4 つの UI 要素コンポーネントを定義する

管理画面でコンポーネントを 4 回 Create new component（Route Slug は不要）します。各コンポーネントについて、フィールドは Text（指定がある場合は除く）で追加し、ステータスを Active にし、Settings → Tags で UI Element タグを付けます：

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

body.latitude と body.longitude は airport コンポーネントと一致させるため Number にする必要があります。

各 UI 要素は単独のコンポーネント — ここでは body が Active で UI Element タグ付き。

4 つの UI 要素が airport コンポーネントと並んでいます。

2. 型を再生成する

bun run generate-schemas

3. React コンポーネントを生成して登録する

Claude に次のように促します：

components/ に nav、headline、body、footer の 4 つの React コンポーネントを構築してください。それぞれで content プロップ 1 つだけを受け取り、型は cms-renderer/lib/types の BlockComponentProps<T>（ここで T は生成済み型）とし、フィールドは content から読み取ります。キャッチオールルートのレジストリにコンポーネント名で全コンポーネントを登録してください。デザインシステムでスタイリングしますが、独自コンポーネントとして作り、ソースサイトのレイアウトはコピーしないでください。ナビ：ブランドを左寄せ。見出し：空港名と code · city, country のサブタイトル。本文：コード、都市、国、座標の詳細パネル。フッター：固定の 1 行。レイアウトとスタイリングのみです。

Claude は 4 つのコンポーネントを作成し、src/app/[...slug]/page.tsx のレジストリを次のように設定します：

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

ルールは 2 つ：各コンポーネントはフィールドを content から読み取ること（個別プロップとして渡さない）、レジストリキーは CMS のコンポーネント名と完全一致させること — 不一致のままだと何もレンダリングされません。

4. パラメトリックルートを作成する

管理画面で Pages → Create page に進み、パターンを /{airport_code} に設定します。Dynamic Segment Mappings で airport_code を airport コンポーネント（スラッグフィールド code）にマッピングします。保存すると Page Builder に移動します。/JFK が解決することを確認します。

5. UI 要素を追加し、CEL を接続して公開する

カスタムタブからページに UI 要素を追加します。

Page Builder の JFK バインディングに 4 つの UI 要素が追加されています。

1. JFK バインディングを選択 → Add UI Element → Custom タブ → nav、headline、body、footer の順に追加します。Profound はこのセットを全空港バインディングに反映します。

2. 各フィールドを埋めます。静的値（nav のブランド、footer のテキスト）は直接入力。動的値はダイナミックに切り替えて 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. ページ（右上）を Publish します。

6. 英語版を確認する

localhost:3000/JFK を開き、続いて /SFO、/LAX を確認します — 同じテンプレートで空港データだけが異なります。

JFK のデータが英語でレンダリングされた完成ページ。

7. 多言語化する

1. まずコンポーネントを翻訳します。 管理画面で各コンポーネント（UI 要素でなくても可）を開き、Translate → Submit をクリックします。Profound は 35 言語すべてに一度で翻訳し、静的フィールド値も含まれます。ルートを編集したり CEL に触れたりする前に実施してください。

   

   Translate → Submit で 35 言語へ一括翻訳を送信します。

2. 言語ディメンションを追加します。 Pages でパターンを /{language}/{airport_code} に変更します。language の Dynamic Segment Mapping を組み込みの language System コンポーネント（スラッグフィールド code）に追加します。保存後、/en/JFK が解決することを確認します。

   

   ルートに {language} セグメントを追加。

3. 翻訳対象のすべてのフィールドを翻訳 fetch に向けます。 ページを国際化するには、言語依存フィールドすべて — 見出しだけでなく — を 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 のコンポーネント翻訳ですでに対応済みです。

3 つすべて完了すると、/fr/SFO や /de/SFO などが完全に翻訳された状態で表示されます。

パート 3 — 本番運用

1. デプロイ：GitHub から Vercel へ

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. ライブプレビューとインプレース編集

どちらもスキャフォールドに同梱されています。

• ライブプレビュー：layout.tsx の <Refresher> は管理画面で編集・保存するとプレビューしているページを更新します — 再デプロイ不要。
• インプレース編集：任意の URL（例：…/en/JFK?edit_mode=true）に ?edit_mode=true を付与すると編集オーバーレイが表示されます。一般公開の訪問者にはクリーンなページが表示されます。

?edit_mode=true はライブページ上にエディタをオーバーレイ表示します。

完成

50 件の空港、35 言語、ライブ配信 — データで満たされたたった 1 本のルート、4 つの React コンポーネント、そして少量の CEL バインディング。CMS がコンテンツを保持し、あなたのコードがレンダリングし、CEL が両者をつなぎます。