Build & Ship an Airport Directory

בנו מדריך שדות תעופה אמיתי ומותאם בינלאומית ב-Profound CMS: תבנית URL אחת שמרנדרת עמוד עבור כל שדה תעופה, ב-35 שפות. אתם כותבים את קוד Next.js ובונים ידנית את מבנה ה-CMS; Claude Code (באמצעות Profound MCP) מטפל בשלושה תפקידים — יצירת נתוני שדות התעופה, חיבור מערכת העיצוב, והפקת ארבעת רכיבי React. שלושה חלקים: הקמה, בנייה, הפקה.

צפו בסרטון ההדרכה המלא.

מה תבנו

• כ~50 רשומות של שדות תעופה, כל אחת ב-URL משלה.
• מסלול פרמטרי אחד /{language}/{airport_code}.
• ארבעה רכיבי UI — ניווט, כותרת, גוף, פוטר — מרונדרים על ידי 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 הופך אותו לניתן למיקום בעמוד; רכיבי System (כמו language) מגיעים מובנים.
• ווריאנטים הם התוכן (JFK, SFO, LAX…).
• רכיבי UI הם מקטעי העמוד, מלאים באמצעות CEL — סקריפטינג בתוך התבנית של Profound, המוערך בזמן הרינדור.
• מסלול פרמטרי ממפה URL לווריאנט ולמערך של רכיבי UI.
• אפליקציית 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 (type) בקובץ 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 כ-connected, בקשו מ-Claude:

צור חמישים שדות תעופה אמיתיים — קודי IATA תקינים, שמות, ערים, מדינות וקואורדינטות. שמור אותם כ-JSON בתיקיית data, אמת מול רכיב ה-airport שלנו, ולאחר מכן צור כל אחד כ-document שפורסם דרך 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 — בנייה

בנו את שכבת הרינדור: רכיבי ה-UI, רכיבי React, המסלול, כריכות ה-CEL, והתרגום.

1. הגדירו את ארבעת רכיבי ה-UI

בממשק הניהול, 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 כדי להתאים לרכיב ה-airport.

כל רכיב UI הוא רכיב בפני עצמו — כאן body, מוגדר כ-Active עם תג UI Element.

כל ארבעת רכיבי ה-UI לצד רכיב airport.

2. צרו מחדש את הסוגים

bun run generate-schemas

3. צרו את רכיבי React ורשמו אותם

בקשו מ-Claude:

בנה ארבעה רכיבי React — nav, headline, body, footer — בתיקיית components/. כל אחד מקבל prop יחיד content עם טיפוס BlockComponentProps<T> מתוך cms-renderer/lib/types, כאשר T הוא הטיפוס הגנרי של הרכיב שנוצר, וקורא לשדות מתוך content. רשום את כולם ברג'יסטרי של מסלול התפיסה הכללית לפי שם הרכיב. עצב אותם עם מערכת העיצוב שלנו, בתור רכיבים משלנו — בלי להעתיק את פריסת אתר המקור. Nav: המותג משמאל. Headline: שם שדה התעופה עם כותרת משנה code · city, country. Body: פאנל פרטים עם code, city, country והקואורדינטות. Footer: שורה סטטית אחת. רק פריסה ועיצוב.

Claude יוצר את כל ארבעת הרכיבים וממלא את הרג'יסטרי ב-src/app/[...slug]/page.tsx:

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

שני חוקים: כל רכיב קורא לשדות מתוך content (לא כ-props נפרדים), ומפתחות הרג'יסטרי חייבים להתאים בדיוק לשמות רכיבי ה-CMS — חוסר התאמה יביא לרינדור ריק.

4. צרו את המסלול הפרמטרי

בממשק הניהול, עברו אל Pages → Create page והגדירו את התבנית /{airport_code}. תחת Dynamic Segment Mappings, מיפו airport_code → רכיב airport, שדה slug code. שמרו — תועברו אל Page Builder. ודאו ש-/JFK נטען.

5. הוסיפו רכיבי UI, חברו CEL ופרסמו

הוספת רכיב UI לעמוד מהלשונית Custom.

ארבעת רכיבי ה-UI שנוספו לביינדינג של 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. תרגמו את הרכיבים תחילה. בממשק הניהול, פתחו כל רכיב (כל רכיב — לא חייב להיות UI) ולחצו 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 והקואורדינטות על documents.get — הם זהים בכל שפה. nav.brand ו-footer.text כבר מכוסים על ידי התרגום של הרכיב בשלב 1.

כאשר כל שלושת השלבים הושלמו, /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> שמעדכן את העמוד שאתם מתצפתים בו כאשר אתם עורכים ושומרים בממשק הניהול — ללא פריסה מחדש.
• עריכה במקום: הוסיפו ?edit_mode=true לכל URL (לדוגמה …/en/JFK?edit_mode=true) לקבלת שכבות עריכה. מבקרים רגילים עדיין רואים עמוד נקי.

?edit_mode=true מוסיף את העורך על העמוד החי.

זה הפרויקט

חמישים שדות תעופה, 35 שפות, בזמן אמת — מתוארים פעם אחת ומוזנים בנתונים: מסלול אחד, ארבעה רכיבי React, וכמה כריכות CEL. ה-CMS מחזיק את התוכן, הקוד שלכם מרנדר אותו, ו-CEL מחבר ביניהם.