Next.js Seiten und Routing

Next.js verwendet dateisystembasiertes Routing, was bedeutet, dass die Seiten in Ihrer Anwendung automatisch durch die Struktur des Dateisystems bestimmt werden. Jede Datei und jeder Ordner entspricht einer Route, sodass Sie nicht wie beim traditionellen React-Routing jeden Pfad explizit konfigurieren müssen. Dies macht den Entwicklungsprozess intuitiver und einfacher.

Beziehung zwischen Seiten und Routen:In Next.js wird jede Seite automatisch durch eine Datei im Verzeichnis app/ oder pages/ einer Route zugeordnet. Der Pfad und Dateiname jeder Datei bestimmen die URL dieser Seite.
Grundlegende Seitenstruktur:In Next.js ist eine Seite jede .tsx- oder .js-Datei im Verzeichnis app/ oder pages/. Jede Seitendatei wird automatisch zu einer Route in der Anwendung.

Das Routing-System von Next.js ist sehr flexibel und unterstützt statische Seiten, dynamische Routen und verschachtelte Routen, sodass Entwickler komplexe Anwendungsstrukturen einfach umsetzen können.

Dateisystem-Routing: Seiten und Routen werden automatisch überapp/oderpages/die Dateistruktur im Verzeichnis.
Dynamische Routen: Sie können eckige Klammern ([ ]) verwenden, um dynamische Routen zu erstellen und dynamische Parameter in der URL zu verarbeiten.
Verschachtelte Routen: Sie können verschachtelte Routen mithilfe von Unterverzeichnissen erstellen, um mehrstufige Routenstrukturen umzusetzen.
Routennavigation: Verwenden Sie dienext/linkKomponente, um die Navigation zwischen Seiten umzusetzen.

Next.js 13 hat ein neues app-Verzeichnis eingeführt, das neben dem traditionellen pages-Verzeichnis existiert und eine flexiblere Möglichkeit bietet, Routen und Layouts zu organisieren.

Angenommen, die Projektverzeichnisstruktur sieht wie folgt aus:

app/
├── page.tsx             # 对应根路径 /
├── about/
│   └── page.tsx         # 对应 /about
├── [slug]/
│   └── page.tsx         # 对应动态路径，如 /[slug]

page.tsxDatei: Jede Seite wird einepage.tsxDatei. Diese Datei ist der Komponenteninhalt, der dieser Route entspricht.
Dynamische Routen: Wenn dynamische Parameter im Seitenpfad vorhanden sind, können Sie eckige Klammern verwenden ([ ]), um dynamische Routen zu definieren. Zum Beispiel:[slug]gibt an, dass der Pfad jeden Wert als denslugParameter überschrieben werden.

Standardseiten und -routen

Next.js erstellt automatisch Routen für die Dateien in Ihrem app/- oder pages/-Ordner.

Im Folgenden finden Sie einige gängige Routenbeispiele:

app/page.tsxentspricht der/Pfad verwiesen werden.
app/about/page.tsxentspricht der/aboutPfad verwiesen werden.
app/[slug]/page.tsxentspricht/[slug], und wird mit jedem URL-Pfad übereinstimmen, wie z. B./post/1oder/product/xyz。

Dynamische Routen

Dynamische Routen ermöglichen es Ihnen, Seiten dynamisch basierend auf verschiedenen Teilen der URL zu rendern.

In Next.js können Sie dynamische Routen implementieren, indem Sie Ordner oder Dateien mit eckigen Klammern erstellen.

Zum Beispiel, angenommen du möchtest unterschiedliche Inhalte basierend auf verschiedenen Artikel-IDs rendern, kannst du das so machen:

app/
├── [id]/
│   └── page.tsx        # 动态路由，匹配任何 `/[id]` 的路径

[id]ist ein Platzhalter für die dynamische Route. Er kann jedenidParameter in der URL abgleichen.

Dynamische Routenparameter abrufen

In Next.js kannst du den useParams-Hook verwenden, um auf dynamische Routenparameter zuzugreifen. Zum Beispiel:

Beispiel

'use client';

import { useParams } from 'next/navigation';

export default function Post() {
const params = useParams();
const { id } = params; // Den dynamischen Routenparameter `id` abrufen

return <div>Beitrags-ID: {id}</div>;
}

Wenn ein Benutzer /post/123 besucht, wird id automatisch auf 123 gesetzt und auf der Seite angezeigt.

Verschachtelte Routen

Next.js unterstützt außerdem verschachtelte Routen, d. h. das Erstellen von Unterrouten unter einer Route. Zum Beispiel:

app/
├── about/
│   ├── page.tsx          # /about 路由页面
│   ├── team/
│   │   └── page.tsx      # /about/team 子路由页面
│   └── contact/
│       └── page.tsx      # /about/contact 子路由页面

Dieser Ansatz verleiht Ihrer Anwendung eine hierarchische Struktur und hält die URL-Pfade lesbar.

Benutzerdefinierte Routenregeln

Wenn Sie das Routenverhalten anpassen möchten, können Sie es über die Datei next.config.js konfigurieren. Next.js bietet jedoch bereits Out-of-the-Box-Funktionalität für die meisten gängigen Routing-Anforderungen, sodass keine zusätzliche Konfiguration erforderlich ist.

Spezielle Seiten und Routenfunktionen

_app.jsund_document.js: In Next.js,_app.jsist die Root-Komponente der Anwendung und ermöglicht es Ihnen, gemeinsame Layouts und Zustand für alle Seiten bereitzustellen._document.jswird hauptsächlich verwendet, um die Struktur des HTML-Dokuments zu ändern (z. B.headundbodyTag).
_error.js: Sie können Fehlerseiten anpassen, um 404 oder andere Fehlertypen zu behandeln.

Beispiel

Erstellen einer statischen Seite

Nehmen wir die Erstellung einer einfachen statischen Seite als Beispiel. Erstellen Sie eine Datei about/page.tsx mit folgendem Inhalt:

Beispiel

export default function AboutPage() {
return <h1>Über uns</h1>;
}

Wenn du den Pfad /about besuchst, rendert Next.js automatisch diese Seite.

Dynamische Routen verwenden

Angenommen, du möchtest eine Seite basierend auf der Artikel-ID rendern. Erstelle eine Datei app/[id]/page.tsx mit dem folgenden Inhalt:

Beispiel

import { useParams } from 'next/navigation';

export default function PostPage() {
const { id } = useParams();

return <h1>Post-ID: {id}</h1>;
}

Beim Besuch von /123 wird Post-ID: 123 angezeigt.

Routennavigation

Next.js verwendet die von next/link bereitgestellte Komponente für die Routennavigation. Du kannst Links in deinen Seiten hinzufügen, um zu anderen Seiten zu navigieren.

Beispiel

import Link from 'next/link';

export default function HomePage() {
return (
<div>
<h1>Willkommen bei Next.js!</h1>
<Link href="/about">Über uns</Link>
</div>
);
}

<Link />Die Komponente wird verwendet, um zwischen Seiten zu navigieren und dabei das Erlebnis einer Single-Page-Anwendung (SPA) beizubehalten.

Andere Erweiterungen