为什么我在 Next.js 静态网站生产构建过程中出现获取错误？

Next.js 静态网站生产构建期间获取错误

在生产中构建 Next.js 网站时，您可能会遇到在运行时不会发生的获取错误发展模式。这可能会令人沮丧和困惑。

了解错误

错误消息“FetchError: invalid json response body at ...”通常表示 API 路由返回的 JSON 响应存在问题。具体来说，错误“JSON 中位置 0 处出现意外的令牌 T”表明服务器返回了无效的 JSON 数据。

原因和解决方案

调用内部 API 路由

在 Next.js 中，避免在 getStaticProps 中调用内部 API 路由至关重要。内部 API 路由在构建时不可用，因为服务器尚未启动。

解决方案： 将 getStaticProps 中的 API 路由调用替换为执行必要操作的直接服务器端代码数据获取。

绝对 URL fetch

如果从 next.config.js 中删除 assetPrefix，请确保 fetch 中使用的 URL 是绝对的。相对 URL 在生产版本中可能不起作用。

解决方案：修改 fetch 调用以使用绝对 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 生产构建期间获取错误的原因并应用适当的解决方案，您可以确保静态网站的成功部署。请记住避免在 getStaticProps 中调用内部 API 路由，在 fetch 中使用绝对 URL，并且更喜欢在生产构建中使用直接服务器端代码来获取数据。

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