Mises en page imbriquées

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

La mise en page racine n’est pas la seule. Placez un layout.jsx dans n’importe quel dossier : il englobe les routes de ce dossier, et uniquement celles-ci.

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

Visitez /menu/pizza et Next.js les imbrique de l'extérieur vers l'intérieur :

RootLayout
    MenuLayout
        PizzaPage

Visitez / et seule la mise en page racine s’exécute : la mise en page du menu ne se trouve pas dans le chemin de cette URL, elle n’apparaît donc jamais.

Une mise en page imbriquée s’écrit exactement comme celle de la racine, sans l’enveloppe : pas de <html>, pas de <body>. Simplement un composant qui accepte children.

C'est ainsi qu'une section d'un site obtient sa propre barre latérale, ses propres onglets, son propre en-tête, sans la moindre instruction if concernant l'URL actuelle.

Défi

Facile

La section menu a besoin de son propre en-tête : sur /menu et sur ses pages de plats (dish), mais nulle part ailleurs.

app/menu/layout.jsx existe déjà et transmet children directement. À l'intérieur de son <section>, au-dessus de {children}, ajoutez :

Un <h2> avec id="menu-header" et le texte Menu

Les tests vérifient que l'en-tête s'affiche sur /menu et sur /menu/pizza, et qu'il a disparu de retour sur /.

Essayez vous-même

import './globals.css';

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

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