🐙
Next.js+prismaでdbにcreatedAtを追加したらerrorが起きた時の対処法
今回はNext.js+PrismaでdbのスキーマにcreatedAtを追加したらdbとやりとりをしているgetStaticPropsで以下のようなエラーが出た時の解決策の解説です。
Reason: `object` ("[object Date]") cannot be serialized as JSON.
Please only return JSON serializable data types.
エラーが起きた時のコード
export const getStaticProps: GetStaticProps = async () => {
const prisma = new PrismaClient();
const posts = await prisma.post.findMany();
return {
props: {
posts,
},
};
};
調べてみると、どうやらNext.jsの問題らしく、DateTime型のデータをそのまま読み込もうとすると上記のエラーが起こるっぽい(?)です。
解決した方法
エラーメッセージにもJSONにシリアライズ可能なデータ型のみを返してくださいとあるので、今回はcreatedAtを取得し、string型に変換します。
export const getStaticProps: GetStaticProps = async () => {
const prisma = new PrismaClient();
// 取得したデータを一旦dataに格納して、
const data = await prisma.post.findMany();
// dataをstringifyで文字列型のjsonに変換し、それをparseで解析しオブジェクトに変換
const posts = JSON.parse(JSON.stringify(data));
return {
props: {
posts,
},
};
};
これでreturnしているpostsはJavaScriptの普通のオブジェクトになるので、簡単に扱えるようになります。
postsの中身は以下のようになります。
(2) [{…}, {…}]
0: {id: 1, title: "aaa", content: "aaaa", createdAt: "2021-03-11T07:26:56.058Z"}
1: {id: 2, title: "sss", content: "ssss", createdAt: "2021-03-11T07:27:08.278Z"}
length: 2
__proto__: Array(0)
このようにしてDateTime型のcreatedAtをstring型としてオブジェクトに格納することができました🙆♂️
Discussion