Conteúdo no Layout do Site em NextJS

Vamos considerar o layout principal do site, que começamos a analisar na lição anterior:

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

Como você pode ver, o layout do site representa um componente com uma função. Ao mesmo tempo, um objeto é passado para o parâmetro da função, do qual extraímos a chave children para a variável correspondente. Nesta variável está armazenado o conteúdo do arquivo page.jsx, que corresponde ao URL solicitado.

Ou seja, no arquivo layout.jsx nós temos o layout do site armazenado, e com a ajuda da variável children indicamos o lugar no layout do site onde o conteúdo da página deve ser inserido.

Por exemplo, vamos colocar o conteúdo da página em alguma tag:

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

Coloque o conteúdo do seu site na tag main.