Next SuperJSON Plugin

🔌 SuperJSON Plugin for Next.js (SWC)

$3

``jsx
export default function Page({ date }) {
return

;
}

// 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..)

$3

`jsx
// 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 ;
}
`

- Provides data-superjson attribute for Server Component > Client Component Serialization.

Usage

Install packages first:

`sh
npm install superjson next-superjson-plugin


or Yarn


yarn add superjson next-superjson-plugin
`

Add the plugin into next.config.js

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

$3

You can use the excluded option to exclude specific properties from serialization.

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

How it works

`mermaid
sequenceDiagram
participant Next.js
participant SWC Plugin
participant SuperJSON
Next.js->>SWC Plugin: Request Transform
SWC Plugin->>SWC Plugin: Transform Pages/Components
To Use SuperJSON
SWC Plugin->>Next.js: Take Modules
Next.js-->SuperJSON: Connected
Next.js->>SuperJSON: Serialize Props
(Date, BigInt, Set, Map..)
Note over SWC Plugin: getInitialProps
getServerSideProps
getStaticProps
Server Components
SuperJSON->>Next.js: Deserialize Props
Note over SWC Plugin: Pages
Client Components

``

Bug Report

⚠️ Keep in mind: SWC Plugin is still an experimental feature for Next.js

Plugin always ensures compatibility with Next.js Canary version only.

Leave an Issue

Special Thanks

- kdy1 (Main creator of swc project)