Seiten in Next.js

In Next.js ist eine Seite eine React-Komponente, die aus einer Datei im pages-Verzeichnis exportiert wird.

Seiten werden basierend auf ihrem Dateinamen mit einer Route verknüpft. Beispielsweise gilt in der Entwicklung:

• pages/index.js ist mit der /-Route verknüpft.
• pages/posts/first-post.js ist mit der /posts/first-post-Route verknüpft.

Wir haben bereits die Datei pages/index.js, also erstellen wir nun pages/posts/first-post.js, um zu sehen, wie das funktioniert.

Eine neue Seite erstellen

Erstellen Sie das Verzeichnis posts unter pages.

Erstellen Sie eine Datei namens first-post.js im posts-Verzeichnis mit folgendem Inhalt:

export default function FirstPost() {
  return <h1>First Post</h1>;
}

Die Komponente kann beliebig benannt werden, muss jedoch als default exportiert werden.

Stellen Sie nun sicher, dass der Entwicklungsserver läuft, und rufen Sie http://localhost:3000/posts/first-post auf. Sie sollten die folgende Seite sehen:

Auf diese Weise können Sie in Next.js verschiedene Seiten erstellen.

Erstellen Sie einfach eine JS-Datei im pages-Verzeichnis, und der Pfad zur Datei wird zum URL-Pfad.

In gewisser Weise ähnelt dies dem Erstellen von Websites mit HTML- oder PHP-Dateien. Anstatt HTML zu schreiben, schreiben Sie JSX und verwenden React-Komponenten.

Fügen wir nun einen Link zur neu hinzugefügten Seite hinzu, damit wir von der Startseite aus darauf navigieren können.