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.
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.
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. Server Components 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.
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.
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.
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.
nextjs · app-router · pages-router · react
Pertanyaan yang Sering Diajukan
Apakah Pages Router sudah deprecated di Next.js?
Belum. Pages Router masih didukung resmi, masih menerima perbaikan bug, dan bisa hidup berdampingan dengan App Router di proyek yang sama. Yang berubah adalah rekomendasi default: proyek baru diarahkan memakai App Router, bukan Pages Router dihapus.
Apakah App Router sudah stabil untuk produksi?
Ya, sejak Next.js 13.4 dirilis 4 Mei 2023, tim Next.js secara resmi menyatakan App Router siap produksi setelah divalidasi internal dan early adopter. Situs ini sendiri memakai Next.js 15 dengan App Router.
Bisakah App Router dan Pages Router dipakai bersamaan dalam satu proyek?
Bisa. Next.js sengaja mendesain direktori `app/` agar berjalan berdampingan dengan `pages/`, sehingga migrasi bisa dilakukan bertahap per halaman/route, bukan rewrite total sekaligus.
M. Irfan Ramadhan
SEO Specialist & Web Developer
Menulis tentang SEO teknis, GEO/AI search, dan pengembangan web modern berdasarkan pengalaman langsung mengerjakan proyek klien.