getStaticPaths

Wenn eine Seite Dynamische Routen verwendet und getStaticProps nutzt, muss sie eine Liste von Pfaden definieren, die statisch generiert werden sollen.

Wenn Sie eine Funktion namens getStaticPaths (Static Site Generation) aus einer Seite mit dynamischen Routen exportieren, wird Next.js alle von getStaticPaths angegebenen Pfade statisch vorrendern.

import type {
  InferGetStaticPropsType,
  GetStaticProps,
  GetStaticPaths,
} from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getStaticPaths = (async () => {
  return {
    paths: [
      {
        params: {
          name: 'next.js',
        },
      }, // Siehe den "paths"-Abschnitt unten
    ],
    fallback: true, // false oder "blocking"
  }
}) satisfies GetStaticPaths
 
export const getStaticProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetStaticProps<{
  repo: Repo
}>
 
export default function Page({
  repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return repo.stargazers_count
}

Die getStaticPaths API-Referenz deckt alle Parameter und Eigenschaften ab, die mit getStaticPaths verwendet werden können.

Wann sollte ich getStaticPaths verwenden?

Sie sollten getStaticPaths verwenden, wenn Sie Seiten statisch vorrendern, die dynamische Routen verwenden und:

• Die Daten von einem Headless-CMS stammen
• Die Daten aus einer Datenbank kommen
• Die Daten aus dem Dateisystem stammen
• Die Daten öffentlich zwischengespeichert werden können (nicht benutzerspezifisch)
• Die Seite vorgerendert werden muss (für SEO) und sehr schnell sein soll — getStaticProps generiert HTML- und JSON-Dateien, die beide von einem CDN zur Leistungsoptimierung zwischengespeichert werden können

Wann wird getStaticPaths ausgeführt

getStaticPaths wird nur während des Builds in der Produktionsumgebung ausgeführt und nicht zur Laufzeit. Sie können den Code, der in getStaticPaths geschrieben wurde, mit diesem Tool aus dem Client-seitigen Bundle entfernen.

Wie wird getStaticProps in Bezug auf getStaticPaths ausgeführt

• getStaticProps wird während next build für alle während des Builds zurückgegebenen paths ausgeführt
• getStaticProps wird im Hintergrund ausgeführt, wenn fallback: true verwendet wird
• getStaticProps wird vor dem ersten Rendering aufgerufen, wenn fallback: blocking verwendet wird

Wo kann ich getStaticPaths verwenden

• getStaticPaths muss mit getStaticProps verwendet werden
• Sie können getStaticPaths nicht mit getServerSideProps verwenden
• Sie können getStaticPaths aus einer Dynamischen Route, die auch getStaticProps verwendet, exportieren
• Sie können getStaticPaths nicht aus einer Nicht-Seiten-Datei (z.B. Ihrem components-Ordner) exportieren
• Sie müssen getStaticPaths als eigenständige Funktion und nicht als Eigenschaft der Seitenkomponente exportieren

Wird in der Entwicklung bei jeder Anfrage ausgeführt

In der Entwicklung (next dev) wird getStaticPaths bei jeder Anfrage aufgerufen.

Pfade on-demand generieren

getStaticPaths ermöglicht es Ihnen, zu steuern, welche Seiten während des Builds und nicht on-demand mit fallback generiert werden. Die Generierung weiterer Seiten während eines Builds führt zu langsameren Builds.

Sie können die Generierung aller Seiten on-demand verzögern, indem Sie ein leeres Array für paths zurückgeben. Dies kann besonders hilfreich sein, wenn Sie Ihre Next.js-Anwendung in verschiedenen Umgebungen bereitstellen. Sie können beispielsweise schnellere Builds erreichen, indem Sie alle Seiten on-demand für Vorschauen generieren (aber nicht für Produktions-Builds). Dies ist nützlich für Websites mit hunderten/tausenden statischen Seiten.

export async function getStaticPaths() {
  // Wenn dies wahr ist (in Vorschau-Umgebungen), keine
  // statischen Seiten vorrendern
  // (schnellere Builds, aber langsamere initiale Seitenladung)
  if (process.env.SKIP_BUILD_STATIC_GENERATION) {
    return {
      paths: [],
      fallback: 'blocking',
    }
  }
 
  // Externe API-Endpunkt aufrufen, um Beiträge zu holen
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // Die Pfade abrufen, die wir basierend auf Beiträgen vorrendern möchten
  // In Produktionsumgebungen alle Seiten vorrendern
  // (langsamere Builds, aber schnellere initiale Seitenladung)
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
 
  // { fallback: false } bedeutet, andere Routen sollten 404 sein
  return { paths, fallback: false }
}