Next.js — From Zero to Hero

Next.js คือเฟรมเวิร์ก React สำหรับสร้าง full-stack web application คอร์สนี้เน้น App Router — โมเดลปัจจุบันที่สร้างบน React Server Components (โฟลเดอร์ app/) — ส่วน Pages Router แบบเก่าจะพูดถึงเฉพาะตรงที่เกี่ยวกับการ migrate คอร์สนี้เขียนขึ้นสำหรับ developer ที่รู้จัก React อยู่แล้วและอยากเข้าใจว่า Next.js ทำอะไรอยู่ข้างใต้จริง ๆ — โค้ดรันที่ไหน, data ถูก cache ยังไง และ request กลายเป็น HTML ได้ยังไง

มีสองเรื่องที่ tutorial หลายที่สอนผิด เพราะโมเดลของ Next.js เปลี่ยนไป —

• component เป็น Server Components โดย default ใน App Router component จะรันบน server เว้นแต่ไฟล์นั้น (หรือไฟล์ที่อยู่เหนือขึ้นไปในสาย import) ถูกมาร์กด้วย "use client" และ boundary นี้ไม่ได้แยกเป็นราย component — ทุกอย่างที่ถูก import เข้าไปใน Client Component จะกลายเป็นส่วนหนึ่งของ client bundle ด้วย การรู้ว่าเส้น boundary อยู่ตรงไหนพอดีคือทักษะหลักของ App Router
• fetch ไม่ถูก cache โดย default อีกต่อไป ตั้งแต่ Next.js 15 request จาก fetch() และ GET Route Handlers จะไม่ถูก cache เว้นแต่คุณ opt-in เอง (cache: 'force-cache', next: { revalidate } หรือ directive use cache แบบใหม่) tutorial เก่าที่บอกว่า “Next.js cache ทุก fetch ให้อัตโนมัติ” คือพฤติกรรมของ Next.js 14 คอร์สนี้สอน default ปัจจุบันและ caching 4 ชั้นที่อยู่เบื้องหลัง

สิ่งที่คอร์สนี้ครอบคลุม

Module	คุณจะได้เรียน
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
Data Fetching & Caching	การ fetch ใน Server Components, Request Memoization, Data Cache, Full Route Cache, Router Cache, revalidation
Rendering	static เทียบกับ dynamic rendering, streaming ด้วย Suspense, Partial Prerendering ผ่าน cacheComponents
Server Actions & Mutations	Server Actions สำหรับ form กับ mutation, revalidatePath/revalidateTag, client/server boundary
Optimization	Image/Font/Script component, Metadata API, bundle analysis, Turbopack
Production & Ecosystem	middleware, pattern การทำ auth, การตั้งค่า environment, การ deploy นอกเหนือจาก Vercel

วิธีอ่าน

แต่ละบทเริ่มด้วยไอเดียหลักในหนึ่งประโยค แสดง TypeScript/React และ CLI command จริง มีไดอะแกรมของกลไกที่เกี่ยวข้อง และปิดท้ายด้วย takeaway หนึ่งบรรทัดพร้อม quiz สั้น ๆ อ่านเรียงจากบนลงล่าง — module หลัง ๆ จะอ้างอิงคำศัพท์เรื่อง Server/Client boundary และ caching จากบทแรก ๆ เหล่านี้

▲ The one-line takeaway

App Router ของ Next.js เป็นแบบ server-first — component รันบน server เว้นแต่จะมี boundary "use client" บอกเป็นอย่างอื่น — และ caching ของตัวเองเป็นแบบ แบ่งชั้นและ opt-in ตั้งแต่ v15 ไม่ใช่อัตโนมัติ คอร์สนี้สอนว่าโค้ดรันที่ไหน, caching 4 ชั้น, rendering กับ streaming ทำงานยังไง และ mutation ไหลผ่าน Server Actions ยังไง ทั้งหมดอิงพฤติกรรมปัจจุบันของ Next.js — เริ่มจาก App Router เอง