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:

export 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:

export 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:

export 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 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>

Crie uma seção de usuários e uma seção de postagens no site. Crie em cada seção seu próprio layout, que herdará do layout principal do site.