next superjson plugin

Plugin SuperJson berikutnya

? Plugin Superjson untuk Next.js (SWC)

/halaman (direktori halaman)

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

• Memungkinkan fungsi pra-rendering untuk mengembalikan alat peraga termasuk nilai non-json (tanggal, peta, set ..)

/APP (Direktori Aplikasi)

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

• Memberikan atribut data-superjson untuk komponen server> serialisasi komponen klien.

Penggunaan

Instal Paket Pertama:

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

Tambahkan plugin ke next.config.js

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

Opsi

Anda dapat menggunakan opsi excluded untuk mengecualikan properti spesifik dari serialisasi.

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

Cara kerjanya

 Sequencediagram
    Peserta Next.js
    Plugin SWC Peserta
    Peserta Superjson
    Next.js->> SWC Plugin: Permintaan Transformasi
    Plugin SWC->> Plugin SWC: Transform halaman/komponen <br> untuk menggunakan superjson
    Plugin SWC->> Next.js: Ambil modul
    Next.js-> superjson: terhubung
    Next.js->> superjson: serial props <br> (tanggal, bigint, set, peta ..)
    Catatan atas plugin SWC: getInitialprops <br> getServerSideprops <br> getstaticprops <br> Komponen server
    Superjson->> Next.js: Deserialize Props
    Catatan atas plugin SWC: Halaman <br> Komponen Klien

Laporan Bug

️ Perlu diingat: Plugin SWC masih merupakan fitur eksperimental untuk Next.js

Plugin selalu memastikan kompatibilitas dengan Versi Canary Next.js saja.

Tinggalkan masalah

Terima kasih khusus

• KDY1 (Pencipta Utama Proyek SWC)