Layouts Aninhados no NextJS

Como você sabe, na pasta /app no arquivo /layout.jsx está localizado o layout principal do site.

No entanto, se desejar, é possível criar seus próprios layouts em pastas aninhadas. Nesse caso, o conteúdo da página será primeiro inserido no layout aninhado e, em seguida, o resultado será inserido no layout principal.

Vamos experimentar na prática. Suponha que nosso layout principal tenha a seguinte aparência:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          header
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

Vamos criar outro layout, aninhado, para todos os conteúdos da pasta /users:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <div className="info">
      mensagem para todos os usuários
    </div>
    <div className="content">
      {children}
    </div>
  );
}

Como você pode ver, neste layout não incluímos as tags principais da página, pois elas já estão presentes no nosso layout principal do site.

Vamos também criar um arquivo com o conteúdo para exibir o usuário:

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>Usuário</h1>
    <p>
      descrição do usuário
    </p>
  </>;
}

Após essas manipulações, nossa estrutura de arquivos ficará assim:

• /app/layout.jsx/users/layout.jsx/show/page.jsx

Agora, se acessarmos a URL correspondente, o NextJS irá montar tudo e no navegador obteremos o seguinte código HTML final:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        mensagem para todos os usuários
      </div>
      
      <h1>Usuário</h1>
      <p>
        descrição do usuário
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>