Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як працює app/layout.tsx в Next.js?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

`app/layout.tsx` - це **каркас (shell) інтерфейсу**, який **обгортає всі сторінки нижче по дереву** і **не розмонтовується при навігації**. В App Router це один із ключових файлів.

## Що таке `layout.tsx`

У **Next.js** кожен `layout.tsx`:

- застосовується **до всіх дочірніх сегментів**
- **зберігається між переходами**
- може бути **вкладеним**
- типово є **Server Component**

## Базовий приклад

```txt
app/
 ├─ layout.tsx        # глобальний layout
 ├─ page.tsx          # /
 └─ dashboard/
     ├─ layout.tsx    # layout для /dashboard/*
     └─ page.tsx      # /dashboard
```

---

## Як він працює ментально

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

При переході:

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

- `app/layout.tsx` не розмонтовується
- `app/dashboard/layout.tsx` не розмонтовується
- змінюється лише `page.tsx`

Тому:

- стан у layout **зберігається**
- сайдбари / хедери **не перемальовуються**

---

## Мінімальний `app/layout.tsx`

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

**Root layout зобов'язаний**:

- повертати `<html>` та `<body>`
- бути **єдиним** на проєкт

---

## Вкладені layout'и

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

Застосується тільки до:

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

---

## Що layout НЕ робить

не створює URL
не має доступу до `params` (якщо не сегментний)
не перемальовується при навігації
не повинен містити важку client-логіку без причини

---

## Server vs Client layout

### Server (типово, рекомендовано)

```tsx
// без "use client"
```

- можна робити `await fetch`
- менше JS у браузері
- краще SEO

### Client layout

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

- можна `useState`, `useEffect`
- Zustand, context
- **збільшує JS-бандл**

Частий патерн:

- layout - **server**
- всередині підключати client-компоненти (Header, Sidebar)

---

## Зв'язок з `loading.tsx`

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

- `loading.tsx` показується
- **layout залишається**
- змінюється лише `page`

Ідеально для skeleton'ів.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати317 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.