本番環境で Next.js 静的 Web サイトを構築するとフェッチ エラーが発生するのはなぜですか?

本番環境で Next.js の静的 Web サイトを生成中にエラーが発生しました

Next.js ユーザーは、本番環境用の静的 Web サイトを構築するときにフェッチ エラーが発生する可能性があります機能開発セットアップ (npm run dev) があるにもかかわらず、(npm run build)。この問題は、getStaticProps 関数または getStaticPath 関数内の API ルートからデータを取得するときに発生します。

根本原因

Next.js は、ページとデータを事前にレンダリングすることで静的 Web サイトを構築します。ホスティング環境にデプロイする前に、サーバーにインストールしてください。ただし、通常は動的データの取得に使用される API ルートは、サーバーがまだアクティブではないため、ビルド プロセス中は使用できません。

解決策

解決するにはこの問題を解決するには、getStaticProps/getStaticPath 関数内から内部 API ルートにアクセスすることを避けてください。これらの関数はサーバー側でのみ動作し、外部ネットワーク リクエストに依存しないでください。

推奨アプローチ

代わりに、getStaticProps/getStaticPath 内にサーバー側のコードを直接埋め込みます。データソースからデータを取得します。これらの関数はサーバー上で実行されるため、データベースへのアクセスやサーバー側の操作の実行は許可されます。

リファクタリングの例

提供されたコードでは、修正された getStaticProps を見つけることができます。以下の getStaticPaths 関数:

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

これらの変更を実装することで、本番環境のビルド中にフェッチ エラーが発生しました。

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