layout.js
Bir düzen, rotalar arasında paylaşılan kullanıcı arayüzüdür.
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return <section>{children}</section>
}Kök düzen, kök app dizinindeki en üstteki düzendir. <html> ve <body> etiketlerini ve global olarak paylaşılan diğer kullanıcı arayüzlerini tanımlamak için kullanılır.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}Props
children (required)
Düzen bileşenleri bir children prop kabul etmeli ve kullanmalıdır. Oluşturma sırasında children, yerleşimin sarmaladığı rota segmentleriyle doldurulacaktır. Bunlar öncelikle bir alt Düzen (varsa) veya Sayfa bileşeni olacaktır, ancak uygun olduğunda Yükleme veya Hata gibi diğer özel dosyalar da olabilir.
params (optional)
Dinamik rota parametreleri kök segmentten bu düzene kadar nesne.
| Example | 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'] } |
Örneğin:
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>
}Good to know
Layouts do not receive searchParams
Sayfaların aksine, Düzen bileşenleri searchParams prop'unu almaz. Bunun nedeni, paylaşılan bir düzenin gezinme sırasında yeniden oluşturul mamasıdır, bu da gezinmeler arasında searchParams adresinin bayatlamasına neden olabilir.
İstemci tarafı navigasyon kullanılırken, Next.js otomatik olarak yalnızca sayfanın iki rota arasındaki ortak düzenin altındaki kısmını işler.
Örneğin, aşağıdaki dizin yapısında, dashboard/layout.tsx hem /dashboard/settings hem de /dashboard/analytics için ortak düzendir:
/dashboard/settings adresinden /dashboard/analytics adresine gidildiğinde, /dashboard/analytics adresindeki page.tsx sunucuda yeniden oluşturulurken, dashboard/layout.tsx iki rota arasında paylaşılan ortak bir kullanıcı arayüzü olduğu için yeniden oluşturulmayacaktır.
Bu performans optimizasyonu, bir düzeni paylaşan sayfalar arasında gezinmenin daha hızlı olmasını sağlar, çünkü kendi verilerini getiren paylaşılan düzenleri içerebilecek tüm rota yerine yalnızca sayfa için veri getirme ve oluşturma işlemlerinin çalıştırılması gerekir.
dashboard/layout.tsx yeniden oluşturmadığından, düzen Sunucu Bileşenindeki searchParams desteği gezinmeden sonra eski haline gelebilir.
- Bunun yerine, Sayfa
searchParamspervane veyauseSearchParamsistemcide en sonsearchParamsile yeniden oluşturulan bir İstemci Bileşenindeki kanca.
Root Layouts
appdizini bir kökapp/layout.jsiçermelidir.- Kök düzen
<html>ve<body>etiketlerini tanımlamalıdır.<title>ve<meta>gibi<head>etiketlerini kök düzenlerine manuel olarak eklemelisiniz. Bunun yerine, akış ve<head>öğelerinin tekilleştirilmesi gibi gelişmiş gereksinimleri otomatik olarak ele alan Metadata API 'sini kullanmalısınız.
- Birden fazla kök düzen oluşturmak için rota gruplarını kullanabilirsiniz.
- Birden fazla kök düzen arasında gezinmek tam sayfa yüklemeye neden olacaktır (istemci tarafı gezinmenin aksine). Örneğin,
app/(shop)/layout.jskullanan/cartadresindenapp/(marketing)/layout.jskullanan/blogadresine gitmek tam sayfa yüklemeye neden olacaktır. Bu yalnızca birden fazla kök düzen için geçerlidir.
- Birden fazla kök düzen arasında gezinmek tam sayfa yüklemeye neden olacaktır (istemci tarafı gezinmenin aksine). Örneğin,
Version History
| Version | Changes |
|---|---|
v13.0.0 | layout introduced. |