Next.js memiliki dua sistem routing. Pages Router (pages/) adalah yang asli; App Router (app/, sejak Next 13) adalah yang lebih baru, direkomendasikan dan dibangun di sekitar 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 — 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>;
}
Di App Router, komponen adalah Server Components secara default — mereka berjalan di server, dapat langsung await data, dan mengirim nol JS untuk komponen tersebut ke browser. Pages Router sebagai gantinya menggunakan fungsi khusus (getServerSideProps) untuk melewatkan data ke halaman yang dirender di sisi klien.
layout.tsx).loading.tsx / Suspense.Gunakan App Router untuk proyek baru — ini adalah tempat di mana pengembangan Next.js difokuskan. Pages Router masih didukung (dan keduanya dapat berdampingan dalam satu aplikasi) tetapi pada dasarnya dalam mode pemeliharaan.
App Router mewakili arsitektur Next.js saat ini (Server Components, layout bersarang, streaming).
Mengetahui bagaimana perbedaannya dari Pages Router warisan — terutama default server-first dan model layout — sangat penting untuk bekerja di basis kode Next.js modern mana pun.