Paralleles Routing in NextJS

In NextJS kann man es so einrichten, dass ein Teil der Website je nach angeforderter URL unterschiedliche Inhalte anzeigt. Dies wird als paralleles Routing bezeichnet.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben das folgende Website-Layout:

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

Nehmen wir an, wir möchten, dass im Header dynamische Informationen angezeigt werden. Unter der URL /users soll eine Komponente mit Benutzern angezeigt werden, und unter der URL /posts eine Komponente mit Beiträgen.

Für ein solches paralleles Routing muss ein spezieller Ordner erstellt werden, dessen Name mit dem Symbol @ beginnt. Nennen wir unseren Ordner beispielhaft @info.

In diesem Ordner platzieren wir zwei Komponenten. Die erste für die Anzeige der Benutzer im Ordner /users/, und die zweite für die Anzeige der Beiträge im Ordner /posts/. Es ergibt sich die folgende Dateistruktur:

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

Nun müssen wir im Website-Layout einen speziellen Befehl zur Einfügung schreiben. Dazu muss ein spezieller dynamischer Slot verwendet werden.

Um zu verstehen, was das ist, schauen Sie sich zunächst den Parameter unserer Layout-Funktion an:

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

Beachten Sie, dass als Parameter ein Objekt übergeben wird, aus dem wir den Website-Inhalt in die Variable children extrahieren.

In diesem Objekt können auch andere Schlüssel vorhanden sein. Sie entsprechen den Ordnern, deren Namen mit @ beginnen.

In unserem Fall haben wir den Ordner @info, das bedeutet, dass die Variable info verfügbar sein wird, die je nach URL den Text einer der Komponenten enthält - Benutzer oder Beiträge. Holen wir uns diese Variable:

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

Nun können wir innerhalb des Layouts die Variable info ausgeben. An dieser Stelle wird je nach URL der Text einer unserer Komponenten eingefügt:

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

Erstellen Sie einen dynamischen Slot für die rechte Seitenleiste.

Erstellen Sie einen dynamischen Slot für die linke Seitenleiste.