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项目的主要创建者）