Що таке Root Layout?

Next.jsMiddle~1 хв читання

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.