Next.js มี ระบบ routing สองแบบ Pages Router (pages/) คือระบบเดิม App Router (app/ ตั้งแต่ Next 13) คือระบบใหม่ที่แนะนำซึ่งสร้างขึ้นรอบ React Server Components
ความแตกต่างของไฟล์และ convention
text
Pages Router (pages/) App Router (app/)
──────────────────────────────────────────────────────
pages/about.tsx → /about app/about/page.tsx → /about
Default export = page page.tsx = page, layout.tsx = layout
getServerSideProps (SSR) async Server Components (fetch directly)
getStaticProps (SSG) fetch() with caching options
_app.tsx / _document.tsx Nested layout.tsx files
All components client-rendered Server Components by default
// App Router — a Server Component that fetches data directly, no extra API
// app/users/page.tsx
export default async function Users() {
const res = await fetch("https://api.example.com/users"); // runs on the SERVER
const users = await res.json();
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
ใน App Router คอมโพเนนต์เป็น Server Components โดยค่าเริ่มต้น — ทำงานบนเซิร์ฟเวอร์ สามารถ await ข้อมูลโดยตรง และส่ง JS เป็นศูนย์สำหรับคอมโพเนนต์นั้นไปยังเบราว์เซอร์ Pages Router ใช้ฟังก์ชันพิเศษ (getServerSideProps) เพื่อส่งข้อมูลไปยังหน้าที่ render บนฝั่ง client
layout.tsx)loading.tsx / Suspenseใช้ App Router สำหรับโปรเจกต์ใหม่ — ที่นี่คือจุดโฟกัสของการพัฒนา Next.js Pages Router ยังคงได้รับการสนับสนุน (และทั้งสองสามารถอยู่ร่วมกันในแอป) แต่โดยพื้นฐานแล้วอยู่ในโหมด maintenance
App Router แสดงถึงสถาปัตยกรรมปัจจุบันของ Next.js (Server Components nested layouts streaming)
การรู้ว่ามันแตกต่างจาก Pages Router แบบเดิมอย่างไร — โดยเฉพาะค่าเริ่มต้น server-first และแบบจำลอง layout — เป็นสิ่งจำเป็นสำหรับการทำงานใน codebase Next.js สมัยใหม่ใด ๆ