Verschachtelte Layouts

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 13 von 47.

Das Root-Layout ist nicht das einzige. Füge eine layout.jsx in einen beliebigen Ordner ein und sie hüllt die Routen dieses Ordners ein – und nur diese.

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

Besuchen Sie /menu/pizza und Next.js verschachtelt diese von außen nach innen:

RootLayout
    MenuLayout
        PizzaPage

Besuchen Sie / und nur das Root-Layout wird ausgeführt: Das Menu-Layout befindet sich nicht im Pfad dieser URL, daher wird es nie angezeigt.

Ein verschachteltes layout wird genau wie das Root-Layout geschrieben, abzüglich der Hülle: kein <html>, kein <body>. Nur eine Komponente, die children entgegennimmt.

So erhält ein einzelner Bereich einer Website seine eigene Sidebar, seine eigenen Tabs und seine eigene Überschrift – ohne eine einzige if-Anweisung über die aktuelle URL.

Aufgabe

Einfach

Der Menübereich benötigt eine eigene Überschrift: auf /menu und den dazugehörigen Gerichte-Seiten, aber nirgendwo sonst.

app/menu/layout.jsx existiert bereits und leitet children direkt weiter. Füge innerhalb des <section>-Elements oberhalb von {children} Folgendes hinzu:

Ein <h2> mit id="menu-header" und dem Text Menu

Die Tests prüfen, ob der Header auf /menu und auf /menu/pizza angezeigt wird und dass er zurück auf / verschwunden ist.

Probier es selbst

import './globals.css';

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

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