What are layouts in Next.js and how do nested layouts work?

Q: What are layouts in Next.js and how do nested layouts work?

**Target Audience:** Beginners preparing for Next.js interviews — assumes basic React (components, props, state). **Difficulty:** Easy > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against a lab app built with `next build`, served with `next start` and driven by a real Chromium browser. ## 1. Why This Even Matters — A Story First Think of a shopping mall. The building, the corridors and the information desk stay where they are; only the shop you walk into changes. You do not rebuild the mall every time you go from the shoe shop to the bookshop. A layout in Next.js is the mall: the header, the sidebar, the music player — the parts that stay. The page is the shop. Because the layout stays put while you move between pages, whatever is inside it (an open menu, a playing video, a typed search) is

The problem

Question presented to candidate: "In the Next.js App Router, what is a layout, how do layouts nest, and what actually happens to a layout when the user clicks between two pages that share it?"

What a strong answer should cover:

A layout is a layout.tsx file whose component receives children and wraps every page in that folder and below it.
The root layout in app/ is required and must render <html> and <body>; nested layouts stack by folder (root > dashboard > settings > page).
On client navigation, shared layouts are kept: they do not re-render or remount, so their state (and Client Components inside them) survives.
Consequences: layouts cannot read searchParams and should not depend on the pathname; use a Client Component with usePathname or the page props instead. They cannot pass props to children.
template.tsx is the alternative that remounts on every navigation; route groups and multiple root layouts change which layout applies.

Clarifying questions expected:

"Should this UI keep its state between pages (a sidebar, a player) or reset (an animation, a form)?" — that is the layout versus template choice.
"Do different sections need entirely different shells?" — route groups or multiple root layouts.

Code / implementation expected: Yes — a root layout plus one nested layout with two pages.

nextjs
app-router
layouts

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for Next.js interviews — assumes basic React (components, props, state). Difficulty: Easy

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the Verified section, against a lab app built with next build, served with next start and driven by a real Chromium browser.

1. Why This Even Matters — A Story First

Think of a shopping mall. The building, the corridors and the information desk stay where they are; only the shop you walk into changes. You do not rebuild the mall every time you go from the shoe shop to the bookshop. A layout in Next.js is the mall: the header, the sidebar, the music player — the parts that stay. The page is the shop. Because the layout stays put whi

The solution is hidden so you can try first

8 min read · 9 sections

Read the code

Root layout, a nested dashboard layout and its pages

// app/layout.tsx — root layout: required, wraps every route
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>My Shop</header>
        {children}
      </body>
    </html>
  );
}

// app/dashboard/layout.tsx — wraps /dashboard and everything below it
import DashboardNav from "./DashboardNav";

export default function DashboardLayout({ children }: LayoutProps<"/dashboard">) {
  return (
    <section style={{ display: "flex", gap: 24 }}>
      <DashboardNav />
      <main>{children}</main>
    </section>
  );
}

// app/dashboard/page.tsx — URL /dashboard
export default function DashboardHome() {
  return <h1>Overview</h1>;
}

// app/dashboard/settings/page.tsx — URL /dashboard/settings
// Rendered as: RootLayout > DashboardLayout > SettingsPage
export default function SettingsPage() {
  return <h1>Settings</h1>;
}

Active nav link in a layout (Client Component)

// app/dashboard/DashboardNav.tsx
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

const links = [
  { href: "/dashboard", label: "Overview" },
  { href: "/dashboard/settings", label: "Settings" },
];

export default function DashboardNav() {
  // Layouts do not re-render on navigation, but this Client Component does,
  // so it always sees the current pathname.
  const pathname = usePathname();
  return (
    <nav>
      {links.map((l) => (
        <Link key={l.href} href={l.href} aria-current={pathname === l.href ? "page" : undefined}>
          {l.label}
        </Link>
      ))}
    </nav>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.