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.
Install packages first:
npm install superjson next-superjson-plugin # or Yarn yarn add superjson next-superjson-pluginAdd the plugin into next.config.js
// next.config.js module.exports = { experimental: { swcPlugins: [["next-superjson-plugin", {}]], }, };You can use the excluded option to exclude specific properties from serialization.
['next-superjson-plugin', { 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)