Il layout principale

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

Ogni app ha parti che non cambiano mai: la struttura della pagina, un'intestazione, un piè di pagina. In Next.js queste si trovano in un layout e quello più esterno si chiama layout radice.

È il file che hai sempre avuto davanti:

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

Tre cose lo rendono diverso da una pagina:

È obbligatorio ed è l'unico file che esegue il rendering di <html> e <body>
Riceve children, qualunque sia la pagina corrispondente all'URL. Se dimentichi di eseguire il rendering di {children}, la tua app non mostrerà altro che lo scheletro.
Avvolge ogni route dell'app, senza che alcuna pagina lo importi

È persistente

Ecco la parte che sorprende tutti. Quando l’utente passa da / a /menu, il layout non viene ricreato. Next.js sostituisce la pagina al suo interno e lascia invariato il layout.

Così un'intestazione condivisa non sfarfalla, un video nella barra laterale continua a riprodursi e qualsiasi stato presente nel layout sopravvive alla navigazione: un menu aperto rimane aperto, la posizione di scorrimento resta invariata. Un layout è una cornice di lunga durata; le pagine entrano ed escono al suo interno.

Una conseguenza da ricordare: poiché un layout non viene eseguito di nuovo durante la navigazione, non può leggere i searchParams della pagina corrente. Non rileva il cambiamento.

Provalo tu

Questa lezione non include una sfida di codice.