Pourquoi est-ce que j'obtiens des erreurs de récupération lors de la création d'un site Web statique Next.js en production ?

Erreur lors de la génération d'un site Web statique pour Next.js en production

Les utilisateurs de Next.js peuvent rencontrer des erreurs de récupération lors de la création d'un site Web statique pour la production (npm run build) malgré une configuration de développement fonctionnelle (npm run dev). Ce problème survient lors de la récupération de données à partir des routes API dans les fonctions getStaticProps ou getStaticPath.

Root Cause

Next.js crée des sites Web statiques en pré-rendu les pages et les données sur le serveur avant de les déployer dans un environnement d’hébergement. Cependant, les routes API, qui sont généralement utilisées pour la récupération dynamique des données, ne sont pas disponibles pendant le processus de construction car le serveur n'est pas encore actif.

Résolution

Pour résoudre ce problème, évitez d'accéder aux routes API internes à partir des fonctions getStaticProps/getStaticPath. Ces fonctions fonctionnent exclusivement côté serveur et ne doivent pas reposer sur des requêtes réseau externes.

Approche recommandée

Au lieu de cela, intégrez directement le code côté serveur dans getStaticProps/getStaticPath pour récupérer des données à partir de la source de données. Étant donné que ces fonctions s'exécutent sur le serveur, l'accès aux bases de données ou l'exécution d'opérations côté serveur sont autorisés.

Exemple de refactorisation

Dans le code fourni, vous pouvez trouver le getStaticProps modifié et les fonctions getStaticPaths ci-dessous :

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 implémentant ces modifications, vous pouvez éliminer les erreurs de récupération rencontrées lors de la production. construit.

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!