Das Vercel-Team hat einen einfachen Ansatz für das Routing gewählt. Sie haben sich entschieden, Ordner als Routen zu verwenden. Das bedeutet: Je mehr Ordner Sie Ihrem app-Ordner hinzufügen, desto mehr Routen erhalten Sie. Wenn Sie zudem einen neuen Ordner innerhalb eines anderen Ordners (Route) erstellen, entstehen verschachtelte Routen. Um diese Konzepte besser zu verstehen, empfehlen wir, das folgende Bild zu betrachten.

Die Ordnerstruktur ist nun geklärt, aber jetzt betrachten wir die Dateien, die sich in diesen Ordnern befinden. Next.js unterstützt zwei verschiedene Dateitypen: page.tsx und layout.tsx. Der Unterschied liegt in ihren Aufgaben:

• layout.tsx ist für die Einbettung spezieller UI-Elemente zuständig, die über mehrere Seiten hinweg geteilt werden;
• Im Gegensatz dazu übernimmt page.tsx die UI, die spezifisch für die aktuelle Route ist, und passt sich dynamisch an URL-Änderungen an. Sie bildet die visuelle Darstellung der einzigartigen Inhalte und Funktionen, die für die jeweilige Route relevant sind.

Zurück zum Projekt

Wir erstellen nun eine verschachtelte Route namens /dashboard für unsere Anwendung. Befolgen Sie die folgenden Schritte, um dies umzusetzen:

1. Erstellen Sie einen neuen Ordner dashboard im Ordner app;
2. Legen Sie im neu erstellten Ordner dashboard eine neue Datei mit dem Namen page.tsx an;
3. Kopieren Sie den folgenden Inhalt in die Datei page.tsx.

Nachdem alle notwendigen Schritte abgeschlossen wurden, öffne die folgende URL http://localhost:3000/dashboard. Die erstellte Seite sollte angezeigt werden (Text Dashboard Page).

Im folgenden Kapitel werden wir unsere Arbeit an den Seiten fortsetzen. Keine Sorge, wir machen weiter.