Părți ale site-ului în componente în NextJS

În lecția precedentă, am scris textul părților site-ului direct în fișierul de layout:

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

Aceasta, totuși, poate fi incomod în cazul în care părțile site-ului conțin mult cod și text. De aceea, de obicei, părțile site-ului sunt mutate în fișiere separate ale componentelor.

Să exemplificăm prin mutarea header-ului site-ului într-o componentă separată. Să creem fișierul corespunzător:

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

Să importăm componenta noastră în fișierul cu layout-ul:

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

export default function RootLayout({children}) {
	
}

Să afișăm textul componentei noastre cu ajutorul tag-ului cu numele său:

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

Creați componente separate pentru header-ul și footer-ul site-ului.