Next.js có hai hệ thống routing. Pages Router (pages/) là hệ thống nguyên thủy; App Router (app/, từ Next 13) là hệ thống mới hơn, được khuyến nghị, xây dựng quanh React Server Components.
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 — một Server Component fetch dữ liệu trực tiếp, không cần API phụ
// app/users/page.tsx
export default async function Users() {
const res = await fetch("https://api.example.com/users"); // chạy trên SERVER
const users = await res.json();
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
Trong App Router, các component mặc định là Server Components — chúng chạy trên server, có thể await dữ liệu trực tiếp, và gửi zero JS của component đó tới browser. Pages Router thay vào đó dùng các hàm đặc biệt (getServerSideProps) để truyền dữ liệu vào các trang được render ở client.
layout.tsx).loading.tsx / Suspense.Dùng App Router cho project mới — đây là nơi quá trình phát triển của Next.js đang tập trung. Pages Router vẫn được hỗ trợ (và hai cái có thể cùng tồn tại trong một app) nhưng về cơ bản đang ở chế độ bảo trì.
App Router đại diện cho kiến trúc hiện tại của Next.js (Server Components, nested layouts, streaming).
Biết nó khác Pages Router cũ như thế nào — đặc biệt là mặc định server-first và mô hình layout — là điều thiết yếu để làm việc trong bất kỳ codebase Next.js hiện đại nào.