layout.js
Макет (layout) — это пользовательский интерфейс, который является общим для нескольких маршрутов.
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return <section>{children}</section>
}export default function DashboardLayout({ children }) {
return <section>{children}</section>
}Корневой макет (root layout) — это самый верхний макет в корневой директории app. Он используется для определения тегов <html> и <body>, а также других общих элементов интерфейса.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}export default function RootLayout({ children }) {
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>
}export default function ShopLayout({ children, params }) {
// 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:
При переходе с /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 Metadata, который автоматически обрабатывает сложные требования, такие как потоковая передача и дедупликация элементов<head>.
- Не следует вручную добавлять теги
- Вы можете использовать группы маршрутов для создания нескольких корневых макетов.
- Навигация между несколькими корневыми макетами вызовет полную перезагрузку страницы (в отличие от клиентской навигации). Например, переход с
/cart, который используетapp/(shop)/layout.js, на/blog, который используетapp/(marketing)/layout.js, вызовет полную перезагрузку страницы. Это применяется только к нескольким корневым макетам.
- Навигация между несколькими корневыми макетами вызовет полную перезагрузку страницы (в отличие от клиентской навигации). Например, переход с
История версий
| Версия | Изменения |
|---|---|
v13.0.0 | Добавлен layout. |