Deli spletnega mesta v komponentah v NextJS

V prejšnji lekciji smo pisali besedilo delov spletnega mesta neposredno v datoteki postavitve:

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

To pa je lahko neprijetno v primeru, ko deli spletnega mesta vsebujejo veliko kode in besedila. Zato običajno dele spletnega mesta izločijo v ločene datoteke komponent.

Za primer izločimo header spletnega mesta v ločeno komponento. Ustvarimo ustrezno datoteko:

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

Uvozimo našo komponento v datoteki z postavitvijo:

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

export default function RootLayout({children}) {
	
}

Izpišimo besedilo naše komponente z uporabo oznake z njenim imenom:

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

Ustvarite ločene komponente z headerjem in footerjem spletnega mesta.