Suggest an edit

Improve this article

Refine the answer for “How does app/layout.tsx work 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)

`app/layout.tsx` is the **shell of the interface**, which **wraps all pages further down the tree** and **does not unmount on navigation**. In the App Router, it is one of the key files.

## What `layout.tsx` is

In **Next.js**, every `layout.tsx`:

- applies **to all child segments**
- **persists between transitions**
- can be **nested**
- is a **Server Component** by default

## Basic example

```txt
app/
 ├─ layout.tsx        # global layout
 ├─ page.tsx          # /
 └─ dashboard/
     ├─ layout.tsx    # layout for /dashboard/*
     └─ page.tsx      # /dashboard
```

---

## How it works mentally

```txt
URL → layout (root)
        ↓
      layout (segment)
        ↓
       page
```

On transition:

```
/dashboard → /dashboard/users
```

- `app/layout.tsx` does not unmount
- `app/dashboard/layout.tsx` does not unmount
- only `page.tsx` changes

Therefore:

- state in the layout **persists**
- sidebars / headers **do not re-render**

---

## Minimal `app/layout.tsx`

```tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
```

**The root layout must**:

- return `<html>` and `<body>`
- be **the only one** in the project

---

## Nested layouts

```tsx
// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}
```

It applies only to:

- `/dashboard`
- `/dashboard/users`
- `/dashboard/settings`

---

## What a layout does NOT do

does not create a URL
does not have access to `params` (unless it is a segment layout)
does not re-render on navigation
should not contain heavy client logic without a reason

---

## Server vs Client layout

### Server (default, recommended)

```tsx
// without "use client"
```

- can do `await fetch`
- less JS in the browser
- better SEO

### Client layout

```tsx
"use client";
```

- can use `useState`, `useEffect`
- Zustand, context
- **increases the JS bundle**

A common pattern:

- the layout is **server**
- client components (Header, Sidebar) are mounted inside it

---

## Connection with `loading.tsx`

```txt
dashboard/
 ├─ layout.tsx
 ├─ loading.tsx
 └─ page.tsx
```

- `loading.tsx` is shown
- **the layout stays**
- only `page` changes

Ideal for skeletons.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.