Routing di Next.js: Pages Directory vs App Router

Kalau kamu sudah pernah ngulik Next.js, pasti sempat bingung soal dua pendekatan routing yang disediakan: Pages Directory dan App Router. Dua-duanya bisa dipakai, tapi cara kerjanya beda banget. Nah, artikel ini akan bantu kamu paham perbedaan antara keduanya, kelebihan masing-masing, dan kapan sebaiknya pakai yang mana.

Apa Itu Pages Directory?

Pages Directory adalah pendekatan routing tradisional di Next.js (versi <13), yang sudah dipakai sejak awal kemunculannya. Di sini, file dan folder di dalam /pages secara otomatis menjadi route berdasarkan struktur folder-nya.

/pages
├── index.js          → /
├── about.js          → /about
└── blog
    └── [slug].js     → /blog/:slug

Setiap file di dalam /pages akan dianggap sebagai komponen React yang mewakili sebuah halaman.

Kelebihan Pages Directory

• ✅ Mudah dimengerti: Cocok untuk pemula. Struktur file langsung jadi route.

• ✅ Stabil: Sudah digunakan bertahun-tahun oleh banyak proyek production.

• ✅ Kompatibel dengan banyak plugin dan pustaka React yang lama.

Kekurangan Pages Directory

• ❌ Tidak mendukung layout yang bersarang secara default (harus pakai trik).

• ❌ Kurang fleksibel untuk use case kompleks seperti nested routing dinamis atau streaming.

• ❌ Tidak menggunakan React Server Components.

Apa Itu App Router?

App Router adalah fitur baru yang diperkenalkan secara stabil di Next.js 13+. Alih-alih /pages, kamu akan menggunakan /app sebagai direktori utama untuk routing. Pendekatan ini dirancang dengan konsep React Server Components dan layout bersarang (nested layouts) secara default.

/app
├── layout.js          → Root layout (global)
├── page.js            → /
└── blog
    ├── layout.js      → Layout khusus /blog
    ├── page.js        → /blog
    └── [slug]
        └── page.js    → /blog/:slug

Kelebihan App Router

• ✅ React Server Components (RSC): Kamu bisa memindahkan logic berat ke server tanpa client-side bundle.

• ✅ Nested layouts: Layout bisa diwariskan dan didefinisikan per bagian aplikasi.

• ✅ Streaming & Suspense: Mendukung loading bertahap pakai React Suspense.

• ✅ File-based loading: Bisa pakai file khusus seperti loading.js, error.js, dan not-found.js per route.

Kekurangan App Router

• ❌ Belum semua library siap: Beberapa pustaka React belum 100% kompatibel dengan RSC.

• ❌ Curva belajar tinggi: Konsep layout bersarang dan RSC bisa membingungkan di awal.

• ❌ Masih terus berubah: Karena tergolong baru, dokumentasi dan best practice-nya masih berkembang.

Pages vs App Router: Mana yang Harus Dipilih?

KriteriaPages DirectoryApp RouterPemula Friendly✅ Sangat⚠️ Perlu belajar konsep baruSupport Layout Bersarang❌ Butuh trik tambahan✅ Native supportReact Server Components❌ Tidak support✅ Fully supportedProduction Ready✅ Terbukti stabil✅ Tapi masih evolvingKompatibilitas Library✅ Tinggi⚠️ Beberapa belum support RSC

Kapan Sebaiknya Pakai Pages Directory?

Kamu bisa tetap pakai Pages kalau:

• 🚀 Butuh cepat bikin MVP atau prototype

• 📦 Gunakan banyak library lama (yang belum support RSC)

• 👶 Kamu masih baru belajar Next.js dan React

Kapan Lebih Baik Gunakan App Router?

App Router adalah masa depan Next.js. Gunakan kalau:

• 🏗️ Ingin bangun sistem besar dengan layout kompleks

• 📉 Mau optimasi performance via server-side rendering + streaming

• 🧪 Sudah cukup familiar dengan React & Next.js

Kesimpulan

Dua pendekatan routing ini sama-sama valid, tapi cocoknya beda-beda tergantung kebutuhan proyek dan pengalaman timmu. Kalau kamu baru mulai, Pages Directory masih sangat relevan. Tapi kalau kamu mau bikin sistem modular, scalable, dan siap masa depan, App Router wajib mulai dipelajari.

Pro Tip: Dalam Next.js 14+, Pages dan App Router bisa hidup berdampingan. Jadi kamu bisa migrasi secara bertahap 🚀

Semoga artikel ini bisa bantu kamu lebih yakin memilih jalur yang tepat saat bekerja dengan Next.js. Selamat berkarya!