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

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で渡せるようになります！