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 parties qui ne changent jamais : le squelette de la page, un en-tête, un pied de page. Dans Next.js, ces éléments vivent dans un layout, et le plus externe est appelé le root layout.

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 en surprend plus d'un. Lorsque l'utilisateur passe de / à /menu, le layout n'est pas recréé. Next.js remplace simplement la page située à l'intérieur et ne touche pas au layout.

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 intéressante à memoriser : comme un layout ne s'exécute pas à nouveau lors de la navigation, il ne peut pas lire les searchParams de la page actuelle. Il n'écoute pas ce changement.

Essayez vous-même

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