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

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

jsでクリップボードにコピーするボタンを実装する

Clipboard.writeText()を使う

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

AWS SESの受信メールを暗号化してs3に保存しLambdaで読み込む

jsの場合、複合処理を独自実装する必要がある

RaspberryPi ZeroにNode.jsの最新版をインストールする

vercel/install-nodeを使うと手軽にインストールできた