NextJs Third Party Libraries

백견이불여일타(百見而不如一作)

Third Party Libraries

---

npm i @next/third-parties

@next/third-parties는 Next.js 애플리케이션에서 인기 있는 서드 파티 라이브러리를 로딩하는 성능과 개발자 경험을 개선하기 위한 컴포넌트와 유틸리티 모음을 제공하는 라이브러리입니다.

@next/third-parties가 제공하는 모든 서드 파티 통합은 성능과 사용 편의성에 최적화되어 있습니다.

적용 전

  <Script id="google-tag-manager" strategy="afterInteractive">
        {`function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','${GTM_ID}');`}
 </Script>

적용 후

 <GoogleTagManager gtmId={`${GTM_ID}`} />

Nextjs 한글 문서 (커뮤니티)

https://nextjs-ko.org/docs/pages/building-your-application/optimizing/third-party-libraries