Next.jsのgetStaticPropsやgetServerSidePropsでDate型をシリアライズする方法

image

Next.jsのgetStaticPropsやgetServerSidePropsで、createdなどのDate型データをpropsに渡そうとすると以下のようなエラーになりました。

Error: Error serializing `.data.created` returned from `getStaticProps` in "/".
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.
Error: Error serializing `.data.created` returned from `getServerSideProps` in "/admin/dashboard".
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

Date型をJSONにシリアライズできないのが問題なようです。
しかし、対処法が2つあるのでそれぞれ紹介します。

string型にしてpropsに渡す

getStaticPropsやgetServerSideProps内で、Date型のオブジェクトを文字列にすれば解決します。

const jsonData = JSON.parse(JSON.stringify(data));

このように、データを一度文字列のjsonにしてしまった後で再度jsonに戻すことでエラーは解消されます。

しかし、日付のデータは「2022-01-01T09:00:00.000Z」のような文字列に変換されてしまうので、Date型として処理したい場合は再度Date型に戻すロジックが必要になります。

superjsonを使う

superjsonを使うとDate型のまま渡すことができます。
こちらの方が後の処理が楽になるので、こちらの方法がおすすめです!

READMEに書いてあるこちらの通りに実装していきます。

superjsonをインストール

superjsonのプラグインをインストールします。

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

.babelrcに追加

.babelrcというファイルがプロジェクトルートになければ.babelrcを作成します。

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

以上で、Date型をgetStaticPropsやgetServerSidePropsで渡せるようになります!

お知らせ

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

お知らせ

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More