next superjson plugin

Prochain plugin Superjson

? Plugin Superjson pour next.js (SWC)

/ pages (répertoire des pages)

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

• Permet aux fonctions de pré-renforcement de renvoyer des accessoires, y compris les valeurs non JSON (date, carte, définition ..)

/ App (répertoire de l'application)

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

• Fournit l'attribut data-superjson pour le composant serveur> Sérialisation des composants du client.

Usage

Installez les packages en premier:

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

Ajouter le plugin dans next.config.js

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

Options

Vous pouvez utiliser l'option excluded pour exclure les propriétés spécifiques de la sérialisation.

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

Comment ça marche

 séquenchestre
    participant suivant.js
    Plugin SWC participant
    Participant Superjson
    Next.js - >> Plugin SWC: transformée de demande
    Plugin SWC - >> Plugin SWC: Transformer les pages / composants <br> Pour utiliser Superjson
    Plugin SWC - >> next.js: Prenez des modules
    Next.js -> Superjson: connecté
    Next.js - >> Superjson: sérialiser les accessoires <br> (date, bigint, set, map ..)
    Remarque sur le plugin SWC: getInitialProps <br> getServersIDEPROPS <br> GetStaticProps <br> Composants du serveur
    Superjson - >> next.js: désérialiser les accessoires
    Remarque sur le plugin SWC: pages <br> Composants du client

Rapport de bogue

️ Gardez à l'esprit: le plugin SWC est toujours une fonctionnalité expérimentale pour next.js

Le plugin garantit toujours la compatibilité avec la version canari suivante.

Laisser un problème

Merci spécial

• KDY1 (Créateur principal du projet SWC)