Details zu dynamischen Routen

Hier sind einige wichtige Informationen, die Sie über dynamische Routen wissen sollten.

Externe API abfragen oder Datenbank abfragen

Ähnlich wie getStaticProps kann auch getStaticPaths Daten aus beliebigen Datenquellen abrufen. In unserem Beispiel könnte getAllPostIds (das von getStaticPaths verwendet wird) von einem externen API-Endpunkt abrufen:

export async function getAllPostIds() {
  // Anstelle des Dateisystems,
  // werden Post-Daten von einem externen API-Endpunkt abgerufen
  const res = await fetch('..');
  const posts = await res.json();
  return posts.map((post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });
}

Entwicklung vs. Produktion

• In der Entwicklung (npm run dev oder yarn dev) wird getStaticPaths bei jeder Anfrage ausgeführt.
• In der Produktion wird getStaticPaths zur Build-Zeit ausgeführt.

Fallback

Erinnern Sie sich, dass wir fallback: false aus getStaticPaths zurückgegeben haben. Was bedeutet das?

Wenn fallback auf false gesetzt ist, führen alle Pfade, die nicht von getStaticPaths zurückgegeben werden, zu einer 404-Seite.

Wenn fallback auf true gesetzt ist, ändert sich das Verhalten von getStaticProps:

• Die von getStaticPaths zurückgegebenen Pfade werden zur Build-Zeit als HTML gerendert.
• Pfade, die zur Build-Zeit nicht generiert wurden, führen nicht zu einer 404-Seite. Stattdessen serviert Next.js eine "Fallback"-Version der Seite bei der ersten Anfrage an einen solchen Pfad.
• Im Hintergrund generiert Next.js den angefragten Pfad statisch. Nachfolgende Anfragen an denselben Pfad erhalten die generierte Seite, genau wie andere Seiten, die zur Build-Zeit vorgerendert wurden.

Wenn fallback auf blocking gesetzt ist, werden neue Pfade serverseitig mit getStaticProps gerendert und für zukünftige Anfragen zwischengespeichert, sodass dies nur einmal pro Pfad geschieht.

Dies geht über den Rahmen unserer Lektionen hinaus, aber Sie können mehr über fallback: true und fallback: 'blocking' in der fallback-Dokumentation erfahren.

Catch-all-Routen

Dynamische Routen können erweitert werden, um alle Pfade abzufangen, indem drei Punkte (...) innerhalb der Klammern hinzugefügt werden. Zum Beispiel:

• pages/posts/[...id].js passt auf /posts/a, aber auch auf /posts/a/b, /posts/a/b/c und so weiter.

Wenn Sie dies tun, müssen Sie in getStaticPaths ein Array als Wert des id-Schlüssels zurückgeben, wie folgt:

return [
  {
    params: {
      // Statisch generiert /posts/a/b/c
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

Und params.id wird in getStaticProps ein Array sein:

export async function getStaticProps({ params }) {
  // params.id wird wie ['a', 'b', 'c'] sein
}

Werfen Sie einen Blick in die Dokumentation zu Catch-all-Routen, um mehr zu erfahren.

Router

Wenn Sie auf den Next.js-Router zugreifen möchten, können Sie dies tun, indem Sie den useRouter-Hook aus next/router importieren.

404-Seiten

Um eine benutzerdefinierte 404-Seite zu erstellen, erstellen Sie pages/404.js. Diese Datei wird zur Build-Zeit statisch generiert.

// pages/404.js
export default function Custom404() {
  return <h1>404 - Seite nicht gefunden</h1>;
}

Werfen Sie einen Blick in unsere Dokumentation zu Fehlerseiten, um mehr zu erfahren.

Weitere Beispiele

Wir haben mehrere Beispiele erstellt, um getStaticProps und getStaticPaths zu veranschaulichen — sehen Sie sich den Quellcode an, um mehr zu erfahren:

• Blog Starter mit Markdown-Dateien (Demo)
• WordPress-Beispiel (Demo)
• DatoCMS-Beispiel (Demo)
• TakeShape-Beispiel (Demo)
• Sanity-Beispiel (Demo)

Das war's!

In der nächsten Lektion werden wir über API-Routen in Next.js sprechen.