Partes do site em componentes no NextJS

Na lição anterior, escrevemos o texto das partes do site diretamente no arquivo de layout:

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

No entanto, isso pode ser inconveniente quando as partes do site contêm muito código e texto. Portanto, geralmente as partes do site são extraídas em arquivos separados de componentes.

Vamos, por exemplo, extrair o cabeçalho do site em um componente separado. Vamos criar o arquivo correspondente:

export default function Header() {
	return <>
		header
	</>;
}

Vamos importar nosso componente no arquivo de layout:

import Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
	
}

Vamos renderizar o texto do nosso componente usando a tag com seu nome:

import Header from '@/comp/header/header.jsx';

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

Crie componentes separados para o cabeçalho e o rodapé do site.