เริ่มต้น Next.js แบบถูกทาง 5 สิ่งที่ควรรู้ตั้งแต่วันแรก

เริ่มต้น Next.js แบบถูกทาง 5 สิ่งที่ควรรู้ตั้งแต่วันแรก

Next.js เป็น framework ที่ทรงพลังมาก แต่หลายคนเริ่มต้นผิดทางและแก้ปัญหายากในภายหลัง

1. เข้าใจ Server Component vs Client Component

ใน App Router ทุก component เป็น Server Component โดย default ซึ่งดีสำหรับ performance แต่ถ้าต้องใช้ useState, useEffect หรือ event handlers ต้องเพิ่ม "use client" ที่บรรทัดแรก

2. ใช้ next/image เสมอ

อย่าใช้แท็ก img ธรรมดา next/image ทำ optimization ให้อัตโนมัติทั้ง resize, format conversion, lazy loading และ blur placeholder

3. Route Groups ช่วยจัดระเบียบได้มาก

ใช้ (folder) ในชื่อ folder เพื่อจัดกลุ่ม routes โดยไม่ให้ชื่อ folder ปรากฏใน URL เช่น (marketing)/about จะเข้าถึงได้ที่ /about

4. Loading และ Error UI

สร้างไฟล์ loading.js และ error.js ใน folder เดียวกับ page.js เพื่อให้ Next.js จัดการ loading state และ error boundary ให้อัตโนมัติ

5. Environment Variables

ตัวแปรที่ต้องใช้บน browser ต้องขึ้นต้นด้วย NEXT_PUBLIC_ ตัวแปรที่ไม่มี prefix จะใช้ได้แค่บน server เท่านั้น อย่าเผลอ expose secret keys

Next.js เวอร์ชันใหม่มีการเปลี่ยนแปลงบ่อย อ่าน changelog ก่อน upgrade ทุกครั้ง