next superjson pluginのダウンロード - next superjson pluginソースコードのダウンロード

next superjson plugin

AI ソースコード

v0.6.1

ダウンロード

次のSuperjsonプラグイン

？ next.js（SWC）のスーパージソンプラグイン

/ページ（ページディレクトリ）

 export default function Page ( { date } ) {
  return < div > Today is { date . toDateString ( ) } </ div > ;
}

// You can also use getInitialProps, getStaticProps
export const getServerSideProps = ( ) => {
  return {
    props : {
      date : new Date ( ) ,
    } ,
  } ;
} ;

事前レンダリング機能は、非json値を含むプロップを返すことができます（日付、マップ、セット..）

/app（app directory）

 // Use "data-superjson" attribute to pass non-serializable props to client components
// No needs to change the propsType of Client Component (It's type-safe!)

export default function ServerComponent ( ) {
  const date = new Date ( ) ;
  return < ClientComponent date = { date } data-superjson /> ;
}

サーバーコンポーネント>クライアントコンポーネントのシリアル化にdata-superjson属性を提供します。

使用法

最初にパッケージをインストールします：

npm install superjson next-superjson-plugin
# or Yarn
yarn add superjson next-superjson-plugin

next.config.jsにプラグインを追加します

 // next.config.js
module . exports = {
  experimental : {
    swcPlugins : [ [ "next-superjson-plugin" , { } ] ] ,
  } ,
} ;

オプション

excludedオプションを使用して、特定のプロパティをシリアル化から除外できます。

 [ 'next-superjson-plugin' , { excluded : [ "someProp" ] } ] ,

それがどのように機能するか

 Sequendediagram
    参加者Next.js
    参加者SWCプラグイン
    参加者スーパージソン
    next.js- >> SWCプラグイン：変換を要求します
    SWCプラグイン -  >> SWCプラグイン：ページ/コンポーネントを変換<br> SuperJSONを使用します
    SWCプラグイン -  >> next.js：モジュールを取ります
    next.js-> superjson：connected
    next.js- >> superjson：serialize props <br>（date、bigint、set、map ..）
    SWCプラグインを介して注：getInitialProps <br> getServersideProps <br> getStaticProps <br>サーバーコンポーネント
    Superjson- >> next.js：小道具を脱皮します
    SWCプラグインを介して注：ページ<br>クライアントコンポーネント