Next.jsのサーバーサイドコンポーネントにJSONで扱えない値を渡す方法

基本的にgetStaticPropsやgetServerSidePropsでDateオブジェクトなどのJSONで扱えない値を渡すことはできません。 しかし、next-superjson-pluginを使うことでJSONで扱えない値も渡すことができます。 https://github.com/blitz-js/next-superjson-plugin

設定はとても簡単で、

1. next-superjson-pluginをインストール

2. next.config.jsにプラグインを追加

これで、next devコマンドを再度実行すると、JSONで扱えない値を渡すことができるようになります。 ただ、こちらのプラグインはまだ実験的な機能なので、エラーがでることがあります。 ただ、今の所自分はエラーが出たことはありません。

仕組みとしては

1. getStaticPropsでDateオブジェクトなどのJSONで扱えない値をJSONが扱える形に変換でシリアライズする
2. クライアント側でJSONで扱えない値にデシリアライズする

このような処理をnext-superjson-pluginが行ってくれます。