Diseños anidados

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

El layout raíz no es el único. Coloca un layout.jsx dentro de 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 layout raíz: el layout de menu no está en la ruta de esa URL, por lo que nunca aparece.

Un layout anidado se escribe exactamente igual que el raíz, menos el armazón: sin <html>, sin <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>
    );
}