Wie Routing Funktioniert

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 zusätzlich einen neuen Ordner innerhalb eines anderen Ordners (Route) erstellen, erhalten Sie verschachtelte Routen. Um diese Konzepte besser zu verstehen, empfehlen wir, sich das Bild unten anzusehen.

Wir haben die Ordnerstruktur sortiert, aber jetzt tauchen wir in die Dateien ein, die sich in diesen Ordnern befinden. Next.js unterstützt zwei verschiedene Dateitypen: page.tsx und layout.tsx. Der Unterschied liegt in ihren Rollen:

• layout.tsx dient als die Datei, die für die Kapselung spezieller UI-Elemente verantwortlich ist, die über mehrere Seiten hinweg geteilt werden;
• Im Gegensatz dazu übernimmt page.tsx die Verantwortung für die UI, die spezifisch für die aktuelle Route ist und sich dynamisch an URL-Änderungen anpasst. Es verkörpert die visuelle Darstellung, die mit dem einzigartigen Inhalt und den Funktionen verbunden ist, die für die jeweilige Route von Bedeutung sind.

Zurück zum Projekt

Lassen Sie uns eine verschachtelte Route namens /dashboard für unsere Anwendung erstellen. Befolgen Sie die folgenden Schritte, um dies zu erreichen:

1. Erstellen Sie einen neuen Ordner namens dashboard im app-Ordner;
2. Erstellen Sie innerhalb des neu erstellten dashboard-Ordners eine neue Datei namens page.tsx;
3. Kopieren Sie den folgenden Inhalt in die page.tsx-Datei.

Nachdem Sie alle notwendigen Schritte abgeschlossen haben, öffnen Sie die folgende URL http://localhost:3000/dashboard. Sie sollten die erstellte Seite sehen (Dashboard Page Text).

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