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.

公開日時
更新日時

Next.jsでPrismaを使う際に↓のようにcreatedAtを追加し、getStaticPropsでprismaからデータを取得してフロント側で表示しようとしたところ、

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

下記のエラーが発生した。

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.

調べてみると似たエラーのissueを発見。

blitz-jsで利用されているsuperjsonをインストールして、

yarn add superjson
yarn add -D babel-plugin-superjson-next

.babelrcのプラグイン設定にsuperjson-nextを追加したらエラーなく表示できるようになった。

{
  "presets": ["next/babel"],
  "plugins": [
    "superjson-next"
  ]
}

Blitz.jsはまだα版とのことだが、Railsライクなフレームワークかつ裏側でNext.jsとPrismaが使われているとのことで気になっている。


Related #js

NestJSでAPI作成

NestJSに入門し始めた

Lambdaでaws cli configureを設定できるようにする

AWS_CONFIG_FILE=/tmp/.aws/configを設定した

Next.js 11

手軽にアップグレードできた

仕事ですぐに使えるTypeScript

奥が深い