Layouts Aninhados

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 13 de 47.

O layout raiz não é o único. Adicione um layout.jsx em qualquer pasta e ele envolve as rotas dessa pasta, e apenas elas.

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

Acesse /menu/pizza e o Next.js os aninha de fora para dentro:

RootLayout
    MenuLayout
        PizzaPage

Acesse / e apenas o layout raiz será executado: o layout do menu não está no caminho dessa URL, então ele nunca aparece.

Um layout aninhado é escrito exatamente como o layout raiz, menos a estrutura base: sem <html>, sem <body>. Apenas um componente recebendo children.

É assim que uma seção de um site ganha sua própria barra lateral, suas próprias abas, seu próprio cabeçalho, sem uma única instrução if sobre a URL atual.

Desafio

Fácil

A seção de menu precisa do seu próprio cabeçalho: em /menu e em suas páginas de pratos (dish), mas em nenhum outro lugar.

app/menu/layout.jsx já existe e passa children diretamente. Dentro do seu <section>, acima de {children}, adicione:

Um <h2> com id="menu-header" e o texto Menu

Os testes verificam se o cabeçalho é exibido em /menu e em /menu/pizza, e se ele desaparece ao voltar para /.

Experimente você mesmo

import './globals.css';

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

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