ภาพรวม

สิ่งที่จะสร้าง

DevBlog คือระบบ headless CMS ที่มีบล็อกสาธารณะอยู่ด้านบน คำว่า “headless” หมายถึงที่เก็บเนื้อหากับ API แยกออกจากวิธีแสดงผลเนื้อหา ผู้เขียนสร้างและจัดการโพสต์ผ่าน admin dashboard ตัวโพสต์อยู่ในฐานข้อมูลหลัง GraphQL API แล้วมี frontend หนึ่งตัวหรือมากกว่าอ่านจาก API นั้นไปเรนเดอร์หน้าเพจให้ผู้ชมสาธารณะ

เมื่อจบคอร์สคุณจะได้ repository เดียวที่รันได้ด้วยคำสั่งเดียว — docker compose up — แล้วสตาร์ตสามเซอร์วิส ได้แก่ ฐานข้อมูล MongoDB, NestJS GraphQL API และเว็บแอป Next.js ที่ให้บริการทั้งบล็อกสาธารณะและ admin dashboard

ทำไม

ทิวทอเรียลส่วนใหญ่สร้างบล็อกของเล่น — โปรเซสเดียว โพสต์ฮาร์ดโค้ดไม่กี่อัน ไม่มี auth ไม่มีการตรวจสอบเนื้อหา ไม่มีเรื่องการ deploy ส่วน DevBlog ตั้งใจให้ใกล้เคียงกับสิ่งที่ทีมเนื้อหาจริง ๆ ส่งมอบมากกว่านั้น คือแยกคนที่ เขียน เนื้อหาออกจากคนที่ อ่าน วาง API ที่มี type คั่นระหว่างฐานข้อมูลกับ UI และมองการเผยแพร่กับการตรวจสอบคอมเมนต์เป็นเวิร์กโฟลว์ระดับหนึ่ง ไม่ใช่ของแถมที่คิดทีหลัง

เส้นทางจากผู้เขียนถึงผู้อ่าน อธิบายเป็นคำพูด:

1. ผู้เขียน ล็อกอินเข้า admin dashboard (ด้วย JWT auth) แล้วเขียนโพสต์ด้วย Markdown ใส่ แท็ก และบันทึกเป็นฉบับร่าง (draft)
2. เมื่อโพสต์พร้อม ผู้เขียนกด เผยแพร่ (publish) API จะบันทึกว่าโพสต์เผยแพร่แล้วพร้อม timestamp
3. ผู้อ่าน เข้ามาที่บล็อกสาธารณะ Next.js เรนเดอร์โพสต์บนเซิร์ฟเวอร์ (SSR) หรือส่งหน้าที่เรนเดอร์ล่วงหน้าและอัปเดตแบบค่อยเป็นค่อยไป (ISR) โดยดึงเนื้อหาจาก GraphQL API
4. ผู้อ่านทิ้ง คอมเมนต์ ไว้ คอมเมนต์เข้ามาในสถานะ รอตรวจสอบ (pending) และยังไม่แสดงต่อสาธารณะจนกว่าผู้เขียนจะ ตรวจสอบ (moderate) — อนุมัติหรือปฏิเสธจาก dashboard

ข้อดีข้อเสีย

สิ่งที่การออกแบบนี้ให้คุณ

• แยกการเขียนเนื้อหาออกจากการส่งมอบเนื้อหาอย่างชัดเจน ทำให้แคชหน้าสาธารณะได้หนักและยังเร็ว ส่วน admin UI ยังคงเป็น dynamic
• contract ที่มี type ชุดเดียว (GraphQL schema) ที่ frontend ทั้งสองตัวและ client ในอนาคตใช้ร่วมกัน
• เวิร์กโฟลว์ที่สมจริง — draft, publish, แท็ก และการตรวจสอบคอมเมนต์ — ที่สะท้อนพฤติกรรม CMS ระดับ production

สิ่งที่ต้องแลกมา

• มีชิ้นส่วนที่ต้องดูแลมากกว่าระบบ monolith: ฐานข้อมูล, API และเว็บแอป แทนที่จะเป็นเซิร์ฟเวอร์เดียว
• คุณต้องดูแล schema และเลเยอร์ auth ที่ไซต์ static ล้วน ๆ ไม่จำเป็นต้องมี
• ผู้ใช้สองกลุ่ม (ผู้เขียนและผู้อ่าน) หมายถึงสอง UI และกฎการเข้าถึงสองชุดที่ต้องคิด

สำหรับเว็บส่วนตัว static generator จะเรียบง่ายกว่า DevBlog คุ้มกับโครงสร้างที่เพิ่มขึ้นก็ต่อเมื่อเนื้อหาถูกเขียนโดยคนที่ไม่ใช่นักพัฒนาและอัปเดตอย่างต่อเนื่อง

ติดตั้ง

บทเรียนนี้ไม่มีอะไรต้องติดตั้ง — นั่นเป็นบทถัดไป ตรงนี้คุณแค่ต้องมี mental model ข้างต้น: เขียน → เผยแพร่ → อ่าน → คอมเมนต์ → ตรวจสอบ โดยมี GraphQL เป็น contract ตรงกลางและ MongoDB เป็นที่เก็บอยู่ข้างใต้

รายการฟีเจอร์ที่คุณจะสร้าง ทีละโมดูล:

• โพสต์ Markdown — ผู้เขียนเขียนด้วย Markdown; API เก็บ Markdown ดิบไว้ แล้ว frontend เป็นตัวเรนเดอร์
• แท็ก — จัดหมวดหมู่โพสต์ด้วยแท็ก และบล็อกสาธารณะเปิดให้เรียกดูตามแท็กได้
• คอมเมนต์พร้อมการตรวจสอบ — ผู้อ่านคอมเมนต์; ผู้เขียนอนุมัติหรือปฏิเสธก่อนแสดงต่อสาธารณะ
• GraphQL API — API แบบ code-first ที่มี type สร้างด้วย NestJS และ Apollo
• บล็อกสาธารณะแบบ SSR/ISR — ไซต์สาธารณะที่เร็วและเป็นมิตรกับ SEO เรนเดอร์ด้วย Next.js App Router
• Admin dashboard — UI ที่ต้องยืนยันตัวตนสำหรับเขียน เผยแพร่ ใส่แท็ก และตรวจสอบเนื้อหา

ตรวจสอบผล

คุณมี mental model ที่ถูกต้องแล้วถ้าตอบคำถามเหล่านี้ได้โดยไม่ต้องเลื่อนขึ้นไปดู:

• โพสต์อยู่ที่ไหนระหว่างตอนเขียนกับตอนอ่าน? อยู่ใน MongoDB หลัง GraphQL API
• อะไรต้องเกิดขึ้นก่อนผู้อ่านจะเห็นคอมเมนต์? ผู้เขียนต้องตรวจสอบ (อนุมัติ) คอมเมนต์นั้นก่อน
• ทำไมถึงมีสอง UI? อันหนึ่งคือบล็อกสาธารณะที่แคชได้สำหรับผู้อ่าน อีกอันคือ admin dashboard ที่ต้องยืนยันตัวตนสำหรับผู้เขียน

สรุป

DevBlog คือ headless CMS บวกบล็อกสาธารณะ: ผู้เขียนเผยแพร่โพสต์ Markdown พร้อมแท็กผ่าน admin dashboard, NestJS GraphQL API บน MongoDB เป็น contract ตรงกลาง และ frontend Next.js App Router เรนเดอร์บล็อกสาธารณะด้วย SSR/ISR ทุกคอมเมนต์ผ่านการตรวจสอบก่อนจึงจะปรากฏ

ตารางด้านล่างจับคู่โมดูลทั้งสิบสองเข้ากับคอร์สใน Learn Hub ที่แต่ละโมดูลต่อยอดมา

แผนที่คอร์ส

โมดูล	สิ่งที่คุณสร้าง	คอร์สใน Learn Hub ที่อ้างอิง
1 · Setup & Tooling	โมโนรีโป เครื่องมือ และโครง Docker Compose	Node · Docker
2 · Data Modeling	schema ของ MongoDB สำหรับโพสต์ แท็ก ผู้ใช้ และคอมเมนต์	MongoDB
3 · Backend Foundations	โมดูล provider ของ NestJS และโครงสร้างแบบเลเยอร์	Node · Design Patterns
4 · Authentication	Passport-JWT auth สำหรับผู้เขียน	Node
5 · GraphQL API	GraphQL resolver แบบ code-first ด้วย Apollo	GraphQL
6 · Content Workflow	เวิร์กโฟลว์ draft, publish และแท็ก	Refactoring · Design Patterns
7 · Comments	โมเดลคอมเมนต์และ flow การตรวจสอบ	MongoDB · GraphQL
8 · Frontend Foundations	โปรเจกต์ Next.js App Router และ GraphQL client	Next.js · React
9 · Public Blog	ประสบการณ์การอ่านสาธารณะแบบ SSR/ISR	Next.js
10 · Admin Dashboard	UI เขียนและตรวจสอบเนื้อหาที่ต้องยืนยันตัวตน	Next.js · React
11 · Testing	เทสต์ unit และ end-to-end ทั่วทั้งสแตก	—
12 · Docker & Compose	สแตก production เต็มด้วย docker compose up	Docker

ถัดไป: Architecture →