/

如何修復在 Next.js 中序列化日期對象的 JSON 錯誤

如何修復在 Next.js 中序列化日期對象的 JSON 錯誤

了解在返回包含日期對象的對象時，在 Next.js 中出現 JSON 可序列化錯誤的原因，以及如何修復它。

如果您使用 Next.js 與數據庫，您肯定會遇到這樣的問題。

您在 getServerSideProps() 或 getStaticProps() 中獲取一些數據，例如這樣使用 Prisma：

1
2
3
4
5
6
7
8
9
export async function getServerSideProps() {
 let cars = await prisma.car.findMany()

 return {
 props: {
 cars,
 },
 }
}

現在，如果數據庫表中包含一個包含日期的字段，該字段在 JavaScript 中被轉換為 Date 對象，您將收到如下錯誤：

錯誤截圖

這是因為您必須返回一個可 JSON 序列化的對象。Date 對象無法直接轉換為 JSON。

在這種情況下，解決方案可以非常簡單，如下所示：

1
2
3
4
5
6
7
8
9
10
11
export async function getServerSideProps() {
 let cars = await prisma.car.findMany()

 cars = JSON.parse(JSON.stringify(cars))

 return {
 props: {
 cars,
 },
 }
}

這將把 Date 對象轉換為字符串。

我喜歡這種解決方案，因為它顯而易見，可見且不具侵入性。

另一個解決方案是使用一個名為 superjson 的庫和它的 Next.js 适配器 next-superjson：

1
npm install next-superjson superjson

然後將它添加到 next.config.js：

1
2
3
4
5
6
7
8
/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: true,
}

const { withSuperjson } = require('next-superjson')

module.exports = withSuperjson()(nextConfig)

我在 James Perkins 的博客文章 處理 Next 數據抓取中的日期對象 上找到了這個解決方案。

例如，如果您嘗試返回一個複雜對象，比如 Fetch 的響應，也會發生類似的錯誤：

1
2
3
4
5
6
7
8
9
export async function getServerSideProps() {
 const res = await fetch(...)

 return {
 props: {
 res
 },
 }
}

錯誤截圖

但是在這種情況下，修復不是那麼容易。

您需要首先獲取響應的文本，然後再解析成 JSON，像這樣：

1
2
3
4
5
6
7
8
9
10
export async function getServerSideProps() {
 const res = await fetch(...)
 const data = await res.json() 

 return {
 props: {
 data
 },
 }
}

tags: [“Next.js”, “JSON”, “Date object”, “serialization”, “superjson”]