getStaticProps

Exporter une fonction appelée getStaticProps pré-rendra une page au moment du build en utilisant les props retournés par la fonction :

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
}

Vous pouvez importer des modules dans la portée globale pour les utiliser dans getStaticProps. Les imports utilisés ne seront pas inclus dans le bundle côté client. Cela signifie que vous pouvez écrire du code serveur directement dans getStaticProps, y compris des requêtes vers votre base de données.

Paramètre context

Le paramètre context est un objet contenant les clés suivantes :

Valeurs retournées par getStaticProps

La fonction getStaticProps doit retourner un objet contenant soit props, redirect, ou notFound suivi d'une propriété optionnelle revalidate.

props

L'objet props est une paire clé-valeur, où chaque valeur est reçue par le composant de page. Il doit s'agir d'un objet sérialisable afin que toutes les props passées puissent être sérialisées avec JSON.stringify.

export async function getStaticProps(context) {
  return {
    props: { message: `Next.js est génial` }, // sera passé au composant de page comme props
  }
}

revalidate

La propriété revalidate est le nombre de secondes après lesquelles une régénération de page peut se produire (par défaut false ou pas de revalidation).

// Cette fonction est appelée au moment du build côté serveur.
// Elle peut être appelée à nouveau, sur une fonction serverless, si
// la revalidation est activée et qu'une nouvelle requête arrive
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js tentera de régénérer la page :
    // - Quand une requête arrive
    // - Au maximum une fois toutes les 10 secondes
    revalidate: 10, // En secondes
  }
}

Apprenez-en plus sur la Régénération Statique Incrémentielle.

Le statut de cache d'une page utilisant ISR peut être déterminé en lisant la valeur de l'en-tête de réponse x-nextjs-cache. Les valeurs possibles sont les suivantes :

• MISS - le chemin n'est pas dans le cache (se produit au maximum une fois, lors de la première visite)
• STALE - le chemin est dans le cache mais a dépassé le temps de revalidation donc il sera mis à jour en arrière-plan
• HIT - le chemin est dans le cache et n'a pas dépassé le temps de revalidation

notFound

Le booléen notFound permet à la page de retourner un statut 404 et une Page 404. Avec notFound: true, la page retournera un 404 même s'il y avait une page générée avec succès auparavant. Cela est destiné à supporter des cas d'utilisation comme du contenu généré par l'utilisateur qui est supprimé par son auteur. Notez que notFound suit le même comportement de revalidate décrit ici.

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

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

  return {
    props: { data }, // sera passé au composant de page comme props
  }
}

Bon à savoir : notFound n'est pas nécessaire pour le mode fallback: false car seuls les chemins retournés par getStaticPaths seront pré-rendus.

redirect

L'objet redirect permet de rediriger vers des ressources internes ou externes. Il doit correspondre à la forme { destination: string, permanent: boolean }.

Dans de rares cas, vous pourriez avoir besoin d'attribuer un code de statut personnalisé pour que les anciens clients HTTP redirigent correctement. Dans ces cas, vous pouvez utiliser la propriété statusCode au lieu de la propriété permanent, mais pas les deux. Vous pouvez aussi définir basePath: false similairement aux redirections dans next.config.js.

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 }, // sera passé au composant de page comme props
  }
}

Si les redirections sont connues au moment du build, elles devraient être ajoutées dans next.config.js à la place.

Lire des fichiers : Utiliser process.cwd()

Les fichiers peuvent être lus directement depuis le système de fichiers dans getStaticProps.

Pour ce faire, vous devez obtenir le chemin complet vers un fichier.

Comme Next.js compile votre code dans un répertoire séparé, vous ne pouvez pas utiliser __dirname car le chemin retourné sera différent de celui du routeur Pages.

À la place, vous pouvez utiliser process.cwd() qui vous donne le répertoire où Next.js est exécuté.

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

// posts sera rempli au moment du build par getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>
          <h3>{post.filename}</h3>
          <p>{post.content}</p>
        </li>
      ))}
    </ul>
  )
}

// Cette fonction est appelée au moment du build côté serveur.
// Elle ne sera pas appelée côté client, donc vous pouvez même faire
// des requêtes directes à la base de données.
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')

    // Généralement vous analyseriez/transformeriez le contenu
    // Par exemple vous pouvez transformer du markdown en HTML ici

    return {
      filename,
      content: fileContents,
    }
  })
  // En retournant { props: { posts } }, le composant Blog
  // recevra `posts` comme prop au moment du build
  return {
    props: {
      posts: await Promise.all(posts),
    },
  }
}

export default Blog

Historique des versions