تنزيل next superjson plugin - تنزيل رمز مصدر next superjson plugin

next superjson plugin

كود الذكاء الاصطناعي

v0.6.1

تنزيل

البرنامج المساعد Superjson التالي

؟ البرنامج المساعد Superjson لـ NEXT.JS (SWC)

/صفحات (دليل الصفحات)

 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" ] } ] ,

كيف تعمل

 Sequencediagram
    المشارك NEXT.JS
    البرنامج المساعد SWC المشارك
    المشارك Superjson
    next.js->> SWC Plugin: طلب تحويل
    البرنامج المساعد SWC->> SWC Plugin: تحويل الصفحات/المكونات <br> لاستخدام Superjson
    SWC Plugin->> next.js: خذ الوحدات النمطية
    next.js-> superjson: متصل
    Next.js->> Superjson: Serialize Props <br> (Date ، Bigint ، Set ، Map ..)
    ملاحظة عبر المكون الإضافي SWC: getInitialProps <br> getServersIdeProps <br> getStaticProps <br> مكونات الخادم
    Superjson->> next.js: Deserialize Props
    ملاحظة عبر المكون الإضافي SWC: صفحات <br> مكونات العميل