Warum erhalte ich Abruffehler während der statischen Site-Kompilierung von Next.js mit „getStaticProps' und „getStaticPaths'?

Aufdecken der Ursache von Abruffehlern bei der statischen Site-Kompilierung von Next.js

Wenn Sie Next.js zum Erstellen einer statischen Website verwenden, ist dies unerlässlich um die Quelle bestimmter Fehler zu kennen, die während des Build-Prozesses auftreten können. In diesem Fall befassen wir uns mit dem spezifischen Problem, das beim Erstellen des npm-Laufs auftritt, wenn sowohl getStaticProps als auch getStaticPaths zum Abrufen von Daten aus einer API-Route verwendet werden.

Fehlerdetails

Der primäre aufgetretene Fehler hängt mit einer ungültigen JSON-Antwort zusammen, die von der API-Route beim Ausführen von npm run build empfangen wurde. Diese Antwort scheint von der API-Routenseiten/api/products/[slug].js zu stammen.

Mögliche Ursachen

1. Falsches API-Routing : Überprüfen Sie die Implementierung von pages/api/products/[slug].js gründlich, um festzustellen, ob die Daten abgerufen werden und angemessen verarbeitet werden. Wenn dieser Code Fehler enthält, kann dies zu einer ungültigen JSON-Antwort führen.
2. API-Routenverfügbarkeit: Beachten Sie, dass auf API-Routen während des Erstellungsprozesses nicht zugegriffen werden kann. Wenn Ihre getStaticProps- oder getStaticPaths-Funktionen zum Abrufen von Daten auf API-Routen angewiesen sind, kann dies daher zu Fehlern führen.

Empfohlene Lösung

Um dieses Problem zu beheben, Erwägen Sie, Ihren Code wie folgt umzugestalten:

1. Utilize Serverseitige Logik: Da getStaticProps ausschließlich auf der Serverseite arbeitet, können Sie API-Routen umgehen, indem Sie die serverseitige Logik direkt in diese Funktionen integrieren. Dadurch entfällt die Notwendigkeit, Daten von einer API-Route abzurufen, und Sie können stattdessen Daten direkt abrufen.
2. Datenabruf vom Server: Direkter Zugriff auf die Datenquelle, die in diesem Fall gespeichert ist in Daten/Produkten, innerhalb von getStaticProps und getStaticPaths. Ändern Sie Ihre Funktionen wie folgt:

// /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,
  };
};

Durch die Übernahme dieser Änderungen beseitigen Sie die Abhängigkeit von der API-Route, beheben den ungültigen JSON-Antwortfehler und ermöglichen eine nahtlose statische Website-Kompilierung.

Das obige ist der detaillierte Inhalt vonWarum erhalte ich Abruffehler während der statischen Site-Kompilierung von Next.js mit „getStaticProps' und „getStaticPaths'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!