Περιεχόμενο στη διάταξη ιστοτόπου στο NextJS

Ας εξετάσουμε τη βασική διάταξη του ιστοτόπου, που αρχίσαμε να αναλύουμε στο προηγούμενο μάθημα:

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

Όπως βλέπετε, η διάταξη του ιστοτόπου αντιπροσωπεύει ένα στοιχείο με λειτουργία. Παράλληλα στην παράμετρο της λειτουργίας μεταδίδεται ένα αντικείμενο, από το οποίο εξάγουμε το κλειδί children στην αντίστοιχη μεταβλητή. Σε αυτή τη μεταβλητή αποθηκεύεται το περιεχόμενο του αρχείου page.jsx, που αντιστοιχεί στο ζητηθέν URL.

Δηλαδή στο αρχείο layout.jsx έχουμε αποθηκευμένη τη διάταξη του ιστοτόπου, και με τη βοήθεια της μεταβλητής children υποδεικνύουμε τη θέση στη διάταξη του ιστοτόπου, στην οποία πρέπει να εισαχθεί το περιεχόμενο της σελίδας.

Για παράδειγμα ας μορφοποιήσουμε το περιεχόμενο της σελίδας σε κάποια ετικέτα:

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

Μορφοποιήστε το περιεχόμενο του ιστότοπού σας στην ετικέτα main.