Що таке layout у Next.js?

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

Layout у Next.js - це спеціальний компонент, який задає загальну структуру сторінки і перевикористовується між кількома сторінками.

Простіше кажучи: layout - це «каркас» сайту, який лишається на місці, а контент всередині нього змінюється.

Навіщо потрібен layout

Layout вирішує одразу кілька задач:

Загальна структура сторінки (шапка, підвал, сайдбар)
Перевикористання коду
Підвищення продуктивності
Керування метаданими та SEO
Єдині стилі для групи сторінок

Замість того щоб на кожній сторінці заново писати <Header /> і <Footer />, ти виносиш їх у layout - і вони автоматично застосовуються до всіх вкладених сторінок.

Як layout працює в Next.js (App Router)

В App Router layout - це файл layout.tsx (або layout.js), який лежить у папці маршруту.

Приклад структури:

txt

app/
 ├─ layout.tsx        ← кореневий layout
 ├─ page.tsx          ← головна сторінка
 └─ blog/
     ├─ layout.tsx    ← layout лише для /blog
     └─ page.tsx

Приклад простого layout

tsx

export default function RootLayout({ children }) {
  return (
    <html lang="uk">
      <body>
        <header>Шапка сайту</header>
        <main>{children}</main>
        <footer>Підвал</footer>
      </body>
    </html>
  )
}

Тут:

children - це контент поточної сторінки
header і footer не перемальовуються при переході між сторінками

Вкладені layout'и

Layouts можуть бути вкладеними.

Наприклад:

кореневий layout - для всього сайту
layout в /dashboard - лише для адмінки
layout в /blog - лише для блогу

Кожен вкладений layout обгортає сторінки всередині своєї папки.

Це зручно, якщо:

у різних розділів різний дизайн
потрібна окрема навігація
різні метадані чи SEO-налаштування

Чим layout відрізняється від page

page	layout
Відповідає за конкретну сторінку	Відповідає за структуру
Змінюється при навігації	Зберігається
Рендериться щоразу	Перевикористовується
Показує контент	Обгортає контент

Важливий момент

Layout за замовчуванням - Server Component, тому:

можна робити запити до БД
можна читати cookies і headers
не можна використовувати useState і useEffect без "use client"

Коротко по суті

Layout у Next.js - це:

загальний шаблон сторінки, який лишається на місці при навігації й обгортає контент дочірніх сторінок

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

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

Premium

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

Що таке layout у Next.js?

#Навіщо потрібен layout

#Як layout працює в Next.js (App Router)

#Приклад простого layout

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

#Чим layout відрізняється від page

#Важливий момент

#Коротко по суті