Nested Layouts for Shared UI

The root layout defines the global structure of your application. However, different sections of your app often need their own shared UI.

For example, a dashboard may have its own sidebar and layout that is different from the public pages.

Next.js solves this using nested layouts.

A nested layout is a layout.tsx file inside a route folder. It wraps only the pages within that folder.

Creating a Nested Layout

Example structure:

app/
  layout.tsx
  dashboard/
    layout.tsx
    page.tsx
    settings/
      page.tsx

How It Works

• app/layout.tsx → wraps the entire app;
• dashboard/layout.tsx → wraps only dashboard pages;

So when you visit:

/dashboard/settings

Both layouts are applied.

Example - Dashboard Layout

export default function DashboardLayout({ children }) {
  return (
    <div>
      <aside>Sidebar</aside>
      <main>{children}</main>
    </div>
  );
}

This layout will wrap all pages inside the dashboard/ folder.

What Gets Rendered

If the page is:

export default function SettingsPage() {
  return <h1>Settings</h1>;
}

The final output will be:

Root Layout
  → Dashboard Layout
      → Settings Page

Why Nested Layouts Are Useful

• You can create different UI for different sections;
• You avoid repeating layout code;
• Your app becomes more modular and scalable;
• Each section can have its own structure.

Real Example

• Public pages → simple layout;
• Dashboard → layout with sidebar;
• Admin → layout with advanced controls.

Each part of the app can have its own design.