Yuvalanmış Düzenler

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

Kök düzen (root layout) tek düzen değildir. Herhangi bir klasörün içine bir layout.jsx yerleştirin; o klasörün rotalarını ve yalnızca onları sarar (wraps).

app/
    layout.jsx          wraps EVERYTHING
    page.jsx            /
    menu/
        layout.jsx      wraps /menu and everything under it
        page.jsx        /menu
        pizza/
            page.jsx    /menu/pizza

/menu/pizza adresini ziyaret edin ve Next.js bunları dıştan içe doğru iç içe yerleştirir:

RootLayout
    MenuLayout
        PizzaPage

/ adresini ziyaret ettiğinizde yalnızca kök layout çalışır: menu layout bu URL'nin yolunda yer almadığı için asla görünmez.

İç içe geçmiş bir layout, tıpkı kök düzen gibi yazılır; tek farkı kabuk kısmıdır: <html> yok, <body> yok. Yalnızca children alan bir bileşendir.

Bir sitenin tek bir bölümünün, mevcut URL hakkında tek bir if ifadesi bile olmadan kendi kenar çubuğuna, kendi sekmelerine ve kendi başlığına bu şekilde sahip olması sağlanır.

Görev

Kolay

Menü bölümünün kendi başlığına ihtiyacı var: /menu ve onun dish sayfalarında, ancak başka hiçbir yerde değil.

app/menu/layout.jsx zaten mevcut ve children ifadesini doğrudan geçiriyor. <section> içinde, {children} öğesinin üstüne şunları ekleyin:

id="menu-header" değerine ve Menu metnine sahip bir <h2>

Testler, başlığın /menu ve /menu/pizza sayfalarında göründüğünü, ancak / konumuna geri dönüldüğünde yok olduğunu kontrol eder.

Kendin dene

import './globals.css';

export const metadata = {
    title: 'My App',
};

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