Nested Layouts

Layouts compose by folder

Each segment can declare its own layout.tsx. They nest automatically: a child layout renders inside its parent. The render tree is exactly what the folder tree looks like.

app/layout.tsx                       → wraps everything
  app/dashboard/layout.tsx           → wraps /dashboard/*
    app/dashboard/settings/page.tsx  → rendered inside both layouts

What persists, what re-renders

Navigating from /dashboard/settings to /dashboard/billing only swaps the page; both layouts stay mounted. Navigating from /dashboard/settings to /marketing/pricing unmounts the dashboard layout and mounts whatever wraps marketing.

`layout.tsx` vs `template.tsx`

Use layout.tsx by default. Use template.tsx when you need fresh state or enter/exit animations on every navigation — it re-mounts each time. The name in the folder is the only difference; the props are the same.

Draw the route tree before choosing where state lives. State shared by every dashboard page belongs in the dashboard layout; state shared by the whole application belongs at the root. The common ancestor of two URLs tells you which layout survives their transition. Using template.tsx to force a remount can hide state-placement bugs, but it also discards form input and cached client state. Reach for a template only when a fresh instance on every navigation is the intended experience, such as a replayed entrance transition.

Log mount and unmount events for root, dashboard, and page nodes while navigating within and outside the dashboard. Repeat with a template. If the only evidence is that the screen looks right, you have not verified the lifetime contract.

Code

Three-level nesting in action·tsx

// app/layout.tsx — site chrome
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en"><body>
      <SiteNav />
      {children}
    </body></html>
  );
}

// app/(app)/layout.tsx — app chrome (uses route group; URL doesn't include /(app)/)
export default function AppLayout({ children }: { children: React.ReactNode }) {
  return <div className="flex"><AppSidebar /><div className="flex-1">{children}</div></div>;
}

// app/(app)/dashboard/layout.tsx — dashboard chrome
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return <div className="p-6 space-y-4"><DashboardTabs />{children}</div>;
}

// app/(app)/dashboard/billing/page.tsx — wrapped by all three above

Use template for re-mount semantics·tsx

// app/(app)/dashboard/template.tsx — fresh instance per navigation
'use client';
import { motion } from 'framer-motion';

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.18 }}
    >
      {children}
    </motion.div>
  );
}

Layouts compose by folder

What persists, what re-renders

`layout.tsx` vs `template.tsx`

Code

External links

Exercise

Progress

Comments 0

Layouts compose by folder

What persists, what re-renders

layout.tsx vs template.tsx

Code

External links

Exercise

Progress

`layout.tsx` vs `template.tsx`