Делови сајта у компонентама у NextJS

У претходној лекцији смо писали текст делова сајта директно у фајлу распореда:

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

Ово, међутим, може бити непогодно у случају када делови сајта садрже пуно кода и текста. Зато се делови сајта обично издвајају у посебне фајлове компонената.

Хајде да за пример издвојимо хедер сајта у посебну компоненту. Направимо одговарајући фајл:

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

Импортујмо нашу компоненту у фајлу са распоредом:

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

export default function RootLayout({children}) {
	
}

Прикажимо текст наше компоненте помоћу тага са њеним именом:

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>
	);
}

Направите посебне компоненте за хедер и футер сајта.