next superjson plugin

다음 Superjson 플러그인

? Next.js (SWC) 용 Superjson 플러그인

/페이지 (페이지 디렉토리)

 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 값 (날짜,지도, 세트 ..)을 포함하여 사전 렌더링 함수가 소품을 반환 할 수 있도록합니다.

/앱 (앱 디렉토리)

 // 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
    다음 .js- >> SWC 플러그인 : 요청 변환
    SWC 플러그인->> SWC 플러그인 : 변환 페이지/구성 요소 <br> Superjson을 사용하려면
    SWC 플러그인->> next.js : 모듈을 가져 가십시오
    next.js-> Superjson : 연결되어 있습니다
    next.js- >> superjson : 소품 직렬화 <br> (날짜, bigint, set, map ..)
    SWC 플러그인에 대한 참고 사항 : GetInitialProps <br> GetServersideProps <br> GetStaticProps <br> 서버 구성 요소
    Superjson- >> next.js : 소품을 사로화합니다
    SWC 플러그인에 대한 참고 : 페이지 <br> 클라이언트 구성 요소

버그 보고서

켈 명심하십시오 : SWC 플러그인은 여전히 Next.js의 실험 기능입니다.

플러그인은 항상 Next.js Canary 버전과의 호환성을 보장합니다.

문제를 남겨주세요

특별한 감사

• KDY1 (SWC 프로젝트의 주요 제작자)