Pahami Struktur Folder untuk Cara Membuat Nested Layout Next Js

Ditulis oleh Next.js

Cara membuat nested layout Next.js cukup dengan menaruh file layout.tsx di setiap level folder App Router. Folder app/dashboard/settings otomatis memakai layout induk app/dashboard/layout.tsx lalu layout anak app/dashboard/settings/layout.tsx. Langkah yang sering terlewat adalah meneruskan children di setiap layout, tanpa itu halaman anak tidak tampil.

Cara Kerja Nested Layout di App Router

Next.js membaca struktur folder sebagai segmen route. Setiap layout.tsx membungkus semua halaman di bawahnya.

  • layout.tsx induk tetap terpasang saat navigasi antar halaman anak, jadi state dan UI seperti sidebar tidak hilang.
  • page.tsx adalah konten unik tiap route, sedangkan layout.tsx adalah cangkang bersama.
  • template.tsx mirip layout, tetapi dibuat ulang setiap navigasi dan cocok untuk animasi atau reset state.
  • Layout bawaan adalah Server Component. Komponen ini tidak bisa memakai useState, useEffect, atau event browser langsung.

Langkah Cara Membuat Nested Layout Next Js

  1. Buat struktur folder app/dashboard/settings. Tambahkan page.tsx di tiap level untuk menguji routing.
  2. Tambah layout induk lalu layout anak. Induk mengatur kerangka dashboard, anak mengatur kerangka khusus settings.
// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <section>
      <aside>Sidebar Dashboard</aside>
      <div>{children}</div>
    </section>
  );
}

// app/dashboard/settings/layout.tsx
export default function SettingsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <h2>Pengaturan</h2>
      {children}
    </div>
  );
}

3. Tampilkan children dan cek hasil routing. Buka /dashboard lalu /dashboard/settings dan pastikan kedua layout tampil bersarang.

BACA JUGA:

Pola Umum dan Kesalahan Nested Layout

  • Sidebar dashboard dengan header tetap dan konten kanan berganti.
  • Segmen auth memakai route group seperti (auth) agar login dan register berbagi layout tanpa mengubah URL.
  • Dynamic route [id] memakai layout anak untuk tab detail, edit, dan statistik.
Kondisi Perilaku Layout Catatan
Pindah antar anak Induk dipertahankan Cocok untuk sidebar
Ganti template State direset Pakai untuk animasi masuk
Layout dinamis [id] Dipertahankan per segmen Validasi params di server

Kesalahan umum adalah menduplikasi state di induk dan anak, fetch data sama berulang kali, dan menaruh use client di layout besar hanya karena satu tombol butuh interaktivitas. Pisahkan bagian interaktif ke Client Component kecil.

FAQ

Apakah nested layout merender ulang saat pindah halaman?

Layout induk yang tetap tidak dirender ulang, hanya page.tsx anak yang berubah.

Kapan memakai route group dibanding folder biasa?

Pakai route group seperti (admin) saat butuh layout berbeda tanpa menambah segmen URL.

Apakah layout anak bisa jadi Client Component?

Bisa dengan menambah use client, tetapi hanya lakukan bila layout tersebut memang butuh state atau event browser.

Artikel Terkait