Documentation
กลับไปหมวดหมู่

Next.js App Router

เวลาอ่านโดยประมาณ: ~15 นาที

Next.js App Router

Next.js เป็น React Framework ที่ช่วยให้คุณสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพสูง พร้อมฟีเจอร์ Server-Side Rendering, Static Site Generation และการจัดการ routing อัตโนมัติ

ทำไมเราถึงเลือก Next.js + React

"เหตุผลแรกที่ชัดมากคือ SEO เราไม่เลือก React เพียวๆ เพราะไม่ได้ SSR/SEO มาให้พร้อม ต้องมาแก้ปัญหา SEO เองทีหลัง ซึ่งมักไม่สนุก"

การตัดสินใจ

เราไม่ได้ใช้ React เพียวๆ, Vue หรือ Svelte นี่คือเหตุผล:

ทำไมไม่ใช้ React เพียวๆ?

  • ไม่ได้ SSR/SEO มาให้พร้อม
  • ต้องมาแก้ปัญหา SEO เองทีหลัง ซึ่งมักไม่สนุก

Next.js ให้อะไรเราบ้าง:

  • SSR / SSG พร้อมใช้
  • โครงสร้างที่ทีมคุ้นเคย
  • ecosystem ที่ mature

อีกเหตุผลที่พูดตรงๆ:

"AI เข้าใจ React มากกว่า Vue และ Svelte อย่างชัดเจน ในยุคที่ AI เป็นส่วนหนึ่งของ workflow สิ่งนี้กลายเป็น factor จริงๆ ในการเลือก stack"

ทำไมไม่ใช้ Server Actions?

เราลองดู Server Actions แล้ว แต่ทีมตัดสินใจ ไม่ใช้

เหตุผลตรงไปตรงมา:

  • Learning curve ค่อนข้างสูง
  • ทีมตามไม่ทันในระยะสั้น
  • Debug ยาก
  • ผูก backend กับ frontend แน่นเกินไป

ที่สำคัญคือ:

"เรามองว่าในอนาคต backend อาจถูกแยกเป็น microservice"

ข้อดี-ข้อเสีย

ข้อดีข้อเสีย
SSR/SSG พร้อมใช้สำหรับ SEOอาจซับซ้อนสำหรับมือใหม่
Ecosystem ใหญ่มี convention ต้องเรียนรู้เยอะ
AI เข้าใจดีServer Actions learning curve สูง
Full-stack ในโปรเจกต์เดียวโครงสร้างค่อนข้าง opinionated
TypeScript support ดีมากอัปเดต major บ่อย

ความสามารถหลัก

  • Server-Side Rendering (SSR): แสดงผลเนื้อหาที่เซิร์ฟเวอร์เพื่อ SEO ที่ดีขึ้น
  • Static Site Generation (SSG): สร้างหน้าเว็บแบบ static สำหรับ performance สูงสุด
  • File-based Routing: จัดการ routes ด้วยโครงสร้างไฟล์อัตโนมัติ
  • API Routes: สร้าง API endpoints ในโปรเจกต์เดียวกัน

ตัวอย่างพื้นฐาน

สร้างหน้าใหม่

สร้างไฟล์ app/about/page.tsx:

ใช้งาน Server Components

ตัวอย่างเชิงโต้ตอบ

ลองสร้างหน้าเว็บแบบ dynamic ด้วย Next.js:

Metadata และ SEO

Next.js ทำให้การจัดการ metadata สำหรับ SEO ง่ายมาก:

Static Metadata

Dynamic Metadata

Loading UI

Loading.tsx แสดง UI ตอนโหลดข้อมูล:

Streaming with Suspense

Error Handling

Error.tsx จัดการ error ที่เกิดขึ้น:

Not Found

Middleware

Middleware รันโค้ดก่อนจะประมวลผล request:

Middleware Use Cases

Server Actions

Server Actions เรียกใช้ server-side code จาก client components:

ใช้ Server Actions ใน Form

ใช้ Server Actions แบบ Programmatic

Data Fetching Patterns

Server Component (แนะนำ)

Client Component with useEffect

Parallel Data Fetching

Route Handlers (API Routes)

Dynamic Route Handlers

Layouts และ Templates

Root Layout

Nested Layout

Template (Reset State)

Image Optimization

Best Practices

1. ใช้ Server Components เป็นหลัก

2. Parallel Routes สำหรับ Complex UIs

3. Revalidate Data เมื่อเหมาะสม

4. ใช้ generateStaticParams สำหรับ Dynamic Routes

สรุป

Next.js App Router ช่วยให้คุณ:

  • ✅ Metadata สำหรับ SEO ที่ดี
  • ✅ Loading UI และ Streaming พร้อม Suspense
  • ✅ Error Boundaries จัดการ errors
  • ✅ Middleware สำหรับ authentication, redirects
  • ✅ Server Actions เรียก server code ได้ง่าย
  • ✅ Optimized Images ด้วย next/image
  • ✅ Server Components เป็น default

เริ่มสร้างแอปที่เร็วและ SEO-friendly ด้วย Next.js วันนี้!

แหล่งข้อมูลเพิ่มเติม

เอกสารอย่างเป็นทางการ

แนะนำสำหรับการเรียนรู้เพิ่มเติม

  • Next.js Blog - ฟีเจอร์และประกาศล่าสุด
  • Vercel Templates - เทมเพลตพร้อมใช้งานจริง
  • Next.js Conf - วิดีโอการประชุมประจำปี
  • Next.js Weekly - จดหมายข่าวพร้อมเคล็ดลับและแหล่งข้อมูล