Next.js getStaticProps 与 SWR“错误序列化从 `getStaticProps` 返回的 `.initialData.config.transformRequest[0]`”

如何解决Next.js getStaticProps 与 SWR“错误序列化从 `getStaticProps` 返回的 `.initialData.config.transformRequest[0]`”

我正在尝试在 Next.js 环境中使用 SWR。

const Best = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
  const { data } = useSWR('/best',apis.getBestProduct,{
    initialData: props.initialData,});

  console.log(data);

  return (
    ...soME PRESENTER
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const data = await apis.getBestProduct();
  return { props: { initialData: data } };
};

export default Best;

我想将 useSWR 与 getStaticprops 一起使用。

但是这段代码会出现这样的错误。

Server Error
Error: Error serializing `.initialData.config.transformRequest[0]` returned from `getStaticProps` in "/best".
Reason: `function` cannot be serialized as JSON. Please only return JSON serializable data types.

数据来的很好，不知道为什么不行。

我使用的是 MacOS，自定义 Node.js 服务器，这是本地主机。

解决方法

getStaticProps 通过首先使用 JSON 序列化您的数据将数据发送到前端 - 也就是说，它将数据从运行时 JavaScript 对象转换为字符串，您的前端可以将其解析为运行时 JavaScript 对象。

但是，JSON 有一定的局限性，其中之一就是不能序列化函数。在您的 data 对象中的某处，您有一个函数值。在从 getStaticProps 返回之前，您需要清理此数据对象。

例如，假设 data.myFunction 是一个函数，您可以执行以下操作：

export const getStaticProps: GetStaticProps = async () => {
  const {myFunction,...data} = await apis.getBestProduct();
  return { props: { initialData: data } };
};

这将删除 myFunction 并将所有其他键保留在 data 中。