Kök Düzen (Root Layout)

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası — ders 11 / 47.

Her uygulamanın hiçbir zaman değişmeyen parçaları vardır: sayfa iskeleti, üst bilgi (header), alt bilgi (footer). Next.js'te bunlar bir layout içinde yer alır ve en dıştaki katmana root layout denir.

Bunca zamandır gözünüzün önünde kilitli duran dosya işte bu:

// app/layout.jsx
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

Üç şey onu bir sayfadan farklı kılar:

Bu dosya zorunludur ve <html> ile <body> etiketlerini oluşturan tek dosyadır
URL hangi sayfayla eşleşirse eşleşsin, children alır. {children} bileşenini render etmeyi unutursanız uygulamanız kabuktan başka bir şey göstermez.
Hiçbir sayfa onu içe aktarmak (import) zorunda kalmadan, uygulamadaki her rotayı sarmalar

Kalıcıdır

İşte insanları şaşırtan kısım burası. Kullanıcı / sayfasından /menu sayfasına geçtiğinde, düzen (layout) yeniden oluşturulmaz. Next.js bunun içindeki sayfayı değiştirir ve düzene dokunmaz.

Böylece paylaşılan bir üst bilgi (header) titreşmez, kenar çubuğundaki (sidebar) bir video oynamaya devam eder ve düzen (layout) içinde yer alan her türlü durum (state) gezinme sırasında korunur: açık bir menü açık kalır, kaydırma konumu sabit kalır. Düzen (layout), uzun ömürlü bir çerçevedir; sayfalar onun içinde gelir ve gider.

Hatırlanmaya değer bir sonuç: bir yerleşim (layout) gezinme sırasında yeniden çalıştırılmadığı için mevcut sayfanın searchParams değerini okuyamaz. Değişiklikleri dinlemiyor olur.

Kendin dene

Bu ders bir kod alıştırması içermiyor.