Sehemu za Tovuti katika Vijenzi kwenye NextJS

Katika somo lililopita tuliandika maandishi ya sehemu za tovuti moja kwa moja kwenye faili la mpangilio:

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

Hata hivyo, hii inaweza kuwa isiyofaa katika kesi ambayo sehemu za tovuti zina kodi na maandishi mengi. Kwa hivyo kawaida sehemu za tovuti hutengwa kwenye faili tofauti za vijenzi.

Wacha kwa mfano tutenge kichwa cha tovuti katika kijenzi tofauti. Tutengeneze faili inayofaa:

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

Wacha tuingize kijenzi chetu kwenye faili la mpangilio:

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

export default function RootLayout({children}) {
	
}

Wacha tuonyeshe maandishi ya kijenzi chetu kwa kutumia lebo na jina lake:

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

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

Tengeneza vijenzi tofauti na kichwa cha tovuti na kiwango cha chini cha tovuti.