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>
    );
}