🤖
Next.js 13でClient ComponentにDateを含むPropsを渡したい
Next.js 13のApp dirにて開発中、次のような警告メッセージがコンソールにドバドバ流れている事に気づきました。
Warning: Only plain objects can be passed to Client Components from Server Components.
Date objects are not supported.
Client Componentに渡しているPropsに型がDateのプロパティが含まれている場合に発生するようです。
警告なので無視しても良いかもしれませんが、バージョン13以前はエラーだった上にログが埋まるので警告を出ないようにしたいです。
それではやっていきましょう💪
環境
- Next.js 13 (App dir)
- TypeScript
ライブラリのインストール
superjsonとnext-superjson-pluginを使います。
yarn add superjson next-superjson-plugin
next.config.jsに下記のオプションを追加します。
next.config.js
module.exports = {
experimental: {
swcPlugins: [["next-superjson-plugin", {}]],
},
};
これで準備完了です！🎉
コードを書く
使い方はとっても簡単。
シリアライズ必須のpropsを渡す時にdata-superjson属性を付与するだけです。
export default function ServerComponent() {
const date = new Date();
return <ClientComponent date={date} data-superjson />;
}
簡単！！！🎉🎉
余談
Date objects are not supported.で分かる方もいると思いますが、これはNext.js 13以前のgetServerSidePropsやgetStaticProps内でDateを含むオブジェクトを返すと発生する・・・
Reason: `object` ("[object Date]") cannot be serialized as JSON.
Please only return JSON serializable data types.
このエラーと一緒です。
しかしNext.js 13のApp dirはgetServerSidePropsやgetStaticProps等が廃止に。代わりにServer Componentから直接fetchするように変更されています。
バージョン13以前はパフォーマンス上の理由により事前のシリアライズが必須でしたが、バージョン13になって何か変わったのでしょうか・・・。
Discussion