Veebilehe osad komponentides NextJS-is

Eelmises õppetükis kirjutasime teksti veebilehe osad otse paigutuse faili:

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

See võib aga olla ebamugav juhul, kui veebilehe osad sisaldavad palju koodi ja teksti. Seetõttu tavaliselt veebilehe osad viakse eraldi failidesse komponentidena.

Teeme näitena, viime saidi päise eraldi komponendi. Loome vastava faili:

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

Impordime oma komponendi paigutuse faili:

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

export default function RootLayout({children}) {
	
}

Kuvame oma komponendi teksti kasutades selle nimega silti:

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

Tehke eraldi komponendid saidipäise ja jalustega.