Sivuston osat komponenteissa NextJS:ssä

Edellisessä oppitunnissa kirjoitimme tekstin sivuston osista suoraan layout-tiedostossa:

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

Tämä voi kuitenkin olla hankalaa silloin, kun sivuston osat sisältävät paljon koodia ja tekstiä. Siksi sivuston osat yleensä siirretään erillisiin tiedostoihin komponentteina.

Tehdään esimerkkinä sivuston header erilliseksi komponentiksi. Luodaan vastaava tiedosto:

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

Tuodaan komponenttimme layout-tiedostoon:

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

export default function RootLayout({children}) {
	
}

Näytetään komponenttimme teksti sen nimellä merkityllä tagilla:

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

Tee erilliset komponentit sivuston headerille ja footerille.