nextjsroutinglayoutPemula3 mnt baca

Route Group: Mengelompokkan Route Tanpa Mengubah URL

Memakai folder (nama) untuk mengorganisasi route dan memberi layout berbeda tanpa memengaruhi URL.

Masalahnya

Kamu ingin halaman marketing (/tentang, /harga) memakai layout dengan navbar promosi, sedangkan halaman aplikasi (/dashboard, /profil) memakai layout dengan sidebar. Kalau pakai folder biasa, URL ikut berubah jadi /marketing/tentang. Tidak mau, kan?

Solusinya: kurung biasa

Folder dengan nama dalam kurung biasa, misal (marketing), tidak memengaruhi URL:

app/
├── (marketing)/
│   ├── layout.tsx      # layout khusus marketing
│   ├── tentang/
│   │   └── page.tsx    → /tentang
│   └── harga/
│       └── page.tsx    → /harga
└── (app)/
    ├── layout.tsx      # layout khusus aplikasi (sidebar)
    └── dashboard/
        └── page.tsx    → /dashboard

URL tetap /tentang dan /dashboard, tapi masing-masing memakai layout berbeda. Rapi.

Kegunaan lain

Route group juga berguna untuk memecah route yang panjang menjadi beberapa layout logis, atau memisahkan route yang butuh loading UI berbeda. Satu URL hanya bisa memakai satu layout dari grupnya, jadi rencanakan pengelompokannya dari awal.

tsx

// app/(marketing)/layout.tsx
// Hanya membungkus halaman di dalam grup (marketing)
export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <nav>Navbar promosi</nav>
      {children}
      <footer>Footer promosi</footer>
    </>
  );
}

Tips praktis

Beri nama grup sesuai fungsinya, misal (marketing), (auth), atau (dashboard), dan dokumentasikan artinya di README project. Anggota tim baru akan berterima kasih. Hindari membuat grup hanya untuk satu halaman; grup baru layak dibuat kalau ada minimal 2-3 route yang berbagi layout atau perilaku.

Kesalahan umum pemula

Mengira nama grup muncul di URL. Folder (marketing) tidak menambah segmen URL. Kalau URL-mu jadi /(marketing)/tentang, berarti ada yang salah.
Terlalu banyak grup bersarang. Grup di dalam grup bikin pusing. Dua level grup biasanya sudah cukup untuk kebanyakan aplikasi.
Lupa layout di grup. Setiap grup yang butuh layout berbeda wajib punya layout.tsx sendiri, kalau tidak ia memakai layout parent.

Latihan singkat

Buat dua grup: (publik) berisi /tentang, dan (dasbor) berisi /dasbor dengan sidebar sederhana.
Buka kedua URL dan pastikan layout-nya berbeda walau tidak ada nama grup di URL.

Rangkuman

Folder (nama) mengelompokkan route tanpa memengaruhi URL.
Kegunaan utama: layout berbeda untuk grup halaman berbeda (marketing vs aplikasi).
Satu URL hanya memakai satu layout dari grupnya.
Jangan bersarang berlebihan agar struktur tetap mudah dilacak.

Catatan teknis: Route group bisa bersarang, misal (marketing)/(auth). Tapi jangan berlebihan. Terlalu banyak grup bikin struktur folder membingungkan dan susah dilacak layout mana yang dipakai halaman tertentu.