Zenn
Closed2

Next.jsでprismaを使ってdbからデータを取得したもののcreatedAtがDate型のためエラーになる

kobaryokobaryo

prismaのデータ型の問題でハマったので試したことを書いていきます。

schema.prismaは以下の通り。

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String
  createdAt DateTime @default(now())
}

pages/index.tsxでトップページに投稿を表示するような簡単なものだが、作成日時を表示するためにcreatedAtを追加しようとしたところ、下記のエラーが発生。

Server Error
Error: Error serializing `.posts[0].createdAt` returned from `getStaticProps` in "/".
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

どうやら、Date型はそのまま使えないらしい。

現時点での思いつく解決策

  1. 投稿時に登録するcreatedAtのデータ型をStringかIntにする
  2. データを取得した際にcreatedAtをStringなどに変換する

index.tsxのgetStaticPropsは以下。

export const getStaticProps: GetStaticProps = async () => {
  const prisma = new PrismaClient();
  const posts = await prisma.post.findMany();
  console.log(posts);
  return {
    props: {
      posts,
    },
  };
};

getStaticPropsでデータを変換するべき？

このスクラップは2021/03/15にクローズされました