next superjson plugin

Nächstes Superjson -Plugin

? Superjson -Plugin für Next.js (SWC)

/Seiten (Seitenverzeichnis)

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

• Ermöglicht die Vorrenderfunktionen, Requisiten wie Nicht-JSON-Werte zurückzugeben (Datum, Karte, festgelegt ..)

/App (App -Verzeichnis)

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

• Bietet data-superjson -Attribut für die Server-Serialisierung der Serverkomponente> Clientkomponente.

Verwendung

Installieren Sie zuerst Pakete:

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

Fügen Sie das Plugin in next.config.js hinzu

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

Optionen

Sie können die excluded Option verwenden, um bestimmte Eigenschaften von der Serialisierung auszuschließen.

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

Wie es funktioniert

 sequenzieren
    Teilnehmer Next.js
    Teilnehmer SWC Plugin
    Teilnehmer Superjson
    Next.js->> SWC-Plugin: Anforderungstransformation
    SWC-Plugin->> SWC-Plugin: Transformationsseiten/Komponenten <br> Um Superjson zu verwenden
    SWC-Plugin->> Weiter.js: Nehmen Sie Module
    Next.js-> Superjson: Verbunden
    Next.js->> Superjson: Serialize Requisiten <br> (Datum, Bigint, Set, Karte ..)
    Hinweis über SWC -Plugin: GetInitialProps <br> GetServersideProps <br> getstaticProps <br> Serverkomponenten
    Superjson->> Next.js: Deserialize Requisiten
    Hinweis über SWC -Plugin: Seiten <br> Client -Komponenten

Fehlerbericht

Euen Denken Sie daran: SWC Plugin ist immer noch ein experimentelles Merkmal für Next.js

Plugin sorgt immer für die Kompatibilität mit der Next.js Canary Version.

Ein Problem hinterlassen

Besonderer Dank

• KDY1 (Hauptschöpfer des SWC -Projekts)