Vietnes daļas komponentos NextJS

Iepriekšējā nodarbībā mēs rakstījām vietnes daļu tekstu tieši izkārtojuma failā:

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

Tomēr tas var būt neērti gadījumos, kad vietnes daļas satur daudz koda un teksta. Tāpēc parasti vietnes daļas izveido atsevišķos komponentu failos.

Izveidosim piemēram vietnes headeri atsevišķā komponentā. Izveidosim atbilstošu failu:

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

Importēsim mūsu komponentu izkārtojuma failā:

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

export default function RootLayout({children}) {
	
}

Parādīsim mūsu komponenta tekstu izmantojot tā nosaukuma tagu:

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

Izveidojiet atsevišķus komponentus vietnes headerim un footerim.