Pourquoi est-ce que j'obtiens une « erreur de récupération » lors de la création de mon site statique Next.js en production ?

Erreur de récupération lors de la création d'un site Web statique Next.js en production

Lors de la création d'un site Web Next.js pour la production, vous pouvez rencontrer une « erreur de récupération » lors de l'utilisation de getStaticProps et getStaticPaths pour récupérer les données d'une route API. Cette erreur peut se produire pour plusieurs raisons.

Utilisation de la route API interne dans getStaticProps

Dans le code fourni, vous appelez une route API interne, /api/products/${slug} , depuis getStaticProps. Ceci n'est pas recommandé car les routes API ne sont pas disponibles pendant le temps de construction, ce qui entraîne une erreur de récupération.

Code côté serveur dans getStaticProps et getStaticPaths

Au lieu de récupérer une route API, vous devez écrire code côté serveur directement dans getStaticProps et getStaticPaths. Ceux-ci s'exécutent uniquement côté serveur et vous permettent d'écrire du code directement à l'aide de ressources côté serveur telles que des requêtes de base de données.

Code réécrit

Voici une version modifiée de votre code :

// /pages/product/[slug]

import db from '../../../data/products'

// Remaining code..

export const getStaticProps = async ({ params: { slug }, locale }) => {
    const result = db.filter(item => item.slug === slug)
    const data = result.filter(item => item.locale === locale)[0]
    const { title, keywords, description } = data
    return {
        props: {
            data,
            description,
            keywords, 
            title
        }
    }
}

export const getStaticPaths = async () => {
    const paths = db.map(({ slug, locale }) => ({ params: { slug: slug }, locale }))
    return {
        fallback: true,
        paths,
    }
}

En utilisant la source de données directement dans getStaticProps et getStaticPaths, vous évitez d'appeler des routes API internes pendant le temps de construction, résolvant ainsi la récupération. erreur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!