Foundations
Next.js คืออะไร, App Router, Server เทียบกับ Client Components และ file convention เริ่ม →
Next.js — From Zero to Hero
คอร์สแบบ standalone เน้น developer ว่าด้วย Next.js เฟรมเวิร์ก React ตั้งแต่ App Router กับ Server Components ไปจนถึง caching 4 ชั้น, streaming rendering และ Server Actions สอนผ่านโค้ดจริงและไดอะแกรม รายละเอียดที่ขึ้นกับเวอร์ชัน (fetch ไม่ถูก cache โดย default แล้ว, โมเดล use cache / cacheComponents, Partial Prerendering) ถูก verify กับ docs ปัจจุบันแล้ว
สิ่งที่คุณจะได้เรียน
หัวข้อที่มีชื่อว่า “สิ่งที่คุณจะได้เรียน”Routing & Navigation
layout กับ nested route, dynamic segment, route group, parallel & intercepting route, loading/error UI route →
Data Fetching & Caching
การ fetch ใน Server Components และ caching 4 ชั้น — Request Memoization, Data Cache, Full Route Cache, Client Cache (ชื่อเดิม Router Cache) — พร้อม revalidation cache →
Rendering
static เทียบกับ dynamic rendering, streaming ด้วย Suspense และ Partial Prerendering ผ่าน cacheComponents render →
Server Actions & Mutations
Server Actions สำหรับ form กับ mutation, revalidatePath/revalidateTag และ client/server boundary mutate →
Optimization
Image, Font กับ Script component, Metadata API, bundle analysis และ Turbopack optimize →
Production & Ecosystem
proxy (ชื่อใหม่ของ middleware ใน Next.js 16), pattern การทำ auth, การตั้งค่า environment และการ deploy นอกเหนือจาก Vercel ขึ้น production →
อ่านโค้ด Next.js ที่ AI เขียน
ลำดับการอ่านโค้ด Next.js ที่ไม่ได้เขียนเอง, catalog bug 25 รายการที่ AI มักเขียนจริง (ทุกรายการพิสูจน์ด้วย output จาก build จริง), checklist สำหรับ review, เครื่องมือตรวจสอบ และ worked review 3 ชุด อ่านโค้ด →
อภิธานศัพท์
65 คำตั้งแต่ RSC payload ถึง cacheHandlers แต่ละคำลิงก์ไปบทที่สอน ค้นคำ →
คอร์สนี้ทำงานยังไง
หัวข้อที่มีชื่อว่า “คอร์สนี้ทำงานยังไง”server-first และรู้ขอบเขต
component ใน App Router เป็น Server Components โดย default ส่วน "use client" คือเส้นแบ่ง boundary ที่ลามไปถึงทุกอย่างที่ถูก import ต่อจากจุดนั้น คอร์สนี้สอนว่าเส้นนั้นอยู่ตรงไหนและทำไมถึงสำคัญ ไม่ใช่แค่ syntax
พฤติกรรมปัจจุบัน ที่ verify แล้ว
เขียนตามพฤติกรรมปัจจุบันของ Next.js และตรวจสอบกับ official docs ผ่าน context7 — รวมถึงการเปลี่ยนแปลงใหญ่ที่ tutorial ส่วนใหญ่พลาด คือ fetch และ GET Route Handlers ไม่ถูก cache โดย default อีกต่อไป และการ cache ตอนนี้ต้อง opt-in ผ่าน use cache / cacheComponents ตรวจสอบกับ Next.js 16.3.x และ React 19.x (Node.js 20.9+) เมื่อ 2026-09-25
cache 4 ชั้น ไม่ใช่ชั้นเดียว
Request Memoization, Data Cache, Full Route Cache และ Client Cache ฝั่ง client แต่ละอันอยู่คนละชั้น มี lifetime และวิธี invalidate ต่างกัน — เป็นส่วนที่คนเข้าใจผิดมากที่สุดใน Next.js สอนทีละชั้น
ไดอะแกรมที่อธิบายได้
RSC request lifecycle, caching 4 ชั้น, flow ของ streaming/Suspense และ round-trip ของ Server Action เป็นไดอะแกรม Mermaid ที่รองรับธีม สองภาษา (English / ไทย) พร้อมบันทึกความคืบหน้า quiz