Nested Layout & Template

layout.tsx bersarang (nested) mempertahankan state dan tidak di-remount saat berpindah sub-route, sedangkan template.tsx selalu di-remount.

👀 Contoh dulu

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return <section><nav></nav>{children}</section>;
}

Hasilnya: Sidebar nav bertahan tanpa re-render saat navigasi antar tab dashboard.

💡 layout.tsx sangat hemat performa untuk tempat navigasi.

📝 Sekarang giliranmu

Tuliskan pembungkus layout export default function Layout({ children }: { children: React.ReactNode }) { return <div>{children}</div>; }.

Preview