FluentStack

Nested Routes

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 10: Next.js App RouterAdvanced65 menitBahasa Indonesia

Nested Routes

Membaca dan merencanakan route bersarang dari folder dashboard, settings, dan child layout.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memetakan folder bersarang ke URL bersarang
  • Menentukan lokasi page dan layout untuk dashboard sub-route
  • Membedakan folder organisasi biasa dari segment route yang dapat diakses
Next.jsRoutingNested RoutesLayouts

Isi lesson

5 blok
  1. 1.
    Setiap folder menambah satu segment URLBelum selesaiWajib
  2. 2.
    Dashboard dan settings sebagai nested routeBelum selesaiWajib
  3. 3.
    Folder tanpa page bukan otomatis route yang bisa dikunjungiBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    RingkasanBelum selesaiWajib

Setiap folder menambah satu segment URL

Wajib

Folder bersarang di dalam app membuat URL bersarang dengan urutan yang sama. app/dashboard/settings/page.tsx menjadi /dashboard/settings. Jika app/dashboard/layout.tsx ada, settings page juga berada di dalam shell dashboard karena layout membungkus child route.

Struktur ini membantu menjaga feature tetap dekat dengan route-nya. Jangan membuat satu folder dashboard raksasa berisi semua page tanpa segment yang jelas. Gunakan folder ketika URL dan batas feature memang bertingkat, bukan hanya karena ingin mengelompokkan file secara visual.

Bagian ini memengaruhi progres lesson.

Dashboard dan settings sebagai nested route

Wajib
bash
app/
└── dashboard/
    ├── layout.tsx          # shell untuk /dashboard dan child route
    ├── page.tsx            # /dashboard
    ├── settings/
    │   └── page.tsx        # /dashboard/settings
    └── lessons/
        └── page.tsx        # /dashboard/lessons

dashboard adalah segment pertama. settings dan lessons adalah child segment. Ketiga page berada dalam layout dashboard, tetapi masing-masing page tetap memiliki tanggung jawab content route sendiri.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Folder tanpa page bukan otomatis route yang bisa dikunjungi

app/dashboard/settings/Preferences.tsx adalah component pendukung, bukan route /dashboard/settings. Agar URL tersebut dapat diakses, folder settings memerlukan page.tsx. Component pendukung boleh diletakkan dekat dengan route, tetapi nama file khusus tetap menentukan entry route.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Plan dashboard settings route tree

Lengkapi file map untuk dashboard overview, settings, dan lessons agar setiap URL memiliki page.tsx serta dashboard memiliki layout bersama.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

8 cek otomatis5 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Folder bersarang membentuk segment URL bersarang.
  • page.tsx menjadikan satu segment dapat diakses sebagai route.
  • Layout pada parent segment membungkus page dan child route di bawahnya.
  • Berikutnya, kamu akan membuat satu segment yang nilainya datang dari URL melalui folder [slug].

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Setiap folder menambah satu segment URL.

Memuat progresReview module