La mise en page racine

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy. Leçon 11 sur 47.

Chaque application comporte des éléments qui ne changent jamais : la structure de la page, un en-tête, un pied de page. Dans Next.js, ceux-ci se trouvent dans une mise en page, et la plus externe est appelée mise en page racine.

C'est le fichier que vous aviez sous les yeux depuis le début :

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

Trois choses le différencient d'une page :

Il est obligatoire, et c'est le seul fichier qui rend <html> et <body>
Il reçoit children, quelle que soit la page à laquelle l'URL correspond. Oubliez de rendre {children} et votre `app` n'affichera rien d'autre que la structure de base.
Il enveloppe chaque route de l'application, sans qu'aucune page ne l'importe

Elle persiste

Voici la partie qui surprend les gens. Lorsque l’utilisateur passe de / à /menu, la mise en page n’est pas recréée. Next.js remplace la page à l’intérieur et laisse la mise en page intacte.

Ainsi, un en-tête partagé ne clignote pas, une vidéo dans la barre latérale continue de lire, et tout état résidant dans le layout survit à la navigation : un menu ouvert reste ouvert, une position de défilement reste intacte. Un layout est un cadre pérenne ; les pages vont et viennent à l'intérieur.

Une conséquence à retenir : comme une mise en page ne se réexécute pas lors de la navigation, elle ne peut pas lire les searchParams de la page actuelle. Elle n’écoute pas le changement.

Essayez vous-même

Cette leçon ne comprend pas de défi de code.