Next.js 静的 Web サイトの運用ビルド中にフェッチ エラーが発生するのはなぜですか?

Next.js 静的 Web サイトの運用ビルド中のフェッチ エラー

Next.js Web サイトを運用環境で構築すると、実行時には発生しないフェッチ エラーが発生する場合があります。開発モード。これはストレスがかかり、混乱を招く可能性があります。

エラーについて

エラー メッセージ「FetchError: 無効な json 応答本文 ...」は、API ルートから返される JSON 応答に問題があることを示していることがよくあります。 。具体的には、「JSON の位置 0 に予期しないトークン T があります」というエラーは、サーバーが無効な JSON データを返していることを示しています。

原因と解決策

内部 API ルートの呼び出し

Next.js では、getStaticProps 内の内部 API ルートの呼び出しを避けることが重要です。サーバーがまだ起動していないため、ビルド時には内部 API ルートを使用できません。

解決策: getStaticProps の API ルート呼び出しを、必要な処理を実行する直接サーバー側コードに置き換えます。データの取得。

取得時の絶対 URL

場合next.config.js からassetPrefixを削除し、フェッチで使用されるURLが絶対であることを確認してください。相対 URL は実稼働ビルドでは機能しない可能性があります。

解決策: 絶対 URL を使用するようにフェッチ呼び出しを変更します。

コード リファクタリング

これはリファクタリングされたものですを回避するコードのバージョンエラー:

// 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 }, locale }));
  return {
    fallback: true,
    paths,
  };
};

結論

Next.js 運用ビルド中のフェッチ エラーの原因を理解し、適切な解決策を適用することで、静的 Web サイトのデプロイを確実に成功させることができます。 getStaticProps での内部 API ルートの呼び出しは避け、フェッチでは絶対 URL を使用し、本番ビルドでのデータのフェッチにはサーバー側の直接コードを優先してください。

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