Note
This is a fork of next-superjson-plugin that adds support for the latest versions of Next.js.
Install packages first:
npm install superjson superjs
8000
on-next
# or Yarn
yarn add superjson superjson-nextImportant
Because of a bug in Next.js (see #72019), this plugin can only run in either app router or page router mode.
Add the plugin into next.config.js. And select the type of Router you are using.
// next.config.js
module.exports = {
experimental: {
swcPlugins: [["superjson-next", { router: "APP" | "PAGE" }]],
},
};// For pages router no further configuration is required.
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(),
},
};
};- Allows pre-rendering functions to return props including Non-JSON Values(Date, Map, Set..)
// 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 />;
}- Provides
data-superjsonattribute for Server Component > Client Component Serialization.
You can use the excluded option to exclude specific properties from serialization.
["superjson-next", { router: "APP" | "PAGE", excluded: ["someProp"] }],sequenceDiagram
participant Next.js
participant SWC Plugin
participant SuperJSON
Next.js->>SWC Plugin: Request Transform
SWC Plugin->>SWC Plugin: Transform Pages/Components <br> To Use SuperJSON
SWC Plugin->>Next.js: Take Modules
Next.js-->SuperJSON: Connected
Next.js->>SuperJSON: Serialize Props <br> (Date, BigInt, Set, Map..)
Note over SWC Plugin: getInitialProps <br> getServerSideProps <br> getStaticProps <br> Server Components
SuperJSON->>Next.js: Deserialize Props
Note over SWC Plugin: Pages <br> Client Components
Plugin always ensures compatibility with Next.js Canary version only.
- kdy1 (Main creator of swc project)