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

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

Допрацюйте відповідь до «Що таке Root Layout?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

**Root Layout** - це головний, найвищий layout у застосунку Next.js.
Він обгортає **абсолютно всі сторінки й вкладені layout'и** та задає базову структуру всього сайту.

Якщо спростити:

> Root Layout - це фундамент застосунку, без нього сайт просто не запуститься.

---

## Де знаходиться Root Layout

Root Layout - це файл:

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

Він **обов'язковий** при використанні App Router.
Без нього Next.js видасть помилку.

---

## Що робить Root Layout

Root Layout вирішує задачі, які стосуються **всього застосунку**, а не окремих сторінок.

### 1. Визначає HTML-документ

Лише в Root Layout можна напряму описувати:

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

Тут задаються:

- мова документа
- загальна структура `<html>` і `<body>`

Ні сторінки, ні вкладені layout'и цього робити не можуть.

---

## 2. Підключає глобальні стилі

Глобальні CSS-файли імпортуються саме тут:

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

Це гарантує, що стилі застосовуються до всього застосунку.

---

## 3. Зберігає глобальні провайдери

Root Layout - найкраще місце для:

- ThemeProvider
- провайдера локалізації (i18n)
- глобального стану
- контексту авторизації

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

Так ці провайдери доступні в будь-якому місці застосунку.

---

## 4. Задає базові метадані

У Root Layout зазвичай задають:

- загальний `title`
- `description`
- favicon
- шрифти
- базові SEO-налаштування

Усі сторінки **успадковують** ці метадані, якщо не перевизначають їх.

---

## 5. Впливає на продуктивність усього застосунку

Оскільки Root Layout:

- не перемальовується при навігації
- є Server Component
- не гідратується на клієнті

він:

- зменшує обсяг JavaScript
- прискорює переходи
- стабілізує інтерфейс

---

## Приклад Root Layout

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

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

Мінімальний, але повністю робочий варіант.

---

## Чим Root Layout відрізняється від звичайного layout

|  | Root Layout | Звичайний layout |
|---|---|---|
| Розташування | `app/layout.tsx` | Будь-яка папка |
| Обов'язковий | Так | Ні |
| Керує `<html>` і `<body>` | Так | Ні |
| Охоплює весь застосунок | Так | Лише свій розділ |
| Зазвичай містить | Глобальні речі | UI конкретного розділу |

---

### Коротко

Root Layout - це:

- кореневий layout застосунку
- точка входу для HTML-документа
- місце для глобальних стилів, провайдерів і SEO
- основа продуктивності та структури Next.js

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

Для рев’юера

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

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