Sayfa ve layout

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.

Örnek çözümü göster

// 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>;
}

Kendini test et

Root layout neden önemlidir?
- Sadece CSS yazar
- Yalnızca bir kez çağrılır
- HTML ve body etiketlerini içerir
- Hiç state tutmaz
Cevabı göster

HTML ve body etiketlerini içerir — Root layout html ve body etiketlerini içerir.

children prop'u

export default function RootLayout({ ____ }) {
  return <html><body>{children}</body></html>;
}

Cevabı göster

export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

Sayfa ve layout: kavramları eşleştir

root layout

html+body
nested layout

Alt klasör çerçevesi
children

Alt içerik
page.js

Sayfa içeriği

Sıradaki ders: Özet - Next.js temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler