getStaticProps

Wenn Sie eine Funktion namens getStaticProps exportieren, wird eine Seite zur Bauzeit vorgerendert und verwendet die von der Funktion zurückgegebenen Props:

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
}

Sie können Module im Top-Level-Bereich importieren, die in getStaticProps verwendet werden. Importierte Module werden nicht für die Clientseite gebündelt. Das bedeutet, Sie können serverseitigen Code direkt in getStaticProps schreiben, einschließlich des Abrufens von Daten aus Ihrer Datenbank.

Context-Parameter

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

Rückgabewerte von getStaticProps

Die getStaticProps-Funktion 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 is awesome` }, // wird der Seitenkomponente als Props übergeben
  }
}

revalidate

Die revalidate-Eigenschaft gibt die Anzahl der Sekunden an, nach denen eine Seitengenerierung erfolgen kann (standardmäßig false oder keine Revalidierung).

// Diese Funktion wird zur Bauzeit auf der Serverseite aufgerufen.
// Sie kann erneut aufgerufen werden, auf einer serverlosen Funktion,
// wenn die 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 Regenerierung.

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

• MISS - der Pfad ist nicht im Cache (tritt höchstens einmal beim ersten Besuch auf)
• STALE - der Pfad ist im Cache, hat aber die Revalidierungszeit überschritten und wird im Hintergrund aktualisiert
• HIT - der Pfad ist im Cache und hat die Revalidierungszeit nicht überschritten

notFound

Der boolesche Wert notFound ermöglicht es der Seite, einen 404-Status und eine 404-Seite zurückzugeben. Mit notFound: true wird die Seite einen 404-Status zurückgeben, auch wenn zuvor eine erfolgreich generierte Seite existierte. Dies soll Anwendungsfälle wie das Entfernen von nutzergeneriertem Inhalt durch dessen Autor unterstützen. Beachten Sie, dass notFound das gleiche revalidate-Verhalten wie hier beschrieben befolgt.

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
  }
}

Hinweis: notFound wird nicht für den fallback: false-Modus benötigt, da nur Pfade, die von getStaticPaths zurückgegeben werden, vorab gerendert werden.

redirect

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

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 Eigenschaft statusCode anstelle der Eigenschaft permanent verwenden, jedoch nicht beide. Sie können auch basePath: false ähnlich wie bei 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 von process.cwd()

Dateien können in getStaticProps direkt vom Dateisystem gelesen werden.

Um dies zu tun, müssen Sie den vollständigen Pfad zu einer Datei abrufen.

Da Next.js Ihren Code in ein separates Verzeichnis kompiliert, können Sie nicht __dirname verwenden, da der zurückgegebene Pfad anders sein wird als im Pages Router.

Stattdessen können Sie process.cwd() verwenden, der 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 von 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 auf der Serverseite aufgerufen.
// Sie wird nicht auf der Clientseite 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')
 
    // Normalerweise würden Sie die Inhalte parsen/transformieren
    // Zum Beispiel können Sie Markdown hier in HTML transformieren
 
    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

Versionshistorie