เริ่มต้นกับ Next.js 14 App Router

Next.js 14 มาพร้อม App Router ที่เปลี่ยนวิธีคิดเรื่อง routing ไปอย่างสิ้นเชิง ทั้ง Server Components, Layouts ที่ซ้อนกันได้, และ Streaming ที่ทำให้ UX ดีขึ้นมาก ก่อนหน้านี้เราใช้ Pages Router ซึ่งทุกไฟล์ใน pages/ จะกลายเป็น route อัตโนมัติ แต่ App Router ใช้โฟลเดอร์ app/ แทน และทุก component เป็น Server Component โดย default ซึ่งหมายความว่า JavaScript ของ component นั้นจะไม่ถูกส่งไปยัง browser เลย การใช้ App Router ทำให้เราสามารถแยก Server Component และ Client Component ออกจากกันได้อย่างชัดเจน โดยใช้ directive "use client" เฉพาะในส่วนที่ต้องการ interactivity เท่านั้น ช่วยลด JavaScript bundle size ได้อย่างมีนัยสำคัญ นอกจากนี้ App Router ยังรองรับ Nested Layouts ที่ทำให้เราแชร์ UI ระหว่าง route ได้โดยไม่ต้อง re-render ส่วนที่ไม่เปลี่ยน และ loading.tsx กับ error.tsx ที่ทำให้จัดการ state ของหน้าได้ง่ายขึ้นมาก การ deploy ก็ง่ายมากเพียงแค่ push ขึ้น Vercel ซึ่งรองรับ Next.js ได้อย่างสมบูรณ์แบบ ทั้ง Edge Runtime, Image Optimization และ ISR โดยไม่ต้องตั้งค่าอะไรเพิ่มเติม