Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке layout у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Layout у Next.js** - це спеціальний компонент, який задає **загальну структуру сторінки** і **перевикористовується** між кількома сторінками. **Ключове:** layout - це «каркас» сайту, який лишається на місці, а контент всередині нього змінюється.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**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 - це: > загальний шаблон сторінки, який лишається на місці при навігації й обгортає контент дочірніх сторінокДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.