Frontend Beauty
ESC

Type to search the knowledge base.

Layouts and Nested Routes

Nested layouts in the App Router share chrome across routes, preserve state, and compose with loading and templates.

beginner3 min read
  • nextjs
  • layouts-and

Layouts wrap child segments and do not remount on navigation between those children — perfect for sidebars, nav, and providers that should keep state.

Docs: Layouts and Templates.

Nesting

app/
  layout.tsx                 # root html/body
  dashboard/
    layout.tsx               # dashboard chrome
    page.tsx                 # /dashboard
    settings/
      page.tsx               # /dashboard/settings
// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="dashboard">
      <SideNav />
      <div>{children}</div>
    </div>
  );
}

Navigating from /dashboard to /dashboard/settings keeps SideNav state (scroll, open sections) unless you force remounts.

layout versus template

template.tsx remounts on navigation — use for enter animations or state that must reset. Default to layout.tsx.

Root layout requirements

Root layout must include <html> and <body>. Only one root layout.

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Data and auth in layouts

Layouts can be Server Components that fetch shared data. Avoid extremely personalized blocking fetches in the root layout without streaming — you will delay every page. Prefer segment layouts closer to the need, and loading UI for slow parts.

Interview out-loud

“Layouts nest shared UI and preserve state across child navigations. Templates remount. Root layout owns html and body. I put chrome and providers in layouts and keep page files focused on segment-specific UI.”

Further reading

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Quick self-test

Explain the concept in 60 seconds, write a minimal code sample from memory, name one footgun, and point to the primary docs. If any of those fail, reread the worked example and rebuild it in a scratch file until the model sticks under interview pressure.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides