Suggest an edit

Improve this article

Refine the answer for “What is a Root Layout?”. 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 Root Layout** is the top-level, primary layout in a Next.js application.
It wraps **absolutely all pages and nested layouts** and sets the base structure of the whole site.

To put it simply:

> A Root Layout is the foundation of the application - without it, the site simply won't start.

---

## Where the Root Layout lives

The Root Layout is a file:

```txt
app/layout.tsx
```

It is **required** when using the App Router.
Without it, Next.js throws an error.

---

## What the Root Layout does

The Root Layout handles tasks that apply to the **whole application**, not individual pages.

### 1. Defines the HTML document

Only in the Root Layout can you directly write:

```tsx
<html lang="en">
  <body>{children}</body>
</html>
```

Here you set:

- the document's language
- the overall `<html>` and `<body>` structure

Neither pages nor nested layouts can do this.

---

## 2. Includes global styles

Global CSS files are imported right here:

```tsx
import './globals.css'
```

This guarantees that styles apply to the whole application.

---

## 3. Holds global providers

The Root Layout is the **best place** for:

- a ThemeProvider
- a localization provider (i18n)
- global state
- an auth context

```tsx
<AuthProvider>
  {children}
</AuthProvider>
```

This makes these providers available anywhere in the application.

---

## 4. Sets the base metadata

The Root Layout usually sets:

- the overall `title`
- `description`
- the favicon
- fonts
- base SEO settings

All pages **inherit** this metadata unless they override it.

---

## 5. Affects the performance of the whole application

Because the Root Layout:

- does not re-render on navigation
- is a Server Component
- is not hydrated on the client

it:

- reduces the amount of JavaScript
- speeds up transitions
- stabilizes the interface

---

## Root Layout example

```tsx
import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  )
}
```

A minimal, but fully working, variant.

---

## How a Root Layout differs from a regular layout

|  | Root Layout | Regular layout |
|---|---|---|
| Location | `app/layout.tsx` | Any folder |
| Required | Yes | No |
| Controls `<html>` and `<body>` | Yes | No |
| Covers the whole application | Yes | Only its own section |
| Usually contains | Global things | UI for a specific section |

---

### In short

A Root Layout is:

- the application's root layout
- the entry point for the HTML document
- the place for global styles, providers, and SEO
- the foundation of Next.js's performance and structure

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.