Делови на веб-страницата во компоненти во 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>
	);
}

Создадете посебни компоненти за хедерот и футерот на веб-страницата.