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

本番環境で Next.js 静的 Web サイトを構築中にフェッチ エラーが発生する

本番環境で Next.js Web サイトを構築する場合、getStaticProps を使用すると「フェッチ エラー」が発生する場合がありますgetStaticPaths は API ルートからデータをフェッチします。このエラーは、いくつかの理由で発生する可能性があります。

getStaticProps での内部 API ルートの使用

提供されたコードでは、内部 API ルート /api/products/${slug} を呼び出しています。 、getStaticProps 内から。ビルド時に API ルートが利用できず、フェッチ エラーが発生するため、これは推奨されません。

getStaticProps および getStaticPaths のサーバー側コード

API ルートをフェッチする代わりに、次のように記述する必要があります。 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,
    }
}

getStaticProps および getStaticPaths でデータ ソースを直接使用することで、ビルド時の内部 API ルートの呼び出しを回避し、フェッチを解決します。エラー。

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