Nested Layouts in Next.js

Nested layouts allow you to define layouts inside layouts. Each layout applies to all routes inside its folder while inheriting the parent layout.

What is a Nested Layout?

A nested layout is a layout.js file placed inside a nested folder. It wraps all pages and layouts inside that folder.

app/
 ├── layout.js                 → Root layout
 ├── dashboard/
 │   ├── layout.js             → Dashboard layout
 │   ├── page.js               → /dashboard
 │   └── settings/
 │       └── page.js           → /dashboard/settings

How Nested Layouts Work

When a page is rendered, Next.js combines layouts from the root down to the deepest nested layout before rendering the page content.

Root Layout
 └── Dashboard Layout
     └── Page Content

Real World Example

Think of a company office building.

The building has a common entrance and security. Each department has its own internal layout.

Root Layout       → Building entrance
Nested Layout      → Department floor
Page               → Individual room

Why Nested Layouts are Important

Nested layouts help reuse UI like sidebars and navigation, reduce code duplication, and improve performance by preserving layout state.

Key Difference from page.js

Pages change during navigation, but layouts persist and do not re-render unless necessary.