Das Root-Layout

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

Jede App hat Teile, die sich nie ändern: das Seiten-Shell, einen Header, einen Footer. In Next.js befinden sich diese in einem layout, und das äußerste wird als root layout bezeichnet.

Es ist die Datei, die Sie die ganze Zeit direkt vor sich hatten:

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

Drei Dinge unterscheiden es von einer Seite:

Es ist erforderlich und es ist die einzige Datei, die <html> und <body> rendert
Es erhält children, unabhängig davon, mit welcher Seite die URL übereinstimmt. Wenn Sie vergessen, {children} zu rendern, zeigt Ihre App nichts als die Hülle.
Es umschließt jede Route in der App, ohne dass eine Seite es importieren muss

Es bleibt bestehen

Hier ist der Teil, der viele überrascht. Wenn der Benutzer von / zu /menu wechselt, wird das Layout nicht neu erstellt. Next.js tauscht nur die Seite darin aus und lässt das Layout unverändert.

Damit eine gemeinsam genutzte Kopfzeile nicht flackert, ein Video in der Seitenleiste weiterläuft und jeglicher Zustand im Layout die Navigation übersteht: Ein geöffnetes Menü bleibt geöffnet, eine Scrollposition bleibt erhalten. Ein Layout ist ein langlebiger Rahmen; Seiten kommen und gehen darin.

Eine Konsequenz, die man sich merken sollte: Da ein Layout bei der Navigation nicht erneut ausgeführt wird, kann es die searchParams der aktuellen Seite nicht lesen. Es hört nicht auf die Änderung.

Probier es selbst

Diese Lektion enthält keine Programmieraufgabe.