Sign in
Skip to solution
mediumFrontend

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

870 views
01

Understand the problem

Shared UI that persists across navigations and nests by folder.

nextjslayoutsapp-routerrouting
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

A layout.js wraps its segment and all child segments with shared UI (nav, sidebar) and persists state across navigation without re-rendering. Layouts nest by folder hierarchy, so each level adds its own shell around the children.

Solution ready — 2 min read

Classified // press E to declassify

04

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>;
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 33 of 95 decoded in the Next.js track. One more won't hurt.

Back to track