🐙

Next.js+prismaでdbにcreatedAtを追加したらerrorが起きた時の対処法

1 min read

今回は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型としてオブジェクトに格納することができました🙆‍♂️

参考

JSON文字列をオブジェクトに変換する
Next.js の SSG で AMP-only のブログを作った

Discussion

ログインするとコメントできます