next superjson plugin

Siguiente complemento Superjson

? Superjson Plugin para next.js (SWC)

/páginas (directorio de páginas)

 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 ( ) ,
    } ,
  } ;
} ;

• Permite que las funciones previas a la renderización devuelvan los accesorios, incluidos los valores no json (fecha, mapa, set ..)

/App (directorio de aplicaciones)

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

• Proporciona el atributo data-superjson para componente del servidor> Serialización del componente del cliente.

Uso

Instalar paquetes primero:

npm install superjson next-superjson-plugin
# or Yarn
yarn add superjson next-superjson-plugin

Agregue el complemento al next.config.js

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

Opción

Puede usar la opción excluded para excluir propiedades específicas de la serialización.

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

Cómo funciona

 secuencediagram
    Participante Next.js
    complemento SWC participante
    Participante Superjson
    Next.js->> complemento SWC: transformación de solicitud
    SWC Plugin->> SWC Plugin: transformar páginas/componentes <br> para usar SuperJSON
    SWC Plugin->> Next.js: tomar módulos
    Next.js-> Superjson: conectado
    Next.js->> Superjson: serializa accesorios <br> (fecha, bigint, set, map ...)
    Nota sobre el complemento SWC: GetInitialProps <br> GetServersideProps <br> GetStaticProps <br> Componentes del servidor
    Superjson->> next.js: deserializar accesorios
    Nota sobre el complemento SWC: Páginas <br> Componentes del cliente

Informe de error

️ Tenga en cuenta: el complemento SWC sigue siendo una característica experimental para Next.js

El complemento siempre garantiza la compatibilidad con la versión Next.js Canary solamente.

Dejar un problema

Agradecimiento especial

• KDY1 (creador principal del proyecto SWC)