了解在返回包含日期對象的對象時,在 Next.js 中出現 JSON 可序列化錯誤的原因,以及如何修復它。
如果您使用 Next.js 與數據庫,您肯定會遇到這樣的問題。
您在 getServerSideProps()
或 getStaticProps()
中獲取一些數據,例如這樣使用 Prisma:
export async function getServerSideProps() {
let cars = await prisma.car.findMany()
return {
props: {
cars,
},
}
}
現在,如果數據庫表中包含一個包含日期的字段,該字段在 JavaScript 中被轉換為 Date
對象,您將收到如下錯誤:
這是因為您必須返回一個可 JSON 序列化的對象。Date
對象無法直接轉換為 JSON。
在這種情況下,解決方案可以非常簡單,如下所示:
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
:
npm install next-superjson superjson
然後將它添加到 next.config.js
:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}
const { withSuperjson } = require('next-superjson')
module.exports = withSuperjson()(nextConfig)
我在 James Perkins 的博客文章 處理 Next 數據抓取中的日期對象 上找到了這個解決方案。
例如,如果您嘗試返回一個複雜對象,比如 Fetch 的響應,也會發生類似的錯誤:
export async function getServerSideProps() {
const res = await fetch(...)
return {
props: {
res
},
}
}
但是在這種情況下,修復不是那麼容易。
您需要首先獲取響應的文本,然後再解析成 JSON,像這樣:
export async function getServerSideProps() {
const res = await fetch(...)
const data = await res.json()
return {
props: {
data
},
}
}