Kodeloka
🎯 Poin-Poin Utama Modul Ini:
- Layout (
layout.tsx) mempertahankan state komponen & scroll position saat berpindah route anak - Template (
template.tsx) menciptakan instance baru & re-mount komponen di setiap navigasi - Nested Layouts memungkinkan pembagian struktur UI hierarkis (Dashboard Sidebar, Settings Tab)
🏛️ Konsep Layout vs Template
Dalam App Router, kita dapat menyusun UI secara hierarkis menggunakan Nested Layouts.
Perbedaan Kunci:
- layout.tsx: Tidak mengalami re-render saat navigasi antar child route. Sangat cocok untuk Sidebar, Header, Footer.
- template.tsx: Mengalami re-creation DOM & reset state setiap kali route berubah. Cocok untuk animasi CSS entry/exit (Page Transitions) atau tracking analytics per halaman.
💻 Kode Contoh Nested Dashboard Layout
app/dashboard/layout.tsx
import Sidebar from "@/components/Sidebar";
export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="flex min-h-screen">
<Sidebar />
<main className="flex-1 p-8">{children}</main>
</div>
);
}