Короткое определение

Layout — это компонент, который оборачивает содержимое страницы и определяет общую структуру интерфейса (заголовок, подвал, навигация). Проще: layout отвечает за каркас страницы.

Почему использовать Layout

• Обеспечивает единый внешний вид и поведение на всех страницах.
• Уменьшает дублирование кода (Header/Footer в одном месте).
• Упрощает внесение глобальных изменений (например, переход на новую структуру навигации).

Важно: Layout не должен содержать бизнес-логику; он управляет структурой и общими визуальными элементами.

Создание компонента Layout (Pages Router — Next.js 12 и ниже)

В папке components создайте файл Layout.jsx и разместите туда следующий код. Обратите внимание: компонент получает children через деструктуризацию props.

import Head from 'next/head'
import Header from './Header.jsx'
import Footer from './Footer.jsx'

const Layout = ({ children }) => (
  

    
      
      
    

    

      {children}
    
)

export default Layout

Ключевые моменты:

• Используйте { children } вместо одиночного аргумента.
• Head из next/head позволяет управлять метаданными отдельно для Layout.
• Header и Footer — отдельные компоненты, их код держите компактным и переиспользуемым.

Использование Layout на отдельной странице

Импортируйте Layout и оберните разметку страницы:

import Layout from '../components/Layout'

const Page = () => (
  
    
Home
  
)

export default Page

Это применит общий каркас только к этой странице.

Применение Layout ко всем страницам (pages/_app.js)

Чтобы Layout оборачивал все страницы проекта (Pages Router), подключите его в файле pages/_app.js:

import Layout from '../components/Layout'

function MyApp({ Component, pageProps }) {
  return (
    
      
    
  )
}

export default MyApp

Root layout в app/ (Next.js 13+ — App Router)

App Router требует наличия корневого layout в папке app. Этот layout применяется ко всем страницам приложения.

Создайте app/layout.jsx с таким содержимым:

export default function RootLayout({ children }) {
  return (
    
      {children}
    
  )
}

Особенности root layout в app/:

• Файл должен находиться в папке app.
• Он явным образом содержит html и body.
• По умолчанию это серверный компонент.
• Заменяет _app.js и _document.js из Pages Router.

Вложенные layout для сегментов маршрута

В app/ вы можете создавать папки для маршрутов. Если в папке маршрута добавить свой layout.jsx, он будет применяться ко всем страницам в этом сегменте и вложенным сегментам. Пример:

• app/articles/layout.jsx — layout для маршрута /articles и всех его подстраниц.
• app/articles/trending/layout.jsx — layout для /articles/trending; он будет вкладывать общий layout articles внутрь своего.

Это позволяет строить композицию интерфейса: корневой каркас → layout раздела → layout страницы.

Когда layout может не подойти (контрпримеры)

• Одностраничный компонент, не разделяющий общую структуру (например, виджет для вставки) — отдельный Layout будет избыточен.
• Страницы с радикально отличающимся дизайном (микросайты) — лучше держать отдельный набор layout’ов или даже отдельные приложения.
• Конфликты side-effect’ов: если layout выполняет тяжёлые синхронные операции на сервере, это может ухудшить время отклика.

Альтернативные подходы

• Higher-Order Component (HOC): оборачивает страницу, но сложнее читать и отлаживать.
• Render Props: даёт контроль над местом вставки, но больше шаблонного кода.
• UI-фреймворк с темами: если требуется только стилизация, можно управлять темами вместо создания сложных layout’ов.

Ментальные модели и эвристики

• Layout = каркас. Компоненты внутри — контент.
• Один root layout для глобальной структуры; дочерние layout — для разделов/контекстов.
• Держите layout легким: навигация, оболочка, глобальные провайдеры (Theme, Auth).

Чек-листы по ролям

Разработчик:

• Убедиться, что children корректно передаётся.
• Избегать побочных эффектов в render-пути layout.
• Разбить Header/Footer на мелкие компоненты.

UI/UX:

• Проверить доступность (aria, табуляция).
• Проверить адаптивность для основных брейкпоинтов.

Ops/Архитектура:

• Убедиться, что серверные компоненты не блокируют долгие запросы.
• Планировать кеширование и SSG/ISR при необходимости.

Миграция: Pages → App Router (короткий план)

1. Найдите глобальные элементы (Header, Footer, метаданные).
2. Создайте app/layout.jsx и перенесите общую структуру.
3. Для каждого раздела создайте вложенные layout’ы при необходимости.
4. Перенесите провайдеры (Auth, Theme) в самый верхний layout.
5. Тестируйте страницы по отдельности и проверяйте SEO-метаданные.

Критерии приёмки

• Layout виден на всех ожидаемых страницах.
• Header и Footer не дублируются и не рендерятся дважды.
• Доступность (всё интерактивное доступно с клавиатуры).
• Нет регрессий в времени загрузки для критических страниц.

Тест-кейсы / приёмочные сценарии

• Открыть страницу, обёрнутую в layout — проверить наличие Header/Footer.
• Открыть страницу без layout — убедиться, что структура отличается согласно ожиданию.
• Навигация в пределах раздела — layout раздела остаётся неизменным.
• Проверить SEO-теги, определяемые через Head или metadata.

Маленькая шпаргалка / шаблон структуры проекта

components/

• Header.jsx
• Footer.jsx
• Layout.jsx

pages/ (или app/)

• _app.js (Pages) — подключить Layout
• index.jsx

app/ (App Router)

• layout.jsx (root)
• articles/
  • layout.jsx
  • page.jsx

Краткий глоссарий

Root layout — корневой компонент layout, применяемый ко всему приложению.
Children — вложенное содержимое страницы.
Server component — React/Next компонент, рендерящийся на сервере.

Риски и рекомендации

• Риск: тяжёлые операции в layout замедляют все страницы. Рекомендация: выносите асинхронные запросы в страницы или в отдельные серверные функции и кешируйте.
• Риск: дублирование стилей между layout’ами. Рекомендация: централизуйте глобальные стили и переменные темы.

Резюме

Layout в Next.js — простой и мощный инструмент для поддержки единой структуры сайта. Для Pages Router используйте компонент Layout и подключайте его в _app.js; для App Router создайте app/layout.jsx и при необходимости — вложенные layout’ы для сегментов маршрутов. Применяйте чек-листы и тесты, чтобы избежать регрессий при миграции и поддерживать производительность.