DevBlog

สร้าง DevBlog ระบบ headless CMS พร้อมบล็อกสาธารณะ ตั้งแต่ repo เปล่า ๆ ไปจนถึงสแตกที่รันได้จริงด้วย Docker Compose ระหว่างทางคุณจะได้ลงมือทำงานกับ Node/NestJS, MongoDB, code-first GraphQL และ Next.js (App Router) พร้อม SSR/ISR

เริ่มที่นี่ ข้ามไปที่ GraphQL API

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

Introduction

รู้จัก DevBlog ว่าทำไมต้องสร้าง คอร์สนี้จัดโครงสร้างยังไง และสุดท้ายคุณจะได้อะไร เปิดดู →

Setup & Tooling

ติดตั้ง Node, Docker และเครื่องมือที่เหลือ พร้อมสร้างโปรเจกต์ตั้งต้น เปิดดู →

Data Modeling

ออกแบบโมเดลข้อมูล posts, tags, comments และ users ใน MongoDB ด้วย Mongoose schema เปิดดู →

Backend Foundations

วางรากฐานเซิร์ฟเวอร์ NestJS ระบบ module, การตั้งค่า และการจัดการ error เปิดดู →

Authentication

เพิ่มการ hash รหัสผ่าน ระบบล็อกอิน และ JWT session เพื่อให้ผู้ดูแลผูกกับผู้ใช้จริง เปิดดู →

GraphQL API

ให้บริการ posts และ tags ผ่าน code-first GraphQL API พร้อม resolver และ DTO เปิดดู →

Content Workflow

เปลี่ยน Markdown ให้กลายเป็นโพสต์ที่เผยแพร่ได้ ด้วย slug, การตรวจสอบ และสถานะ draft เปิดดู →

Comments

ให้ผู้อ่านคอมเมนต์ได้ และให้ผู้ดูแลตรวจสอบว่าคอมเมนต์ไหนจะแสดง เปิดดู →

Frontend Foundations

ตั้งค่า Next.js App Router, layout และเลเยอร์ข้อมูล GraphQL สำหรับบล็อก เปิดดู →

Public Blog

แสดงผลหน้ารายการ, หน้าโพสต์ และหน้าแท็ก ด้วย SSR และ ISR เปิดดู →

Admin Dashboard

สร้างหน้า admin ที่ต้องล็อกอิน สำหรับเขียน เผยแพร่ และตรวจสอบเนื้อหา เปิดดู →

Testing

คลุมทั้งฝั่ง backend และ frontend ด้วยการทดสอบอัตโนมัติที่วางใจได้ เปิดดู →

Docker & Compose

ทำ container ให้ทุกเซอร์วิส และรันทั้งสแตกด้วยคำสั่งเดียว เปิดดู →

Wrap-up

ทบทวนสิ่งที่คุณสร้างมา และก้าวต่อไปของ DevBlog เปิดดู →

เวอร์ชันที่คอร์สนี้ยึดเป็นหลัก

คอร์สนี้ pin ตัวอย่างไว้กับ toolchain เวอร์ชันที่ตรวจสอบแล้วชัดเจน แทนที่จะปล่อยให้ npm install ดึงอะไรก็ได้ที่ล่าสุด: Node 24, NestJS 11 ขึ้นไป (code-first @nestjs/graphql 13 ขึ้นไปกับ Apollo driver, @nestjs/mongoose 11 ขึ้นไป, @nestjs/config 4 ขึ้นไปที่ validate ผ่าน Standard Schema ด้วย Zod), Mongoose 8 ขึ้นไป กับ MongoDB 8, GraphQL 16, Next.js 16 (App Router, React 19) และ Jest 30 ฝั่ง backend กับ Vitest 3 ฝั่ง frontend nest new และ create-next-app ติดตั้งเวอร์ชันใหม่กว่านี้ไปเรื่อย ๆ ตามที่ ecosystem ขยับ — บทเรื่อง setup ของคอร์สนี้จะระบุจุดที่ตั้งใจต่างจาก default ของ scaffold ใหม่ไว้ชัดเจน (สลับ API จาก ESM กลับเป็น CommonJS) และ pin เวอร์ชันของ dev dependency ที่ scaffold ไม่มีให้อีกต่อไปโดย default ไว้ตรง ๆ (Jest เพราะ nest new ปัจจุบันต่อสาย Vitest มาให้แทน)

คู่มือนี้ทำงานยังไง

Real, copy-pasteable code

ทุกโค้ดในคอร์สนี้เป็นโค้ดจริงที่รันได้ คัดลอกไปใช้ในโปรเจกต์ของคุณได้เลย ไม่มี pseudo-code

Adapts the Learn Hub courses

ต่อยอดจากแพทเทิร์นของคอร์ส NestJS และ Next.js ใน Learn Hub มาประยุกต์ใช้กับโปรเจกต์จริงแบบครบวงจร

Bilingual EN / ไทย

มีทั้งภาษาอังกฤษและไทย สลับได้ตลอดจากแถบด้านบน

You build it by following along

นี่คือคอร์สแบบลงมือทำ คุณจะได้เขียนโค้ดเองทีละขั้นตอน ไม่ใช่แค่อ่านผ่าน ๆ