Skip to content

Latest commit

 

History

History
72 lines (51 loc) · 2.44 KB

서드 파티 라이브러리.md

File metadata and controls

72 lines (51 loc) · 2.44 KB

서드 파티 라이브러리

  • @next/third-parties 라이브러리는 Next.js에서 인기있는 타사 라이브러리를 로드할때 성능과 DX를 개선하는 구성요소 및 유틸리티 모음을 제공하는 라이브러리임
  • @next/third-parties 는 모든 타사 라이브러리의 사용성과 성능에 최적화됨

시작하기

npm install @next/third-parties@latest next@latest
  • @next/third-parties는 아직 활발하게 개발중인 실험적인 기능임
  • 외부 기능을 연동하는 동안은 canary 또는 latest 버전을 설치하는걸 권장함

구글 서드 파티들

  • Google에서 지원되는 모든 외부 라이브러리는 @next/third-parties/google에서 가져올 수 있음

구글 태그 매니저

  • GoogleTagManager 컴포넌트는 페이지에 구글 태그 관리자 컨테이너를 인스턴스화 하는데 사용이 가능함
  • 기본적으로 페이지에서 hydration이 발생한 후 원본 인라인 스크립트를 가져옴
  • 모든 경로에서 구글 태그 매니저를 로드할려면 루트 레이아웃에 직접 정의해야함
import { GoogleTagManager } from "@next/third-parties/google";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XYZ" />
      <body>{children}</body>
    </html>
  );
}

만약 특정 경로에 대해서 활성화가 필요하다면 page에서 사용하면됨

import { GoogleTagManager } from "@next/third-parties/google";

export default function Page() {
  return <GoogleTagManager gtmId="GTM-XYZ" />;
}

이벤트 발송하기

  • sendGTMEvent 함수는 dataLayer 객체를 사용해서 이벤트를 전송하여 페이지 내부에서 유저의 활동을 추적하는데 사용할 수 있음
  • 이 함수가 올바르게 작동할려면 페이지, 컴포넌트, 동일한 파일 중 1개 이상에서 <GoogleTagManager/> 컴포넌트가 포함되어 있어야함
"use client";

import { sendGTMEvent } from "@next/third-parties/google";

export function EventButton() {
  return (
    <div>
      <button onClick={() => sendGTMEvent({ event: "buttonClicked", value: "xyz" })}>Send Event</button>
    </div>
  );
}

이후 추가 내용은 피쳐와는 별개로 공식문서 확인이 나을듯함 DOCS : https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#options