Rapikan Layout tanpa Ubah URL dengan Cara Membuat Route Group Next Js

Ditulis oleh Next.js

Cara membuat route group Next.js yang paling sering terlewat adalah memberi nama folder dengan kurung, misalnya (dashboard), bukan dashboard. Tanpa kurung, nama folder ikut menjadi segmen URL. Dengan kurung, Next.js mengabaikannya dari URL tetapi tetap memakainya untuk mengelompokkan layout.

Hasil Akhir Route Group di App Router

Folder dalam kurung hanya berfungsi sebagai pembungkus organisasi. Route di dalamnya tetap diakses dari root.

Struktur seperti app/(dashboard)/settings/page.tsx menghasilkan URL /settings, bukan /(dashboard)/settings. Ini cocok ketika beberapa halaman butuh layout berbeda tetapi URL harus tetap pendek.

  • Gunakan satu grup untuk area login, misalnya semua halaman dashboard memakai sidebar.
  • Gunakan grup lain untuk halaman marketing, misalnya landing dan pricing memakai header publik.
  • Pisahkan grup auth, misalnya login dan register memakai layout kosong tanpa navigasi.

Langkah Membuat Folder Route Group

Buat grup di dalam app, lalu pindahkan route yang berkaitan ke dalamnya.

  1. Buat folder app/(dashboard) dan app/(marketing).
  2. Pindahkan settings/page.tsx ke (dashboard)/settings/page.tsx.
  3. Pindahkan pricing/page.tsx ke (marketing)/pricing/page.tsx.
  4. Tambahkan layout.tsx berbeda di tiap grup.
app/
  layout.tsx
  (dashboard)/
    layout.tsx
    settings/page.tsx
  (marketing)/
    layout.tsx
    pricing/page.tsx

// app/(dashboard)/layout.tsx
export default function DashboardLayout({ children }) {
  return <div className="dashboard">{children}</div>;
}
  • Nama grup wajib memakai kurung buka dan tutup, contoh (dashboard).
  • Grup boleh berisi page.tsx, layout.tsx, loading.tsx, dan error.tsx.
  • Jangan membuat folder grup kosong tanpa route karena tidak menghasilkan halaman.

BACA JUGA:

Perbedaan Route Group dan Nested Layout

Nested layout mengikuti struktur URL. Route group memutus hubungan itu.

Pola Pengaruh URL Kegunaan
Nested folder biasa Menambah segmen URL bertingkat seperti /dashboard/settings
Route group Diabaikan Layout berbeda dengan URL tetap bersih
Layout root Berlaku global Font, html, dan body bersama
  • Layout root di app/layout.tsx tetap membungkus semua grup.
  • Kesalahan umum adalah menulis dashboard tanpa kurung sehingga URL berubah.
  • Kesalahan lain adalah menduplikasi seluruh markup root di layout grup sehingga HTML bersarang.

FAQ

Apakah route group mengubah URL?

Tidak, nama dalam kurung diabaikan Next.js dari URL.

Bisakah route group dipakai bertingkat?

Bisa, grup dapat disarangkan untuk memisahkan layout lebih detail.

Apakah perlu file khusus selain folder?

Cukup folder plus page dan layout bila dibutuhkan.

Artikel Terkait