Suggest an edit

Improve this article

Refine the answer for “What is a layout in Next.js?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**A layout in Next.js** is a special component that sets the **overall page structure** and is **reused** across multiple pages.

In other words: a layout is the site's "shell" that stays in place while the content inside it changes.

---

## Why a layout is needed

A layout solves several tasks at once:

- Overall page structure (header, footer, sidebar)
- Code reuse
- Better performance
- Managing metadata and SEO
- Consistent styles for a group of pages

Instead of writing `<Header />` and `<Footer />` from scratch on every page, you move them into a layout - and they are automatically applied to all nested pages.

---

## How a layout works in Next.js (App Router)

In the App Router, a layout is a `layout.tsx` (or `layout.js`) file that sits in a route's folder.

Example structure:

```txt
app/
 ├─ layout.tsx        ← root layout
 ├─ page.tsx          ← the home page
 └─ blog/
     ├─ layout.tsx    ← layout only for /blog
     └─ page.tsx
```

---

## A simple layout example

```tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>Site header</header>
        <main>{children}</main>
        <footer>Footer</footer>
      </body>
    </html>
  )
}
```

Here:

- `children` is the **current page's content**
- `header` and `footer` **do not re-render** when moving between pages

---

## Nested layouts

Layouts can be **nested**.

For example:

- a root layout - for the whole site
- a layout in `/dashboard` - only for the admin panel
- a layout in `/blog` - only for the blog

Each nested layout **wraps** the pages inside its own folder.

This is convenient when:

- different sections have a different design
- separate navigation is needed
- different metadata or SEO settings are needed

---

## How a layout differs from a page

| page | layout |
|---|---|
| Responsible for a specific page | Responsible for the structure |
| Changes on navigation | Is preserved |
| Renders every time | Is reused |
| Shows content | Wraps content |

---

## An important point

A layout is a **Server Component by default**, so:

- you can make database queries
- you can read cookies and headers
- you cannot use `useState` and `useEffect` without `"use client"`

---

### In short

A layout in Next.js is:

> a shared page template that stays in place during navigation and wraps the content of its child pages

Markdown · drag & drop images · ⌘B / ⌘I shortcuts399 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.