Next.js คืออะไร?
React Framework สำหรับ Production เพิ่ม SSR, SSG, File routing, API Routes และ Image optimization ครบทุกอย่างในการสร้างเว็บแอปสมบูรณ์
🔄 Next.js จัดการ Request ยังไง
🖥️ โหมดการ Render
Render หน้าตอน Build เร็วมาก เสิร์ฟผ่าน CDN ได้ เหมาะกับ Blog, Docs, หน้า Marketing
Render หน้าบน Server ทุก Request ข้อมูลสดเสมอ SEO ดี เหมาะกับ Dashboard, หน้าเฉพาะผู้ใช้
หน้า Static ที่ Regenerate ใน Background หลังกำหนดเวลา (เช่น 60 วินาที) ดีที่สุดของทั้ง 2 แบบ
หน้าโหลด Skeleton แล้วดึงข้อมูลใน Browser เหมือน React ธรรมดา ไม่มีประโยชน์ด้าน SEO เหมาะ Dashboard ส่วนตัว
✨ ฟีเจอร์สำคัญ
File-based Routing
สร้างไฟล์ใน /pages → Route อัตโนมัติ ไม่ต้องตั้งค่า Router /pages/about.js → /about
API Routes
สร้าง /pages/api/hello.js → ได้ Endpoint /api/hello Backend Node.js ในตัว
Image Optimization
next/image ย่อขนาดอัตโนมัติ แปลงเป็น WebP, Lazy load, ป้องกัน Layout shift
Middleware
รัน Code ก่อน Request เสร็จ ใช้ตรวจสิทธิ์, Redirect, A/B Testing, i18n
Edge Runtime
รัน Code ที่ CDN Edge ทั่วโลก Latency ต่ำมาก เร็วกว่า Server ธรรมดา
App Router (v13+)
Directory /app ใหม่ พร้อม Server Components, Nested layouts, Parallel routes, Streaming
⚖️ React vs Next.js ต่างกันยังไง?
| หัวข้อ | ⚛️ React | ▲ Next.js |
|---|---|---|
| Routing | ตั้งค่าเอง (React Router) | ตามไฟล์ (อัตโนมัติ) |
| SEO | แย่ (CSR เท่านั้น) | ดีเยี่ยม (SSR/SSG) |
| Backend | ต้องแยก Server | API Routes ในตัว |
| Performance | ดี (SPA) | ดีเยี่ยม (Pre-rendered) |
| รูปภาพ | ปรับแต่งเอง | next/image ในตัว |
| Deploy | Static files / Node | Vercel / Node / Docker |
ต้องการเว็บไซต์ด้วย Next.js? ▲
เราสร้างเว็บแอปเร็ว SEO ดี ด้วย Next.js, TypeScript และ Tailwind CSS