`getStaticProps` および `getStaticPaths` を使用した Next.js 静的サイトのコンパイル中にフェッチ エラーが発生するのはなぜですか?

Next.js 静的サイトのコンパイルでのフェッチ エラーの原因を明らかにする

Next.js を使用して静的 Web サイトを構築する場合、これは必須ですビルドプロセス中に発生する可能性のある特定のエラーの原因を知るため。この例では、API ルートからデータを取得するために getStaticProps と getStaticPaths の両方を利用するときに npm run build 中に直面する特定の問題に対処します。

エラーの詳細

発生した主なエラーは、npm run build の実行時に API ルートから受信した無効な JSON 応答に関連しています。この応答は、API ルートのpages/api/products/[slug].js.

考えられる原因

1. 間違った API ルーティングから発信されているようです。 : Pages/api/products/[slug].js の実装を検査します。データが適切に取得および処理されているかどうかを徹底的に確認します。このコードに誤りがあると、無効な JSON 応答が発生する可能性があります。
2. API ルートの可用性: ビルド プロセス中は API ルートにアクセスできないことに注意してください。したがって、getStaticProps または getStaticPaths 関数が API ルートに依存してデータを取得すると、エラーが発生する可能性があります。

推奨解決策

この問題を修正するには、次のようにコードをリファクタリングすることを検討してください。方法:

1. サーバー側ロジックの利用: getStaticProps はサーバー側でのみ動作するため、サーバー側ロジックをこれらの関数に直接統合することで API ルートをバイパスできます。これにより、API ルートからデータをフェッチする必要がなくなり、代わりにデータを直接取得できるようになります。
2. サーバーからのデータ取得: データ ソースに直接アクセスします。この場合、データ ソースは保存されています。データ/製品内、getStaticProps および getStaticPaths 内。関数を次のように変更します:

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

これらの変更を採用すると、API ルートへの依存がなくなり、無効な JSON 応答エラーが解決され、シームレスな静的 Web サイトのコンパイルが可能になります。

以上が`getStaticProps` および `getStaticPaths` を使用した Next.js 静的サイトのコンパイル中にフェッチ エラーが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。