getStaticProps

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

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 getStaticProps() {
  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 Importe werden nicht für die Client-Seite gebündelt. Das bedeutet, Sie können serverseitigen Code direkt in getStaticProps schreiben, einschließlich dem Abrufen von Daten aus Ihrer Datenbank.

Context-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 großartig` }, // wird als Props an die Seitenkomponente übergeben
  }
}

revalidate

Die revalidate-Eigenschaft gibt die Anzahl der Sekunden an, nach der eine Neugenerierung der Seite 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
// Revalidation 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, daher wird er im Hintergrund aktualisiert
• 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 vorhanden war. Dies dient zur Unterstützung von Anwendungsfällen wie benutzergenerierten 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 ist nicht erforderlich für den fallback: false-Modus, 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 festlegen, um eine ordnungsgemäße 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 zurückgibt, in dem Next.js ausgeführt wird.

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

// posts wird zur Build-Zeit durch getStaticProps() gefü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')

    // Im Allgemeinen würden Sie die Inhalte parsen/transformieren
    // Beispielsweise 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