O Layout Raiz

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

Todo app tem partes que nunca mudam: a estrutura da página, um cabeçalho, um rodapé. No Next.js, isso fica em um layout, e o mais externo é chamado de root layout.

É o arquivo que você manteve aberto na sua frente o tempo todo:

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

Três coisas o diferenciam de uma página:

Ele é obrigatório, e é o único arquivo que renderiza <html> e <body>
Ele recebe children, independentemente de qual página a URL correspondeu. Se você esquecer de renderizar {children}, seu app não mostrará nada além da estrutura (shell).
Ele envolve todas as rotas no app, sem que nenhuma página precise importá-lo

Isso persiste

Aqui está a parte que surpreende as pessoas. Quando o usuário navega de / para /menu, o layout não é recriado. O Next.js substitui a página dentro dele e mantém o layout intacto.

Assim, um cabeçalho compartilhado não pisca, um vídeo na barra lateral continua sendo reproduzido e qualquer estado presente no layout sobrevive à navegação: um menu aberto permanece aberto, uma posição de rolagem permanece intacta. Um layout é uma estrutura de longa duração; as páginas vão e vêm dentro dele.

Uma consequência que vale a pena lembrar: como um layout não é executado novamente na navegação, ele não pode ler os searchParams da página atual. Ele não está escutando a mudança.

Experimente você mesmo

Esta lição não inclui um desafio de código.