Zenn
😺

getServerSidePropsでDateを含んだデータを返す(superjson使用)

2023/02/01に公開
Next.js
Superjson
tech

Next.jsでgetServerSidePropsを使ってDate型データをpropsに渡そうとすると以下のエラーが発生しました。

error - SerializableError: Error serializing `.data.createdAt` returned from `getServerSideProps` in "/".
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

getServerSidePropsで返却した値はJSONに変換されるため、JSONでシリアライズできるデータ型を返却する必要がありますが、Date型が変換できずにエラーになっていました。
getStaticPropsも同じようにエラーになるみたいです。

これを手軽に解消するために、superjsonを使用します。

環境

使用した環境は以下の通りです。

今回使用した環境は、以下の通りです。

名前 バージョン
node.js 16.19.0
yarn 1.22.19
next.js 13.1.5

superjsonのインストール

最初にsuperjsonをインストールします。

shell
yarn add superjson

次にbabelプラグインのインストールします。

shell
yarn add babel-plugin-superjson-next

babel.rcの修正

babel.rcに以下の様にsuperjsonのプラグインの設定を追加します。
babel.rcがない場合は、新しくbabel.rcを作成して以下を全て記載します。

babel.rc
{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        "superjson-next" // 👈追加
    ]
}

これで、getStaticPropsやgetServerSidePropsの戻り値にDate型が使えるようになりました。

SWC プラグイン

今回は使用しませんでしたが、Next.js 12以降で使用できるSWCのプラグインも用意されていました。
まだ実験的な段階ですが、大幅なスピードアップが見込まれるみたいです。

参考：

https://github.com/blitz-js/superjson

Discussion