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

在生产中为 Next.js 生成静态网站时出错

Next.js 用户在构建用于生产的静态网站时可能会遇到获取错误（npm run build）尽管有功能开发设置（npm run dev）。当从 getStaticProps 或 getStaticPath 函数中的 API 路由获取数据时，会出现此问题。

根本原因

Next.js 通过预渲染页面和数据来构建静态网站服务器，然后再将它们部署到托管环境。但是，通常用于动态数据检索的 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,
    }
}

通过实施这些更改，您可以消除 fetch生产构建期间遇到的错误。

以上是为什么在生产环境中构建 Next.js 静态网站时会出现获取错误？的详细内容。更多信息请关注PHP中文网其他相关文章！