Layout nidificati

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 13 di 47.

Il layout radice non è l’unico. Inserisci un layout.jsx in qualsiasi cartella: avvolgerà le route di quella cartella, e solo quelle.

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

Visita /menu/pizza e Next.js li annida dall’esterno verso l’interno:

RootLayout
    MenuLayout
        PizzaPage

Visita / e viene eseguito solo il layout radice: il layout del menu non si trova nel percorso di quell'URL, quindi non viene mai visualizzato.

Un layout nidificato si scrive esattamente come quello radice, ma senza lo scheletro: niente <html>, niente <body>. Solo un componente che riceve children.

Ecco come una sezione di un sito ottiene la propria barra laterale, le proprie schede e la propria intestazione, senza una singola istruzione if relativa all'URL corrente.

Sfida

Facile

La sezione del menu ha bisogno di una propria intestazione: su /menu e sulle sue pagine dei piatti, ma in nessun altro luogo.

app/menu/layout.jsx esiste già e passa direttamente children. All'interno del suo <section>, sopra {children}, aggiungi:

Un <h2> con id="menu-header" e il testo Menu

I test verificano che l'intestazione sia visualizzata su /menu e su /menu/pizza, e che sia scomparsa tornando su /.

Provalo tu

import './globals.css';

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

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