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:** 1. App Router jadi rekomendasi default Next.js sejak versi 13.4 (4 Mei 2023). 2. Pages Router belum deprecated, masih menerima dukungan dan perbaikan resmi. 3. Beda utama: App Router pakai Server Component sebagai default, Pages Router client-side kecuali eksplisit diatur. 4. Keduanya bisa hidup berdampingan dalam satu proyek untuk migrasi bertahap. 5. 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](https://nextjs.org/blog/next-13-4): "today, with the release of 13.4, you can now start adopting the App Router for production." [Server Components](https://react.dev/reference/rsc/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](https://nextjs.org/blog/next-13-4)). Dampak ke ukuran bundel JavaScript ini juga dikonfirmasi langsung oleh tim Vercel lewat penjelasan teknis mereka soal Server Components: > "RSCs drastically reduce client-side JavaScript payload. In other words, > with Server Components, the initial page load is faster and leaner." > ([Alice Alexandra Moore, blog > Vercel](https://vercel.com/blog/understanding-react-server-components)). Situs personal brand ini sendiri dibangun dengan Next.js 15 dan App Router penuh, termasuk untuk hal-hal seperti [pemasangan schema markup JSON-LD](/blog/cara-implementasi-schema-markup-json-ld-nextjs) 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](/blog/react-compiler-nextjs-panduan-lengkap), 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](https://nextjs.org/docs/app/guides/migrating/app-router-migration) menjelaskan urutan langkah yang dianjurkan: mulai dari layout root, lalu pindahkan route satu per satu sambil `pages/` dan `app/` tetap aktif bersamaan. ## Ringkasan: Kapan Pilih App Router, Kapan Pertahankan Pages Router - 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](/layanan) yang ditawarkan.