layout.js

Макет — это пользовательский интерфейс, который используется несколькими маршрутами.

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}

Основной макет — это самый верхний макет в корневом app каталоге. Он используется для определения тегов <html> и <body> и других глобально используемых элементов пользовательского интерфейса.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Свойства

children (обязательное)

Компоненты макета должны принимать и использовать свойство children. Во время отрисовки children будет заполнен сегментами маршрута, которые охватывает макет. В основном это будут компоненты дочернего Макет (если он существует) или Страницы, но также могут быть и другие специальные файлы, такие как Загрузка или Ошибка, когда это применимо.

params (необязательное)

Объект параметров динамического маршрута от корневого сегмента до этого макета.

Пример	URL	`params`
`app/dashboard/[team]/layout.js`	`/dashboard/1`	`{ team: '1' }`
`app/shop/[tag]/[item]/layout.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`
`app/blog/[...slug]/layout.js`	`/blog/1/2`	`{ slug: ['1', '2'] }`

Например:

export default function ShopLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: {
    tag: string
    item: string
  }
}) {
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  return <section>{children}</section>
}

Важно знать

Макеты не получают свойство searchParams

В отличие от Страниц, компоненты макета не получают свойство searchParams. Это связано с тем, что общий макет не перерисовывается во время навигации, что может привести к устаревшим searchParams между навигациями.

При использовании навигации на стороне клиента Next.js автоматически отрисовывает только часть страницы под общим макетом между двумя маршрутами.

Например, в следующей структуре каталогов dashboard/layout.tsx является общим макетом для /dashboard/settings и /dashboard/analytics:

File structure showing a dashboard folder nesting a layout.tsx file, and settings and analytics folders with their own pages

При переходе от /dashboard/settings к /dashboard/analytics, page.tsx в /dashboard/analytics будет перерисован на сервере, а dashboard/layout.tsx не будет перерисован, так как это общий элемент пользовательского интерфейса, используемый в двух маршрутах.

Эта оптимизация производительности позволяет быстрее переходить между страницами, которые используют один макет, так как выполняется только обработка данных и отрисовка страницы, а не весь маршрут, который может включать общие макеты, которые извлекают свои собственные данные.

Поскольку dashboard/layout.tsx не перерисовывается, свойство searchParams в компоненте макета на сервере может стать устаревшим после навигации.

Вместо этого используйте свойство searchParams на странице или хук useSearchParams в клиенском компоненте, который перерисовывается на клиенте с последними searchParams.

Основные макеты

Каталог app должен включать корневой app/layout.js.
Основной макет должен определять теги <html> и <body>.
- Вы не должны вручную добавлять теги <head> такие как <title> и <meta> в основные макеты. Вместо этого используйте API метаданных, который автоматически обрабатывает сложные требования, такие как потоковая передача и удаление дублирующих <head> элементов.
Вы можете использовать группы маршрутов, чтобы создать несколько основных макетов.
- Переход между несколькими основными макетами вызовет полную перезагрузку страницы (в отличие от навигации на стороне клиента). Например, переход от /cart, использующего app/(shop)/layout.js к /blog, использующему app/(marketing)/layout.js вызовет полную перезагрузку страницы. Это только относится к нескольким основным макетам.

История версий

Версия	Изменения
`v13.0.0`	`layout` был представлен.