Advanced · Level 10: Next.js App RouterAdvanced55 menitBahasa Indonesia

Route Groups

Mengorganisasi route dengan folder dalam tanda kurung tanpa memasukkan nama folder tersebut ke URL.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan convention folder route group
Memprediksi URL saat folder group digunakan
Menghindari konflik path dan pengelompokan yang tidak perlu

Next.jsRoutingRoute GroupsProject Organization

Isi lesson

5 blok

1.
Organisasi folder yang tidak mengubah URLBelum selesaiWajib
2.
Route group memisahkan marketing dan area aplikasiBelum selesaiWajib
3.
Checklist sebelum menambah route groupBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Organisasi folder yang tidak mengubah URL

Wajib

Route group adalah folder dengan nama di dalam tanda kurung, misalnya (marketing) atau (app). Folder ini membantu memisahkan route berdasarkan area produk, tim, atau layout concern tanpa menambahkan nama group ke URL. app/(marketing)/about/page.tsx tetap menghasilkan /about, bukan /marketing/about.

Gunakan route group saat struktur project perlu lebih jelas. Jangan membuat group hanya untuk setiap folder kecil. Group juga tidak boleh menghasilkan URL yang konflik, misalnya dua page /about dari group berbeda. Fokus module ini adalah organisasi dasar, bukan multiple root layout atau perilaku navigation yang lebih kompleks.

Bagian ini memengaruhi progres lesson.

Route group memisahkan marketing dan area aplikasi

Wajib

bash

app/
├── (marketing)/
│   ├── page.tsx             # /
│   └── about/
│       └── page.tsx         # /about
└── (app)/
    └── dashboard/
        └── page.tsx         # /dashboard

(marketing) dan (app) membantu pembaca folder tree melihat area produk yang berbeda. Tanda kurung membuat kedua folder ini tidak ikut menjadi segment URL. Folder dashboard tetap menjadi segment /dashboard karena namanya tidak memakai tanda kurung.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Checklist sebelum menambah route group

Pastikan group menjelaskan concern yang nyata seperti marketing dan app. Periksa bahwa dua group tidak membuat URL yang sama. Tetap letakkan page.tsx pada segment yang memang dapat diakses. Jika folder tree sudah jelas tanpa group, tidak ada kebutuhan untuk menambahnya sekarang.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

URL apa yang dibuat oleh app/(marketing)/about/page.tsx?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Route group memakai folder dalam tanda kurung seperti (marketing).
Nama route group tidak menjadi bagian URL.
Gunakan group untuk organization concern yang nyata dan hindari path conflict.
Berikutnya, Uji Kompetensi akan menggabungkan page, layout, nested route, dynamic segment, dan route group dalam satu route tree kecil.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Organisasi folder yang tidak mengubah URL.

Memuat progres Review module