Παράλληλη Δρομολόγηση στο NextJS

Στο NextJS μπορείτε να κάνετε έτσι ώστε ένα μέρος του site να εμφανίζει διαφορετικό περιεχόμενο ανάλογα με το URL που ζητήθηκε. Αυτό ονομάζεται παράλληλη δρομολόγηση.

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

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

Ας υποθέσουμε ότι θέλουμε, στο header να εμφανίζεται δυναμική πληροφορία. Ας υποθέσουμε ότι στο URL /users θα εμφανίζεται ένα component με χρήστες, και στο URL /posts ένα component με αναρτήσεις.

Για τέτοια παράλληλη δρομολόγηση πρέπει να φτιάξετε έναν ειδικό φάκελο, ξεκινώντας το όνομά του με τον χαρακτήρα @. Για το παράδειγμα, ας ονομάσουμε το φάκελό μας @info.

Σε αυτόν τον φάκελο θα τοποθετήσουμε δύο components. Το πρώτο για την εμφάνιση χρηστών στο φάκελο /users/, και το δεύτερο για την εμφάνιση αναρτήσεων στο φάκελο /posts/. Θα έχουμε την ακόλουθη δομή αρχείων:

/app/
- /@info/
  - /users/
    - page.jsx
  - /posts/
    - page.jsx

Τώρα πρέπει στο layout του site να γράψουμε μια ειδική εντολή για εισαγωγή. Για αυτό πρέπει να χρησιμοποιήσετε ένα ειδικό δυναμικό slot.

Για να καταλάβετε τι είναι, πρώτα δείτε την παράμετρο της συνάρτησης του layout του site μας:

export default function RootLayout({children}) {
	return (
		
	);
}

Παρατηρήστε ότι ως παράμετρο μας μεταβιβάζεται ένα αντικείμενο, από το οποίο εξάγουμε το περιεχόμενο του site σε μια μεταβλητή children.

Σε αυτό το αντικείμενο μπορεί να υπάρχουν και άλλα κλειδιά. Αυτά αντιστοιχούν σε εκείνους τους φακέλους, το όνομα των οποίων ξεκινήσαμε με @.

Στη δική μας περίπτωση, έχουμε τον φάκελο @info, που σημαίνει ότι θα έχουμε πρόσβαση σε μια μεταβλητή info, η οποία ανάλογα με το URL περιέχει το κείμενο ενός από τα components - χρήστες ή αναρτήσεις. Ας πάρουμε αυτή τη μεταβλητή:

export default function RootLayout({children, info}) {
	return (
		
	);
}

Τώρα μέσα στο layout μπορούμε να εμφανίσουμε τη μεταβλητή info. Σε αυτό το σημείο ανάλογα με το URL θα εισάγεται το κείμενο ενός από τα components μας:

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

Φτιάξτε ένα δυναμικό slot για το δεξί πλαϊνό πλαίσιο.

Φτιάξτε ένα δυναμικό slot για το αριστερό πλαϊνό πλαίσιο.