Sayfa ve layout
- React kursu
- İleri seviye
- Ders 3/56
- 4 dk
page.tsx ve layout.tsx dosyalarını tanırsın.
Sayfa ve layout birlikte
Bir Next.js sayfası gösterilirken önce kök layout, sonra iç içe layout'lar, en içte de sayfa basılır. {children} her seviyede bir alt seviyeye aktarılır.
Layout bir kez çizilir, sayfa değişince tekrar çizilmez. Bu, gezinme sırasında state korunmasını sağlar (örn. müzik çalar açık kalır).
Kök layout'ta <html> ve <body> zorunludur; başka yerde kullanılmaz.
İç içe layout
Bir alt klasöre layout.js koyarsan, o klasördeki tüm sayfalar bu layout'u paylaşır. Örneğin app/dashboard/layout.js bir kenar çubuğu ekler; altındaki tüm sayfalar onu görür.
Layout'lar üst üste biner; önce kök, sonra dashboard layout, sonra sayfa basılır.
Layout'ta useState kullanabilirsin; sayfa değişse bile state korunur.
Uygulama Layout + sayfa
RootLayout bileşeni yaz: { children } destructure et, <html><body>{children}</body></html> döndür, export default RootLayout. Home bileşeni de yaz: <h1>Anasayfa</h1> bas, export default Home.
Başlangıç kodu
// app/layout.js — RootLayout yaz
// app/page.js — Home yaz
// İki bileşeni de buraya yazÖrnek çözüm
// app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}
// app/page.js
export default function Home() {
return <h1>Anasayfa</h1>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Root layout neden önemlidir?
- Sadece CSS yazar
- Yalnızca bir kez çağrılır
- HTML ve body etiketlerini içerir Doğru cevap
- Hiç state tutmaz
Açıklama: Root layout html ve body etiketlerini içerir.
2 children prop'u
export default function RootLayout({ ____ }) {
return <html><body>{children}</body></html>;
}export default function RootLayout({ children }) {
return <html><body>{children}</body></html>;
}Açıklama: children alt sayfayı temsil eder.
3 Sayfa ve layout: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
root layout |
html+body |
nested layout |
Alt klasör çerçevesi |
children |
Alt içerik |
page.js |
Sayfa içeriği |