为什么我在使用'getStaticProps”和'getStaticPaths”进行 Next.js 静态站点编译期间出现获取错误？

揭秘 Next.js 静态站点编译中 Fetch 错误的原因

使用 Next.js 构建静态网站时，势在必行了解构建过程中可能出现的某些错误的来源。在本例中，我们将解决 npm run build 期间使用 getStaticProps 和 getStaticPaths 从 API 路由检索数据时遇到的特定问题。

错误详细信息

遇到的主要错误与执行 npm run build 时从 API 路由收到的无效 JSON 响应相关。此响应似乎源自 API 路由pages/api/products/[slug].js。

可能的原因

1. API 路由不正确:彻底检查pages/api/products/[slug].js的实现以确定是否数据被适当地获取和处理。如果此代码中存在任何错误，则可能会导致无效的 JSON 响应。
2. API 路由可用性： 请记住，API 路由在构建过程中无法访问。因此，如果您的 getStaticProps 或 getStaticPaths 函数依赖 API 路由来获取数据，则可能会导致错误。

建议解决方案

要纠正此问题，考虑在下面重构您的代码方式：

1. 利用服务器端逻辑：由于 getStaticProps 专门在服务器端运行，因此您可以通过将服务器端逻辑直接集成到这些函数中来绕过 API 路由。这消除了从 API 路由获取数据的需要，而是允许您直接检索数据。
2. 从服务器检索数据：直接访问数据源，在本例中是存储的在数据/产品中，在 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,
  };
};

通过采用这些更改，您将消除对 API 路由的依赖，解决无效的 JSON 响应错误，并允许无缝静态网站编译。

以上是为什么我在使用'getStaticProps”和'getStaticPaths”进行 Next.js 静态站点编译期间出现获取错误？的详细内容。更多信息请关注PHP中文网其他相关文章！