Build & Ship an Airport Directory

สร้าง ไดเร็กทอรีสนามบิน ที่ใช้งานได้จริงและรองรับหลายภาษาบน Profound CMS: รูปแบบ URL เดียวที่เรนเดอร์หน้าสำหรับทุกสนามบินใน 35 ภาษา คุณเขียนโค้ด Next.js และสร้างโครงสร้าง CMS ด้วยตัวเอง; Claude Code (ผ่าน Profound MCP) รับผิดชอบสามงาน — สร้างข้อมูลสนามบิน, เชื่อมระบบดีไซน์, และสร้างคอมโพเนนต์ React ทั้งสี่ มีสามส่วน: การตั้งค่า, การพัฒนา, การขึ้นระบบจริง.

ชมวิดีโอสาธิตแบบเต็ม.

สิ่งที่คุณจะสร้าง

• บันทึกสนามบินประมาณ 50 แห่ง แต่ละแห่งอยู่ที่ URL ของตัวเอง
• เส้นทางแบบพารามิเตอร์หนึ่งเส้น /{language}/{airport_code}
• องค์ประกอบ UI สี่ตัว — nav, headline, body, footer — เรนเดอร์ด้วย 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

ระบบทำงานร่วมกันอย่างไร

• Components กำหนดโครงสร้างเนื้อหา ช่อง Route Slug ทำให้คอมโพเนนต์เข้าสู่เส้นทางได้; แท็ก UI Element ทำให้วางบนหน้าได้; คอมโพเนนต์ System (เช่น language) มีมาให้ในระบบ
• Variants คือเนื้อหา (JFK, SFO, LAX…)
• UI elements คือส่วนต่างๆ ของหน้า เติมด้วย CEL — สคริปต์ในเทมเพลตของ Profound ที่ประมวลผลขณะเรนเดอร์
• เส้นทางแบบพารามิเตอร์จะจับคู่ URL กับตัวแปรหนึ่งชุดและชุดของ UI elements
• แอป Next.js ของคุณเรนเดอร์ทั้งหมดผ่าน SDK cms-renderer ด้วยคีย์ API ระดับอ่าน

ส่วนที่ 1 — การตั้งค่า

สภาพปลายทาง: สนามบินประมาณ 50 แห่งอยู่ใน CMS, แอปเชื่อมต่อเพื่ออ่านข้อมูล, และระบบดีไซน์ถูกติดตั้ง

1. สร้างเว็บไซต์

สมัครที่ Profound (WorkOS auth) และสร้างเว็บไซต์ชื่อ airports คัดลอกสองอย่าง: รหัสเว็บไซต์ (UUID ใน URL ผู้ดูแล) และคีย์ API ระดับอ่านจาก Deployments → Create API key แอปอ่านอย่างเดียวจึงต้องการเพียงคีย์อ่าน

2. สร้างสโคฟและเชื่อมต่อแอป

bunx create-profound-next airports
cd airports

เพิ่มข้อมูลรับรองลงใน .env.local:

PROFOUND_API_KEY=<คีย์อ่านของคุณ>
NEXT_PUBLIC_PROFOUND_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. ดึงคอมโพเนนต์เข้าสู่ types

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 เชื่อมต่อแล้ว ให้สั่ง Claude:

สร้างข้อมูลสนามบินจริงจำนวนห้าสิบแห่ง — พร้อมรหัส IATA, ชื่อ, เมือง, ประเทศ, และพิกัดที่ถูกต้อง บันทึกเป็น JSON ในโฟลเดอร์ data, ตรวจสอบกับคอมโพเนนต์สนามบินของเรา, จากนั้นสร้างเป็นเอกสารที่เผยแพร่ผ่าน Profound MCP พร้อมกัน

เปิด airport → Variants เพื่อยืนยันว่ามีสนามบินที่เผยแพร่ประมาณ 50 แห่ง แอปอ่านด้วยคีย์ API; MCP เขียนด้วยเซสชัน WorkOS ของตัวเอง

สนามบินประมาณ 50 แห่ง ถูกเติมเป็น Variants ที่เผยแพร่แล้ว.

6. เพิ่มระบบดีไซน์

สโคฟที่สร้างมาไม่มีการตกแต่ง ให้วางไฟล์ DESIGN.md (บล็อก @theme ของ Tailwind v4 พร้อมโทเค็น) ไว้ที่รากโปรเจ็กต์ — จะเขียนเองหรือดาวน์โหลดจาก refero.design ก็ได้ จากนั้นสั่ง Claude:

อ่าน DESIGN.md ตั้งค่า Tailwind v4 และเชื่อมธีมกับฟอนต์ ใช้ next/font สำหรับฟอนต์ ไม่ต้องดึงจาก Google runtime จัดสไตล์เท่านั้น — ยังไม่ต้องทำเพจหรือคอมโพเนนต์

ตรวจสอบว่า src/app/globals.css มี @import "tailwindcss"; และบล็อก @theme แล้ว และ localhost:3000 แสดงโทเค็น

ส่วนที่ 2 — การพัฒนา

สร้างเลเยอร์เรนเดอร์: UI elements, คอมโพเนนต์ React, เส้นทาง, บายนด์ CEL, และการแปลภาษา

1. กำหนดคอมโพเนนต์ UI element ทั้งสี่

ในหน้าผู้ดูแล 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 เพื่อให้ตรงกับคอมโพเนนต์สนามบิน

แต่ละ UI element เป็นคอมโพเนนต์ของตัวเอง — ในภาพคือ body ตั้งค่า Active และมีแท็ก UI Element.

UI elements ทั้งสี่อยู่ร่วมกับคอมโพเนนต์ airport.

2. สร้าง types อีกครั้ง

bun run generate-schemas

3. สร้างคอมโพเนนต์ React และลงทะเบียน

สั่ง Claude:

สร้างคอมโพเนนต์ React สี่ตัว — nav, headline, body, footer — ในโฟลเดอร์ components/ แต่ละตัวรับพร็อป content เพียงตัวเดียว โดยพิมพ์เป็น BlockComponentProps<T> จาก cms-renderer/lib/types ซึ่ง T คือ type ที่สร้างจากแต่ละ element และอ่านฟิลด์จาก content ลงทะเบียนทั้งสี่ในเรจิสทรีของเส้นทาง catch-all ตามชื่อคอมโพเนนต์ จัดสไตล์ด้วยระบบดีไซน์ของเรา แต่สร้างเป็นคอมโพเนนต์ของเราเอง — ไม่ต้องคัดลอกเลย์เอาต์ของเว็บไซต์ต้นทาง 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 (ไม่ส่งเป็นพร็อปแยก) และคีย์ในเรจิสทรีต้องตรงกับชื่อคอมโพเนนต์ใน CMS ทุกตัว — ถ้าไม่ตรงจะไม่เรนเดอร์

4. สร้างเส้นทางแบบพารามิเตอร์

ในหน้าผู้ดูแล ไปที่ Pages → Create page แล้วตั้ง pattern เป็น /{airport_code} ภายใต้ Dynamic Segment Mappings แมป airport_code → คอมโพเนนต์ airport, ช่อง slug คือ code บันทึก — คุณจะเข้าสู่ Page Builder ตรวจสอบว่า /JFK เปิดได้

5. เพิ่ม UI elements, เชื่อม CEL, และเผยแพร่

เพิ่ม UI element ลงหน้าจากแท็บ Custom.

UI elements ทั้งสี่ถูกเพิ่มให้กับ binding ของ JFK ใน Page Builder.

1. เลือก binding JFK → Add UI Element → แท็บ Custom → เพิ่ม nav, headline, body, footer ตามลำดับ Profound จะเผยแพร่ชุดเดียวกันไปยัง binding ของสนามบินทุกแห่ง

2. กรอกแต่ละฟิลด์ ค่าคงที่ (nav brand, footer text): พิมพ์ได้เลย ค่าไดนามิก: สลับเป็น dynamic แล้วเขียน 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 element) แล้วคลิก Translate → Submit Profound จะแปลเนื้อหาให้ครบ 35 ภาษาในครั้งเดียว รวมถึงค่าคงที่ในฟิลด์ ทำขั้นตอนนี้ ก่อน ที่คุณจะปรับเส้นทางหรือแก้ CEL ใดๆ

   

   Translate → Submit ส่งคอมโพเนนต์ไปแปลครบ 35 ภาษาในครั้งเดียว.

2. เพิ่มมิติภาษา ใน Pages เปลี่ยน pattern เป็น /{language}/{airport_code} เพิ่ม Dynamic Segment Mapping สำหรับ language → คอมโพเนนต์ระบบ language ช่อง slug คือ code บันทึกและตรวจสอบว่า /en/JFK เปิดได้

   

   เพิ่มเซกเมนต์ {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 แปลแล้วตั้งแต่ขั้นตอน 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. Live preview และการแก้ไขบนหน้า

ทั้งสองอย่างมาพร้อมสโคฟ

• Live preview: <Refresher> ใน layout.tsx จะอัปเดตหน้าที่คุณพรีวิวเมื่อแก้ไขและบันทึกในหน้าผู้ดูแล — ไม่ต้องดีพลอยใหม่
• การแก้ไขบนหน้า: เพิ่ม ?edit_mode=true ต่อท้าย URL ใดก็ได้ (เช่น …/en/JFK?edit_mode=true) เพื่อให้มีโอเวอร์เลย์สำหรับแก้ไข ผู้เยี่ยมชมทั่วไปยังคงเห็นหน้าเรียบสะอาด

?edit_mode=true จะแสดงโอเวอร์เลย์ของเครื่องมือแก้ไขบนหน้าจริง.

จบกระบวนการ

สนามบินห้าสิบแห่ง รองรับ 35 ภาษา แบบสด — อธิบายครั้งเดียวแล้วเติมด้วยข้อมูล: เส้นทางเดียว, คอมโพเนนต์ React สี่ตัว, และบายนด์ CEL ไม่กี่ชุด CMS เก็บเนื้อหา โค้ดของคุณเรนเดอร์ และ CEL เชื่อมทุกอย่างเข้าด้วยกัน