next superjson plugin
v0.6.1
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 ( ) ,
} ,
} ;
} ; // 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 /> ;
}data-superjson สำหรับส่วนประกอบเซิร์ฟเวอร์> การทำให้เป็นอนุกรมส่วนประกอบไคลเอ็นต์ ติดตั้งแพ็คเกจก่อน:
npm install superjson next-superjson-plugin
# or Yarn
yarn add superjson next-superjson-plugin เพิ่มปลั๊กอินลงใน next.config.js
// next.config.js
module . exports = {
experimental : {
swcPlugins : [ [ "next-superjson-plugin" , { } ] ] ,
} ,
} ; คุณสามารถใช้ตัวเลือก excluded เพื่อแยกคุณสมบัติเฉพาะจากการทำให้เป็นอนุกรม
[ 'next-superjson-plugin' , { excluded : [ "someProp" ] } ] , ลำดับ
ผู้เข้าร่วม next.js
ปลั๊กอิน SWC ผู้เข้าร่วม
ผู้เข้าร่วม Superjson
next.js->> ปลั๊กอิน SWC: การแปลงคำขอ
ปลั๊กอิน SWC->> ปลั๊กอิน SWC: แปลงหน้า/ส่วนประกอบ <br> เพื่อใช้ superjson
ปลั๊กอิน SWC->> next.js: ใช้โมดูล
next.js-> superjson: เชื่อมต่อ
next.js->> superjson: serialize props <br> (วันที่, bigint, set, map .. )
หมายเหตุเกี่ยวกับปลั๊กอิน SWC: GetInitialProps <br> GetServersideProps <br> getStaticProps <br> ส่วนประกอบเซิร์ฟเวอร์
superjson->> next.js: deserialize props
หมายเหตุเกี่ยวกับปลั๊กอิน SWC: หน้า <br> ส่วนประกอบไคลเอนต์
ปลั๊กอินจะช่วยให้มั่นใจได้กับความเข้ากันได้กับรุ่นถัดไป JS Canary เท่านั้น
ปล่อยปัญหา
