Layout: Template Bersama Antar Halaman

Apa itu layout?

Layout adalah template yang membungkus halaman. Navbar dan footer yang muncul di semua halaman adalah contoh klasik. Di Next.js, file app/layout.tsx adalah root layout yang wajib ada:

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="id">
      <body>
        <nav>Navbar selalu tampil</nav>
        {children}
        <footer>Footer selalu tampil</footer>
      </body>
    </html>
  );
}

children akan diisi halaman yang sedang dibuka (atau layout di bawahnya).

Nested layout

Setiap folder bisa punya layout.tsx sendiri. Layout ini membungkus semua halaman di folder tersebut:

Halaman /dashboard akan dibungkus sidebar layout dulu, lalu root layout. Hasilnya tersarang rapi.

Keunggulan: tidak re-render

Saat pindah dari /dashboard ke /dashboard/profil, layout yang sama tidak di-render ulang. State di layout (misal menu sidebar yang terbuka) tetap terjaga. Ini beda dengan pola lama yang me-render ulang seluruh halaman setiap navigasi.

Template vs layout

Butuh perilaku sebaliknya, yaitu me-render ulang setiap navigasi (misal animasi masuk tiap halaman)? Pakai template.tsx. Namanya mirip, perilakunya kebalikan dari layout.

Kesalahan umum pemula

• Lupa tag <html> dan <body> di root layout. Ini wajib dan error-nya muncul saat build. Layout anak tidak boleh menambah tag ini lagi.
• Menaruh "use client" di root layout. Akibatnya seluruh aplikasi jadi Client Component dan keuntungan Server Component hilang.
• Menyimpan state halaman di layout. Layout tidak re-render saat navigasi, jadi state form yang disimpan di layout akan terbawa ke halaman lain. Simpan state di halaman atau komponennya.

Latihan singkat

1. Buat nested layout di app/blog/layout.tsx yang menambah judul "Blog" di atas setiap artikel.
2. Pindah dari /blog/a ke /blog/b (buat dua artikel dummy) dan perhatikan layout tidak berkedip atau re-render.

Rangkuman

• layout.tsx membungkus halaman dengan template bersama seperti navbar dan footer.
• app/layout.tsx adalah root layout wajib dengan tag <html> dan <body>.
• Layout bersarang (nested) dan tidak re-render saat navigasi di segmen yang sama.
• Butuh re-render tiap navigasi? Pakai template.tsx.

Catatan teknis: Root layout wajib me-render tag <html> dan <body>. Kalau lupa, Next.js akan error saat build. Layout di bawah root tidak boleh menambah <html> lagi.