Diseños anidados

Parte de la sección Esenciales de Next.js del Journey de React de Coddy. Lección 13 de 47.

El diseño raíz no es el único. Coloca un layout.jsx en cualquier carpeta y este envolverá las rutas de esa carpeta, y solo esas.

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

Visita /menu/pizza y Next.js los anida de afuera hacia adentro:

RootLayout
    MenuLayout
        PizzaPage

Visita / y solo se ejecuta el diseño raíz: el diseño del menú no está en la ruta de esa URL, por lo que nunca aparece.

Un diseño anidado se escribe exactamente como el diseño raíz, sin la estructura: no <html>, ni <body>. Solo un componente que recibe children.

Así es como una sección de un sitio obtiene su propia barra lateral, sus propias pestañas, su propio encabezado, sin una sola declaración if sobre la URL actual.

Desafío

Fácil

La sección del menú necesita su propio encabezado: en /menu y sus páginas de platillos, pero en ningún otro lugar.

app/menu/layout.jsx ya existe y pasa children directamente. Dentro de su <section>, arriba de {children}, añade:

Un <h2> con id="menu-header" y el texto Menu

Las pruebas verifican que el encabezado se muestre en /menu y en /menu/pizza, y que haya desaparecido de vuelta en /.

Pruébalo tú mismo

import './globals.css';

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

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