Verschachtelte Layouts in NextJS

Wie Sie wissen, befindet sich im Ordner /app in der Datei /layout.jsx das Hauptlayout der Website.

Bei Bedarf können jedoch in verschachtelten Ordnern eigene Layouts erstellt werden. In diesem Fall wird der Seiteninhalt zunächst in das verschachtelte Layout eingefügt, und das resultierende Ergebnis wird dann in das Hauptlayout eingefügt.

Lassen Sie es uns in der Praxis versuchen. Nehmen wir an, unser Hauptlayout sieht wie folgt aus:

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

Erstellen wir noch ein weiteres, verschachteltes Layout für alle Inhalte aus dem Ordner /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			message for all users
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Wie Sie sehen, geben wir in diesem Layout nicht die grundlegenden Seitentags an, da diese bereits in unserem Hauptlayout der Website vorhanden sind.

Erstellen wir auch eine Datei mit Inhalt zur Anzeige des Users:

export default function User() {
	return <>
		<h1>User</h1>
		<p>
			user description
		</p>
	</>;
}

Nach diesen Manipulationen wird unsere Dateistruktur wie folgt aussehen:

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

Wenn Sie nun die entsprechende URL aufrufen, fasst NextJS alles zusammen und im Browser erhalten wir den folgenden endgültigen HTML-Code:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				message for all users
			</div>
			
			<h1>User</h1>
			<p>
				user description
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Erstellen Sie auf der Website einen Bereich für User und einen Bereich für Posts. Erstellen Sie in jedem Bereich ein eigenes Layout, das vom Hauptlayout der Website erbt.