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.

Le layout racine n'est pas le seul. Placez un layout.jsx dans n'importe quel dossier et 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 seul le layout racine s'exécute : le layout menu n'est pas dans le chemin de cette URL, il n'apparaît donc jamais.

Un layout imbriqué s'écrit exactement comme le layout racine, sans la structure de base : pas de <html>, pas de <body>. Juste un composant qui accepte des 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>
    );
}