● Next.js app router で プレーンなjson以外のクラスを　Server → Client へ渡す

● superjsonのインストール

npm i superjson@1 
npm i next-superjson-plugin

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    swcPlugins: [["next-superjson-plugin", {}]],
  },
}

module.exports = nextConfig

● app router のサーバーサイドからクライアントコンポーネントへ Date オブジェクトを渡す

data-superjson を加えて渡します。

page.tsx

export default async function Page({ params }: PageProps) {
  const date = new Date()

  return (
    <MyClientComponent
      date={date}
      data-superjson
    />
  )
}

デフォルトで渡せるオブジェクトは以下のみです

undefined
bigint 
Date 
RegExp 
Set
Map
Error
URL

● 独自のクラスを渡す

superjson の registerClass メソッドを使って、独自のクラスのシリアライズ方法とデシリアライズ方法を定義します。

import superjson from 'superjson';

class MyCustomClass {
  constructor(public value: string) {}

  // このクラス固有のメソッドなど
}

// MyCustomClass をシリアライズおよびデシリアライズする方法を定義
superjson.registerClass(MyCustomClass, {
  // オブジェクトをシリアライズする方法
  serialize: (instance) => instance.value,
  // シリアライズされたデータをオブジェクトにデシリアライズする方法
  deserialize: (value) => new MyCustomClass(value),
});

const instance = new MyCustomClass('Hello, World!');

// シリアライズ
const jsonString = superjson.stringify(instance);

// デシリアライズ
const newInstance = superjson.parse(jsonString);

console.log(newInstance); // MyCustomClass { value: 'Hello, World!' }