getStaticProps

Das Exportieren einer Funktion namens getStaticProps wird eine Seite zur Build-Zeit mit den von der Funktion zurückgegebenen Props vorrendern:

import type { InferGetStaticPropsType, GetStaticProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

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
}

export async function getStaticPaths() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}

export default function Page({ repo }) {
  return repo.stargazers_count
}

Sie können Module im Top-Level-Scope für die Verwendung in getStaticProps importieren. Die verwendeten Imports werden nicht für die Client-Seite gebündelt. Das bedeutet, Sie können serverseitigen Code direkt in getStaticProps schreiben, einschließlich Datenabfragen von Ihrer Datenbank.

Kontext-Parameter

Der context-Parameter ist ein Objekt mit folgenden Schlüsseln:

Rückgabewerte von getStaticProps

Die Funktion getStaticProps sollte ein Objekt zurückgeben, das entweder props, redirect oder notFound enthält, gefolgt von einer optionalen revalidate-Eigenschaft.

props

Das props-Objekt ist ein Schlüssel-Wert-Paar, wobei jeder Wert von der Seitenkomponente empfangen wird. Es sollte ein serialisierbares Objekt sein, sodass alle übergebenen Props mit JSON.stringify serialisiert werden können.

export async function getStaticProps(context) {
  return {
    props: { message: `Next.js ist fantastisch` }, // wird als Props an die Seitenkomponente übergeben
  }
}

revalidate

Die revalidate-Eigenschaft gibt die Anzahl der Sekunden an, nach der eine Seiten-Neugenerierung erfolgen kann (Standardwert ist false oder keine Neuvvalidierung).

// Diese Funktion wird zur Build-Zeit serverseitig aufgerufen.
// Sie kann erneut aufgerufen werden, in einer serverlosen Funktion, wenn
// Revalidierung aktiviert ist und eine neue Anfrage eingeht
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js wird versuchen, die Seite neu zu generieren:
    // - Wenn eine Anfrage eingeht
    // - Höchstens einmal alle 10 Sekunden
    revalidate: 10, // In Sekunden
  }
}

Erfahren Sie mehr über Inkrementelle Statische Regeneration.

Der Cache-Status einer Seite, die ISR nutzt, kann durch Lesen des Werts des x-nextjs-cache-Response-Headers bestimmt werden. Die möglichen Werte sind:

• MISS - Der Pfad ist nicht im Cache (tritt höchstens einmal beim ersten Besuch auf)
• STALE - Der Pfad ist im Cache, aber die Revalidate-Zeit wurde überschritten, sodass er im Hintergrund aktualisiert wird
• HIT - Der Pfad ist im Cache und hat die Revalidate-Zeit nicht überschritten

notFound

Der notFound-Boolean ermöglicht es der Seite, einen 404-Status und eine 404-Seite zurückzugeben. Mit notFound: true gibt die Seite einen 404 zurück, selbst wenn zuvor eine erfolgreich generierte Seite existierte. Dies dient zur Unterstützung von Anwendungsfällen wie nutzergenerierten Inhalten, die vom Autor entfernt wurden. Beachten Sie, dass notFound demselben revalidate-Verhalten folgt, das hier beschrieben ist.

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // wird als Props an die Seitenkomponente übergeben
  }
}

Gut zu wissen: notFound wird für den Modus fallback: false nicht benötigt, da nur Pfade, die von getStaticPaths zurückgegeben werden, vorgerendert werden.

redirect

Das redirect-Objekt ermöglicht die Weiterleitung zu internen oder externen Ressourcen. Es sollte die Form { destination: string, permanent: boolean } haben.

In seltenen Fällen müssen Sie möglicherweise einen benutzerdefinierten Statuscode für ältere HTTP-Clients zuweisen, um eine korrekte Weiterleitung zu ermöglichen. In diesen Fällen können Sie die statusCode-Eigenschaft anstelle der permanent-Eigenschaft verwenden, aber nicht beide. Sie können auch basePath: false ähnlich wie Weiterleitungen in next.config.js setzen.

export async function getStaticProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
        // statusCode: 301
      },
    }
  }

  return {
    props: { data }, // wird als Props an die Seitenkomponente übergeben
  }
}

Wenn die Weiterleitungen zur Build-Zeit bekannt sind, sollten sie stattdessen in next.config.js hinzugefügt werden.

Dateien lesen: Verwenden Sie process.cwd()

Dateien können direkt aus dem Dateisystem in getStaticProps gelesen werden.

Dazu müssen Sie den vollständigen Pfad zu einer Datei erhalten.

Da Next.js Ihren Code in ein separates Verzeichnis kompiliert, können Sie __dirname nicht verwenden, da der zurückgegebene Pfad vom Pages Router abweicht.

Stattdessen können Sie process.cwd() verwenden, das Ihnen das Verzeichnis gibt, in dem Next.js ausgeführt wird.

import { promises as fs } from 'fs'
import path from 'path'

// posts werden zur Build-Zeit durch getStaticProps() befüllt
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>
          <h3>{post.filename}</h3>
          <p>{post.content}</p>
        </li>
      ))}
    </ul>
  )
}

// Diese Funktion wird zur Build-Zeit serverseitig aufgerufen.
// Sie wird nicht clientseitig aufgerufen, sodass Sie sogar
// direkte Datenbankabfragen durchführen können.
export async function getStaticProps() {
  const postsDirectory = path.join(process.cwd(), 'posts')
  const filenames = await fs.readdir(postsDirectory)

  const posts = filenames.map(async (filename) => {
    const filePath = path.join(postsDirectory, filename)
    const fileContents = await fs.readFile(filePath, 'utf8')

    // Allgemein würden Sie die Inhalte parsen/transformieren
    // Zum Beispiel können Sie hier Markdown in HTML umwandeln

    return {
      filename,
      content: fileContents,
    }
  })
  // Durch die Rückgabe von { props: { posts } } erhält die Blog-Komponente
  // `posts` als Prop zur Build-Zeit
  return {
    props: {
      posts: await Promise.all(posts),
    },
  }
}

export default Blog

Versionsverlauf