next superjson plugin

Следующий плагин Superjson

? Плагин Superjson для lete.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 ( ) ,
    } ,
  } ;
} ;

• Позволяет предварительно Рендендинг-функциям возвращать реквизиты, включая значения, не связанные с JSON (дата, карта, установка ..)

/app (каталог приложений)

 // 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
    Участник Суперджсон
    Next.js->> плагин SWC: преобразование запроса
    Плагин SWC->> плагин SWC: преобразование страниц/компонентов <br> для использования Superjson
    Плагин SWC->> next.js: Take Modules
    Next.js-> Superjson: Connected
    Next.js->> Superjson: Serialize Reps <br> (дата, биглинт, установка, карта ..)
    Примечание к плагину SWC: GetInitialProps <br> GetserverSideProps <br> GetStaticProps <br> Компоненты сервера
    Superjson->> Next.js: Deserialize Reps
    Примечание к плагину SWC: страницы <br> Клиентские компоненты

Отчет об ошибках

️ Имейте в виду: плагин SWC по -прежнему является экспериментальной функцией для letle.js

Плагин всегда обеспечивает совместимость только с версией Canary Next.js.

Оставить проблему

Особая благодарность

• KDY1 (главный создатель SWC Project)