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ç değişmeyen bölümleri vardır: sayfa iskeleti, bir üst bilgi ve bir alt bilgi. Next.js'te bunlar bir layout içinde yer alır ve en dıştaki layout'a root layout adı verilir.

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

Bir sayfadan farklı olmasını sağlayan üç şey vardır:

Gerekli olması ve <html> ile <body> öğelerini oluşturan tek dosya olması
URL ile eşleşen sayfa ne olursa olsun children alması. {children} öğesini oluşturmayı unutursanız uygulamanız kabuktan başka hiçbir şey göstermez.
Herhangi bir sayfanın içe aktarmasına gerek kalmadan uygulamadaki her rotayı sarmalaması

Kalıcıdır

İşte insanları şaşırtan kısım. Kullanıcı / yolundan /menu yoluna geçtiğinde düzen yeniden oluşturulmaz. Next.js, içindeki sayfayı değiştirir ve düzeni olduğu gibi bırakır.

Böylece ortak bir başlık titremez, kenar çubuğundaki bir video oynatılmaya devam eder ve düzende bulunan tüm durumlar gezinmeden sağ çıkar: açık bir menü açık kalır, kaydırma konumu yerinde kalır. Düzen uzun ömürlü bir çerçevedir; sayfalar onun içinde gelip gider.

Hatırlamaya değer bir sonuç: bir düzen gezinme sırasında yeniden çalıştırılmadığından, geçerli sayfanın searchParams değerini okuyamaz. Değişikliği dinlemiyordur.

Kendin dene

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