Ενσωματωμένα Layouts στο NextJS

Όπως γνωρίζετε, στον φάκελο /app στο αρχείο /layout.jsx βρίσκεται το κύριο layout του site.

Εάν επιθυμείτε, ωστόσο, σε εμφωλευμένους φακέλους μπορείτε να δημιουργήσετε τα δικά σας layouts. Σε αυτήν την περίπτωση, το περιεχόμενο της σελίδας θα πρώτα εισαχθεί στο εμφωλευμένο layout, και στη συνέχεια το αποτέλεσμα που προκύπτει θα εισαχθεί στο κύριο layout.

Ας δοκιμάσουμε στην πράξη. Ας υποθέσουμε ότι το κύριο layout μας έχει την ακόλουθη μορφή:

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

Ας δημιουργήσουμε ένα ακόμη, εμφωλευμένο layout για όλα τα περιεχόμενα από τον φάκελο /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			μήνυμα για όλους τους χρήστες
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Όπως βλέπετε, σε αυτό το layout δεν υποδεικνύουμε τις βασικές ετικέτες της σελίδας, καθώς αυτές υπάρχουν ήδη στο κύριο layout του site μας.

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

export default function User() {
	return <>
		<h1>Χρήστης</h1>
		<p>
			περιγραφή χρήστη
		</p>
	</>;
}

Μετά από αυτές τις διαδικασίες, η δομή των αρχείων μας θα μοιάζει ως εξής:

/app/
- layout.jsx
- /users/
  - layout.jsx
  - /show/
    - page.jsx

Τώρα, εάν επισκεφθείτε το αντίστοιχο URL, το NextJS θα τα συναρμολογήσει όλα μαζί και στο πρόγραμμα περιήγησης θα λάβουμε τον ακόλουθο τελικό κώδικα HTML:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				μήνυμα για όλους τους χρήστες
			</div>
			
			<h1>Χρήστης</h1>
			<p>
				περιγραφή χρήστη
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Δημιουργήστε στο site μια ενότητα για χρήστες και μια ενότητα για αναρτήσεις. Δημιουργήστε σε κάθε ενότητα το δικό της layout, το οποίο θα κληρονομεί από το κύριο layout του site.