URL Dashboard Bersarang Jadi Rapi dengan Cara Membuat Nested Route Next Js

Ditulis oleh Next.js

Cara membuat nested route Next.js adalah membuat folder di dalam folder route di direktori app, lalu menambah page.tsx di tiap level yang ingin punya URL. Langkah yang paling sering terlewat adalah menambah layout.tsx di folder parent agar sidebar atau navigasi dashboard tidak dirender ulang dan tetap membungkus semua halaman anak.

Struktur Folder untuk Nested Route App Router

App Router membaca struktur folder sebagai URL. Folder dashboard/settings otomatis menjadi /dashboard/settings bila berisi page.tsx.

  • page.tsx membuat segmen URL bisa diakses.
  • layout.tsx membungkus semua halaman di folder tersebut dan folder anaknya.
  • template.tsx mirip layout, tetapi state dan efek dibuat ulang setiap navigasi.
app/
  dashboard/
    layout.tsx
    page.tsx
    settings/
      page.tsx
      profile/
        page.tsx

Contoh layout parent minimal:

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <aside>Menu Dashboard</aside>
      <main>{children}</main>
    </div>
  );
}

Langkah Membuat Nested Route Bersarang

  1. Buat folder parent, misalnya app/dashboard.
  2. Tambah app/dashboard/layout.tsx untuk sidebar atau header khusus dashboard.
  3. Tambah app/dashboard/page.tsx untuk halaman utama dashboard.
  4. Buat folder anak seperti app/dashboard/settings dan isi dengan page.tsx.
  5. Jalankan npm run dev dan uji URL satu per satu.
  • /dashboard untuk ringkasan utama.
  • /dashboard/settings untuk pengaturan.
  • /dashboard/settings/profile untuk profil di dalam pengaturan.

BACA JUGA:

Tabel Pola Nested Route dan Fungsinya

Pola Folder Hasil URL Fungsi
dashboard/settings /dashboard/settings Nested statis berjenjang
dashboard/settings/[id] /dashboard/settings/12 Detail dinamis dalam nested
(admin)/dashboard /dashboard Route Group tanpa tambah URL

Nested statis cocok untuk halaman tetap seperti pengaturan dan profil. Nested dinamis dengan [id] cocok untuk detail user, invoice, atau produk di dalam dashboard.

Pakai Route Group dengan tanda kurung, misalnya (admin), bila ingin mengelompokkan layout khusus admin tanpa membuat URL bertambah panjang menjadi /admin/dashboard.

FAQ

Apakah nested route butuh layout di setiap folder?

Tidak. Tambah layout hanya di level yang membutuhkan UI bersama seperti sidebar dashboard.

Bagaimana menambah dynamic route di dalam nested route?

Buat folder [id] di dalam folder nested, lalu baca parameternya dari Server Component.

Mengapa halaman nested menampilkan 404?

Biasanya folder anak belum berisi page.tsx atau nama folder salah ketik.

Artikel Terkait