Build & Ship an Airport Directory

Profound CMS पर एक वास्तविक, अंतर्राष्ट्रीयकृत एयरपोर्ट निर्देशिका बनाएँ: 35 भाषाओं में प्रत्येक एयरपोर्ट के लिए एक पेज रेंडर करने वाला एक URL पैटर्न। आप Next.js कोड लिखते हैं और CMS संरचना खुद तैयार करते हैं; Claude Code (Profound MCP के माध्यम से) तीन कार्य संभालता है — एयरपोर्ट डेटा तैयार करना, एक डिज़ाइन सिस्टम जोड़ना, और चार React कंपोनेंट्स बनाना। तीन भाग: सेटअप, बिल्ड, प्रोडक्शन।

पूरा वीडियो वॉकथ्रू देखें।

आप क्या बनाएँगे

• ~50 एयरपोर्ट रिकॉर्ड, प्रत्येक अपने अलग URL पर।
• एक पैरामेट्रिक रूट /{language}/{airport_code}।
• चार UI एलीमेंट — नेव, हेडलाइन, बॉडी, फुटर — जिन्हें cms-renderer रेंडर करता है।
• CEL बाइंडिंग के माध्यम से लाइव CMS डेटा।
• सभी 35 भाषाएँ, एक ही क्लिक में अनूदित।
• Vercel पर परिनियोजित, लाइव प्रीव्यू और इन-प्लेस एडिटिंग के साथ।

पूर्वापेक्षाएँ

• Bun ≥ 1.3 — curl -fsSL https://bun.sh/install | bash
• Claude Code जिसमें Profound MCP जुड़ा हो (भाग 1)।
• एक Profound CMS खाता।
• भाग 3 के लिए: GitHub CLI (gh) लॉगिन किया हुआ, और GitHub से जुड़ा Vercel खाता।

यह सब कैसे जुड़ता है

• कंपोनेंट्स सामग्री का आकार परिभाषित करते हैं। एक रूट स्लग फ़ील्ड कंपोनेंट को रूट करने योग्य बनाता है; एक UI Element टैग उसे पेज पर प्लेस करने योग्य बनाता है; System कंपोनेंट्स (जैसे language) बिल्ट-इन आते हैं।
• वेरिएंट्स ही सामग्री हैं (JFK, SFO, LAX… )।
• UI एलीमेंट्स पेज सेक्शन हैं, जिन्हें CEL से भरा जाता है — Profound की इन-टेम्पलेट स्क्रिप्टिंग, जो रेंडर पर मूल्यांकन होती है।
• एक पैरामेट्रिक रूट URL को एक वेरिएंट और UI एलीमेंट्स के सेट से मैप करता है।
• आपका Next.js ऐप cms-renderer SDK के माध्यम से एक रीड-टियर API कुंजी के साथ सब रेंडर करता है।

भाग 1 — सेटअप

अंत स्थिति: CMS में ~50 एयरपोर्ट, ऐप उन्हें पढ़ने के लिए कनेक्टेड, और डिज़ाइन सिस्टम स्थापित।

1. वेबसाइट बनाएँ

Profound (WorkOS ऑथ) पर साइन अप करें और airports नाम की वेबसाइट बनाएँ। दो चीजें कॉपी करें: website 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। छह फ़ील्ड जोड़ें: code, name, city, country (Text) और latitude, longitude (Number)। code को Route Slug फ़ील्ड के रूप में मार्क करें और स्टेटस Active पर सेट करें। हर फ़ील्ड को वैकल्पिक छोड़ें; कोई UI Element टैग न जोड़ें।

airport कंपोनेंट — छह फ़ील्ड, जिनमें code को Route Slug के रूप में सेट किया गया है।

4. कंपोनेंट को टाइप्स में खींचें

bun run generate-schemas

यह generated/cms-schemas.ts में airportSchema (Zod) और Airport (type) लिखता है, और पुष्टि करता है कि आपकी क्रेडेंशियल काम कर रही हैं।

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 को प्रॉम्प्ट दें:

पचास वास्तविक एयरपोर्ट जनरेट करें — सही IATA कोड, नाम, शहर, देश, और निर्देशांक। उन्हें JSON में data फ़ोल्डर में सहेजें, हमारे airport कंपोनेंट के विरुद्ध सत्यापित करें, फिर Profound MCP के माध्यम से प्रत्येक को प्रकाशित दस्तावेज़ के रूप में, समानांतर में बनाएँ।

airport → Variants खोलें और लगभग 50 प्रकाशित एयरपोर्ट देखें। ऐप API कुंजी से पढ़ता है; MCP अपना स्वयं का WorkOS सत्र लेकर लिखता है।

लगभग 50 एयरपोर्ट, प्रकाशित वेरिएंट के रूप में सीड किए गए।

6. एक डिज़ाइन सिस्टम जोड़ें

स्कैफोल्ड बिना स्टाइल के आता है। प्रोजेक्ट रूट पर एक DESIGN.md रखें (Tailwind v4 का @theme ब्लॉक और टोकन) — अपना बनाएँ, या 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 करें, और Settings → Tags में UI Element टैग जोड़ें:

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

body.latitude और body.longitude को Number ही होना चाहिए ताकि एयरपोर्ट कंपोनेंट से मेल खाएँ।

प्रत्येक UI एलीमेंट अपना अलग कंपोनेंट है — यहाँ body, Active सेट और UI Element टैग के साथ।

चारों UI एलीमेंट airport कंपोनेंट के साथ सूची में दिखते हैं।

2. टाइप्स दोबारा जनरेट करें

bun run generate-schemas

3. React कंपोनेंट्स जनरेट करें और रजिस्टर करें

Claude को प्रॉम्प्ट दें:

चार React कंपोनेंट्स — nav, headline, body, footer — components/ में बनाएँ। प्रत्येक BlockComponentProps<T> (जहाँ T उस एलीमेंट का जेनरेटेड टाइप है) प्रकार के एकल content प्रॉप ले और उसके फ़ील्ड content से पढ़े। चारों को कैच-ऑल रूट की रजिस्ट्री में कंपोनेंट नाम से रजिस्टर करें। हमारे डिज़ाइन सिस्टम से स्टाइल करें, लेकिन अपने स्वयं के कंपोनेंट रूप में — सोर्स साइट का लेआउट कॉपी न करें। 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 कंपोनेंट, स्लग फ़ील्ड code मैप करें। सेव करें — आप Page Builder में पहुँचते हैं। जाँचें कि /JFK रिजॉल्व होता है।

5. UI एलीमेंट जोड़ें, CEL वायर करें, और प्रकाशित करें

Custom टैब से पेज में UI एलीमेंट जोड़ना।

Page Builder में JFK बाइंडिंग पर चार UI एलीमेंट जुड़े हुए हैं।

1. JFK बाइंडिंग चुनें → Add UI Element → Custom टैब → क्रम से nav, headline, body, footer जोड़ें। Profound यह सेट हर एयरपोर्ट बाइंडिंग में प्रसारित करता है।

2. प्रत्येक फ़ील्ड भरें। स्थिर मान (nav brand, footer text): सीधे टाइप करें। डाइनैमिक मान: डायनेमिक पर स्विच करें और 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. हर अनुवाद-योग्य फ़ील्ड को अनूदित फ़ेच पर पॉइंट करें। पेज को अंतर्राष्ट्रीयकृत करने का मतलब है हर भाषा-निर्भर फ़ील्ड — सिर्फ़ हेडलाइन नहीं — को 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

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 पर ?edit_mode=true जोड़ें (जैसे …/en/JFK?edit_mode=true) ताकि एडिट ओवरले दिखाई दें। सार्वजनिक विज़िटर साफ पेज ही देखते हैं।

?edit_mode=true लाइव पेज पर एडिटर ओवरले लगाता है।

बस इतना ही बिल्ड है

पचास एयरपोर्ट, 35 भाषाएँ, लाइव — एक बार वर्णित और डेटा से भरा हुआ: एक रूट, चार React कंपोनेंट, और कुछ CEL बाइंडिंग। CMS सामग्री को संभालता है, आपका कोड उसे रेंडर करता है, और CEL दोनों को जोड़ता है।