mediumFrontend

What are layouts and nested layouts in the Next.js App Router?

Q: What are layouts and nested layouts in the Next.js App Router?

**TL;DR.** A layout.tsx wraps its segment **and all child segments** with shared UI (nav, sidebar) and **persists across navigation** without re-rendering or losing state. Layouts **nest** by folder hierarchy, so each level adds its own shell around the children below it. root layout (html/body, nav) dashboard layout (sidebar) page (changes on navigation) layouts above persist **How it works.** A layout is

870 views

Understand the problem

Shared UI that persists across navigations and nests by folder.

nextjslayoutsapp-routerrouting

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Root + nested layout

// app/layout.tsx (root — required)
export default function RootLayout({ children }) {
  return <html><body><nav>…</nav>{children}</body></html>;
}

// app/dashboard/layout.tsx (nested — adds a sidebar, persists across /dashboard/*)
export default function DashboardLayout({ children }) {
  return <div className="grid"><aside>sidebar</aside><main>{children}</main></div>;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you revalidate data after a mutation in Next.js?

What is Middleware in Next.js and what can it do?