Next.js — From Zero to Hero

สิ่งที่คุณจะได้เรียน

Foundations

Next.js คืออะไร, App Router, Server เทียบกับ Client Components และ file convention เริ่ม →

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, 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

middleware, pattern การทำ auth, การตั้งค่า environment และการ deploy นอกเหนือจาก Vercel ขึ้น production →

คอร์สนี้ทำงานยังไง

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

cache 4 ชั้น ไม่ใช่ชั้นเดียว

Request Memoization, Data Cache, Full Route Cache และ Router Cache ฝั่ง client แต่ละอันอยู่คนละชั้น มี lifetime และวิธี invalidate ต่างกัน — เป็นส่วนที่คนเข้าใจผิดมากที่สุดใน Next.js สอนทีละชั้น

ไดอะแกรมที่อธิบายได้

RSC request lifecycle, caching 4 ชั้น, flow ของ streaming/Suspense และ round-trip ของ Server Action เป็นไดอะแกรม Mermaid ที่รองรับธีม สองภาษา (English / ไทย) พร้อมบันทึกความคืบหน้า quiz