getStaticProps

Das Exportieren einer Funktion namens getStaticProps führt zu einer Vorab-Renderung (Pre-Rendering) einer Seite zur Build-Zeit unter Verwendung der 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
}

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 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 ist großartig` }, // 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 Revalidierung).

// 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 alle 10 Sekunden
    revalidate: 10, // In Sekunden
  }
}

Erfahren Sie mehr über Inkrementelle Statische Regeneration (ISR).

Der Cache-Status einer Seite, die ISR nutzt, kann durch Lesen des Wertes 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 und wird im Hintergrund aktualisiert
• HIT - Der Pfad ist im Cache und die Revalidate-Zeit wurde 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 dem gleichen revalidate-Verhalten folgt, wie hier beschrieben.

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 für den Modus fallback: false nicht erforderlich, 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 korrekte Weiterleitung zu gewährleisten. 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() 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önnten 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