layout.js
Ein Layout ist eine Benutzeroberfläche, die zwischen Routen gemeinsam genutzt wird.
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return <section>{children}</section>
}export default function DashboardLayout({ children }) {
return <section>{children}</section>
}Ein Root-Layout ist das oberste Layout im Stammverzeichnis app. Es wird verwendet, um die <html>- und <body>-Tags sowie andere global geteilte UI-Elemente zu definieren.
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>
)
}Props
children (erforderlich)
Layout-Komponenten sollten eine children-Prop akzeptieren und verwenden. Während des Renderings wird children mit den Routensegmenten gefüllt, die das Layout umschließt. Dies sind hauptsächlich die Komponenten eines untergeordneten Layouts (falls vorhanden) oder einer Seite, aber können auch andere spezielle Dateien wie Loading oder Error sein, wenn zutreffend.
params (optional)
Das Objekt der dynamischen Routenparameter vom Wurzelsegment bis zu diesem Layout.
| Beispiel | 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'] } |
Beispiel:
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>
}Wissenswertes
Layouts erhalten keine searchParams
Im Gegensatz zu Seiten erhalten Layout-Komponenten keine searchParams-Prop. Dies liegt daran, dass ein gemeinsames Layout während der Navigation nicht neu gerendert wird, was zu veralteten searchParams zwischen Navigationen führen könnte.
Bei clientseitiger Navigation rendert Next.js automatisch nur den Teil der Seite unterhalb des gemeinsamen Layouts zwischen zwei Routen.
Beispielsweise ist in der folgenden Verzeichnisstruktur dashboard/layout.tsx das gemeinsame Layout für sowohl /dashboard/settings als auch /dashboard/analytics:
Bei der Navigation von /dashboard/settings zu /dashboard/analytics wird page.tsx in /dashboard/analytics auf dem Server neu gerendert, während dashboard/layout.tsx nicht neu gerendert wird, da es eine gemeinsame Benutzeroberfläche zwischen den beiden Routen ist.
Diese Leistungsoptimierung ermöglicht eine schnellere Navigation zwischen Seiten, die ein Layout teilen, da nur das Datenabrufen und Rendern für die Seite ausgeführt werden muss, anstatt der gesamten Route, die gemeinsame Layouts mit eigenem Datenabruf enthalten könnte.
Da dashboard/layout.tsx nicht neu gerendert wird, könnte die searchParams-Prop in der Layout-Server-Komponente nach der Navigation veraltet sein.
- Verwenden Sie stattdessen die
searchParams-Prop der Seite oder denuseSearchParams-Hook in einer Client-Komponente, die auf dem Client mit den neuestensearchParamsneu gerendert wird.
Root-Layouts
- Das
app-Verzeichnis muss ein Root-app/layout.jsenthalten. - Das Root-Layout muss
<html>- und<body>-Tags definieren.- Sie sollten keine manuell
<head>-Tags wie<title>und<meta>zu Root-Layouts hinzufügen. Verwenden Sie stattdessen die Metadata-API, die erweiterte Anforderungen wie Streaming und Deduplizierung von<head>-Elementen automatisch handhabt.
- Sie sollten keine manuell
- Sie können Route-Gruppen verwenden, um mehrere Root-Layouts zu erstellen.
- Die Navigation zwischen mehreren Root-Layouts verursacht einen vollständigen Seitenladevorgang (im Gegensatz zu einer clientseitigen Navigation). Beispielsweise verursacht die Navigation von
/cart, dasapp/(shop)/layout.jsverwendet, zu/blog, dasapp/(marketing)/layout.jsverwendet, einen vollständigen Seitenladevorgang. Dies gilt nur für mehrere Root-Layouts.
- Die Navigation zwischen mehreren Root-Layouts verursacht einen vollständigen Seitenladevorgang (im Gegensatz zu einer clientseitigen Navigation). Beispielsweise verursacht die Navigation von
Versionsverlauf
| Version | Änderungen |
|---|---|
v13.0.0 | layout eingeführt. |