Seitenpfad abhängig von externen Daten

In der vorherigen Lektion haben wir den Fall behandelt, in dem der Seiteninhalt von externen Daten abhängt. Wir haben getStaticProps verwendet, um die erforderlichen Daten für die Darstellung der Indexseite abzurufen.

In dieser Lektion geht es um den Fall, in dem jeder Seitenpfad von externen Daten abhängt. Next.js ermöglicht es Ihnen, Seiten statisch mit Pfaden zu generieren, die von externen Daten abhängig sind. Dies ermöglicht dynamische URLs in Next.js.

Wie man Seiten mit dynamischen Routen statisch generiert

In unserem Fall möchten wir dynamische Routen für Blogbeiträge erstellen:

• Jeder Beitrag soll den Pfad /posts/<id> haben, wobei <id> der Name der Markdown-Datei im übergeordneten posts-Verzeichnis ist.
• Da wir ssg-ssr.md und pre-rendering.md haben, möchten wir die Pfade /posts/ssg-ssr und /posts/pre-rendering.

Übersicht über die Schritte

Wir können dies durch die folgenden Schritte erreichen. Sie müssen diese Änderungen noch nicht vornehmen – wir werden alles auf der nächsten Seite machen.

Zuerst erstellen wir eine Seite namens [id].js unter pages/posts. Seiten, die mit [ beginnen und mit ] enden, sind dynamische Routen in Next.js.

In pages/posts/[id].js schreiben wir Code, der eine Beitragsseite rendert – genau wie andere Seiten, die wir erstellt haben.

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}

Nun, hier ist das Neue: Wir exportieren eine asynchrone Funktion namens getStaticPaths aus dieser Seite. In dieser Funktion müssen wir eine Liste von möglichen Werten für id zurückgeben.

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // Eine Liste möglicher Werte für id zurückgeben
}

Schließlich müssen wir erneut getStaticProps implementieren – diesmal, um die notwendigen Daten für den Blogbeitrag mit einer bestimmten id abzurufen. getStaticProps erhält params, das id enthält (weil der Dateiname [id].js ist).

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // Eine Liste möglicher Werte für id zurückgeben
}
 
export async function getStaticProps({ params }) {
  // Notwendige Daten für den Blogbeitrag mit params.id abrufen
}

Hier ist eine grafische Zusammenfassung dessen, was wir gerade besprochen haben:

Probieren wir das auf der nächsten Seite aus!