Μέρη ιστοτόπου σε components στο NextJS

Στο προηγούμενο μάθημα γράφαμε το κείμενο των μερών του ιστοτόπου απευθείας στο αρχείο της διάταξης:

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

Αυτό, ωστόσο, μπορεί να είναι μη βολικό στην περίπτωση που τα μέρη του ιστοτόπου περιέχουν πολύ κώδικα και κείμενο. Γι' αυτό συνήθως τα μέρη του ιστοτόπου βγάζονται σε ξεχωριστά αρχεία components.

Ας βγάλουμε για παράδειγμα το header του ιστοτόπου σε ξεχωριστό component. Ας φτιάξουμε το αντίστοιχο αρχείο:

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

Εισάγουμε το component μας στο αρχείο της διάταξης:

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

export default function RootLayout({children}) {
	
}

Ας εμφανίσουμε το κείμενο του component μας χρησιμοποιώντας την ετικέτα με το όνομά του:

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

Φτιάξτε ξεχωριστά components για το header και το footer του ιστοτόπου.