为什么在生产环境中构建 Next.js 静态站点时出现'获取错误”？

在生产中构建 Next.js 静态网站时获取错误

构建 Next.js 网站进行生产时，使用 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中文网其他相关文章！