Pourquoi est-ce que j'obtiens des erreurs de récupération lors de la compilation du site statique Next.js avec « getStaticProps » et « getStaticPaths » ?

Découverte de la cause des erreurs de récupération dans la compilation de sites statiques Next.js

Lorsque vous utilisez Next.js pour créer un site Web statique, il est impératif pour connaître la source de certaines erreurs pouvant survenir lors du processus de construction. Dans ce cas, nous aborderons le problème spécifique rencontré lors de la construction de l'exécution de npm lors de l'utilisation à la fois de getStaticProps et de getStaticPaths pour récupérer des données à partir d'une route API.

Détails de l'erreur

L'erreur principale rencontrée est associée à une réponse JSON non valide reçue de la route API lors de l'exécution de npm run build. Cette réponse semble provenir de la route de l'API pages/api/products/[slug].js.

Causes possibles

1. Routage API incorrect : Inspecter minutieusement l'implémentation de pages/api/products/[slug].js pour vérifier si les données sont récupérées et traitées de manière appropriée. S'il y a des erreurs dans ce code, elles peuvent provoquer une réponse JSON invalide.
2. Disponibilité des routes API : Gardez à l'esprit que les routes API ne sont pas accessibles pendant le processus de construction. Par conséquent, si vos fonctions getStaticProps ou getStaticPaths s'appuient sur des routes API pour obtenir des données, cela peut entraîner des erreurs.

Résolution recommandée

Pour corriger ce problème, envisagez de refactoriser votre code de la manière suivante :

1. Utiliser Logique côté serveur : Étant donné que getStaticProps fonctionne exclusivement côté serveur, vous pouvez contourner les routes API en intégrant la logique côté serveur directement dans ces fonctions. Cela élimine le besoin de récupérer les données à partir d'une route API et vous permet à la place de récupérer les données directement.
2. Récupération de données à partir du serveur : Accédez directement à la source de données, qui dans ce cas est stockée dans les données/produits, dans getStaticProps et getStaticPaths. Modifiez vos fonctions comme suit :

// /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 adoptant ces modifications, vous supprimerez la dépendance à l'égard de la route API, résoudrez l'erreur de réponse JSON non valide et permettrez une compilation de sites Web statiques transparente.

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!