App Router dipakai untuk proyek Next.js baru karena jadi rekomendasi resmi sejak versi 13.4 (Mei 2023), berbasis React Server Components dengan bundel JavaScript client lebih kecil. Pages Router tetap masuk akal dipertahankan untuk aplikasi besar yang sudah stabil di arsitektur lama, di mana rewrite penuh belum sepadan dengan manfaatnya.
Ringkasan cepat:
- App Router jadi rekomendasi default Next.js sejak versi 13.4 (4 Mei 2023).
- Pages Router belum deprecated, masih menerima dukungan dan perbaikan resmi.
- Beda utama: App Router pakai Server Component sebagai default, Pages Router client-side kecuali eksplisit diatur.
- Keduanya bisa hidup berdampingan dalam satu proyek untuk migrasi bertahap.
- Pilih App Router untuk proyek baru, pertahankan Pages Router kalau aplikasi besar sudah stabil di sana.
Apa Beda App Router dan Pages Router Next.js?
Perbedaan paling mendasar ada di model rendering default. Pages Router
(direktori pages/, arsitektur asli Next.js sejak awal) merender komponen
di client secara default kecuali eksplisit memakai getServerSideProps
atau getStaticProps. App Router (direktori app/, diperkenalkan di
Next.js 13) membalik default itu: setiap komponen adalah React Server
Component kecuali ditandai "use client" secara eksplisit.
App Router vs Pages Router: Perbandingan Singkat
| Aspek | Pages Router | App Router |
|---|---|---|
| Model rendering default | Client-side, kecuali eksplisit pakai getServerSideProps/getStaticProps | React Server Component, kecuali ditandai "use client" |
| Konvensi routing | Satu file di pages/ = satu route | Berbasis folder di app/, dengan layout.tsx/loading.tsx/error.tsx otomatis |
| Data fetching | Fungsi khusus level halaman (getServerSideProps, getStaticProps, getInitialProps) | async/await langsung di dalam Server Component |
| Status dukungan resmi | Masih didukung, bukan deprecated | Rekomendasi default sejak versi 13.4 (4 Mei 2023) |
Konvensi Routing dan Struktur File
Pages Router memetakan tiap file di pages/ langsung jadi satu route.
App Router memakai konvensi berbasis folder: app/blog/page.tsx jadi
route /blog, sementara layout.tsx, loading.tsx, dan error.tsx di
folder yang sama otomatis dipakai untuk route tersebut tanpa perlu
komponen pembungkus manual.
Data Fetching
Di Pages Router, data fetching dilakukan lewat fungsi khusus di level
halaman (getServerSideProps, getStaticProps, getInitialProps). Di
App Router, data fetching dilakukan langsung di dalam Server Component
memakai async/await biasa, tanpa fungsi khusus terpisah.
Kapan Sebaiknya Pakai App Router?
Untuk proyek baru, App Router adalah pilihan default yang direkomendasikan resmi oleh tim Next.js sejak App Router dinyatakan stabil di versi 13.4, 4 Mei 2023: "today, with the release of 13.4, you can now start adopting the App Router for production." Server Components sendiri adalah fitur React (bukan cuma Next.js) yang menurut dokumentasi resminya "run and are cached on the server, with the option to keep some interactivity" - mengurangi jumlah JavaScript yang dikirim ke browser karena komponen yang tidak butuh interaktivitas tidak perlu di-hydrate di client, dan server bisa mengirim HTML bertahap (streaming) sehingga First Contentful Paint lebih cepat dirasakan pengguna.
"Today, with the release of 13.4, you can now start adopting the App Router for production." (blog resmi Next.js 13.4).
Situs personal brand ini sendiri dibangun dengan Next.js 15 dan App Router
penuh, termasuk untuk hal-hal seperti pemasangan schema markup JSON-LD
langsung sebagai Server Component tanpa perlu useEffect atau library
tambahan di client. Pengurangan JavaScript di level rendering ini bisa
dilengkapi dengan optimasi di level komponen client lewat React Compiler,
yang menambahkan memoization otomatis tanpa useMemo/useCallback ditulis
manual.
Kapan Pages Router Masih Masuk Akal Dipertahankan?
Pages Router tidak deprecated dan tetap menerima dukungan resmi. Untuk aplikasi besar yang sudah berjalan stabil di Pages Router, migrasi total ke App Router butuh effort nyata (pola data fetching, state management, dan sebagian library pihak ketiga bisa berperilaku beda di Server Component) yang belum tentu sepadan kalau aplikasinya sudah bekerja baik.
Next.js sengaja mendesain direktori app/ agar bisa berjalan berdampingan
dengan pages/ di proyek yang sama, jadi migrasi bertahap per route
adalah pendekatan yang didukung resmi, bukan cuma workaround. Dokumentasi
resmi Next.js untuk migrasi bertahap ke App
Router
menjelaskan urutan langkah yang dianjurkan: mulai dari layout root, lalu
pindahkan route satu per satu sambil pages/ dan app/ tetap aktif
bersamaan.
Ringkasan
- App Router adalah rekomendasi default untuk proyek Next.js baru sejak versi 13.4 (4 Mei 2023), dengan model Server Component sebagai default.
- Pages Router masih didukung resmi (bukan deprecated) dan tetap jadi pilihan wajar untuk aplikasi besar yang sudah stabil di arsitektur itu.
- Keduanya bisa hidup berdampingan dalam satu proyek, sehingga migrasi bisa dilakukan bertahap per route, bukan rewrite total sekaligus.
- Butuh bantuan menentukan arsitektur Next.js yang tepat untuk proyekmu, atau migrasi dari Pages Router ke App Router? Lihat layanan web development yang ditawarkan.