next superjson plugin

下一個Superjson插件

？ Next.js（SWC）的Superjson插件

/頁面（頁面目錄）

 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（應用程序目錄）

 // 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" ] } ] , 

它如何工作

測序圖
    參與者Next.js
    參與者SWC插件
    參與者Superjson
    next.js- >> SWC插件：請求轉換
    SWC插件 -  >> SWC插件：轉換頁面/組件<br>使用Superjson
    SWC插件 -  >> Next.js：取模塊
    next.js-> superjson：連接
    next.js- >> superjson：序列化props <br>（日期，bigint，set，map ..）
    通過SWC插件注意：GetInitialProps <br> GetServersideProps <br> GetStaticProps <br>服務器組件
    superjson- >> next.js：應對道具
    通過SWC插件注意：頁面<br>客戶端組件

錯誤報告

配x請記住：SWC插件仍然是Next.js的實驗功能

插件始終確保與Next.js金絲雀版本的兼容性。

留下問題

特別感謝

• KDY1（SWC項目的主要創建者）