← Back to rules

nextjs/next-script-for-ga 정확성

작동 방식

Next.js 애플리케이션에서 구글 분석을 구현할 때, 일반 <script> 태그를 사용하는 대신 next/script 컴포넌트를 사용하도록 강제합니다.

왜 문제가 되는가?

구글 분석에 일반적인 <script> 태그를 사용하면 다음과 같은 문제들이 발생할 수 있습니다:

• 스크립트가 차단형 방식으로 로드되어 페이지 성능에 영향을 줄 수 있음
• 내장된 최적화나 로딩 전략이 없음
• Next.js가 제공하는 자동 리소스 처리 기능이 누락됨

예시

이 규칙에 부적절한 코드 예시:

// GA 소스에 일반 스크립트 태그 사용
<script src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>

// GA 초기화용 인라인 스크립트 사용
<script dangerouslySetInnerHTML={{
  __html: `
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  `
}} />

이 규칙에 적절한 코드 예시:

import Script from 'next/script'

// GA 소스에 next/script 사용
<Script
  src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
  strategy="lazyOnload"
/>

// GA 초기화에 next/script 사용
<Script id="google-analytics">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  `}
</Script>

사용 방법

이 규칙을 설정 파일 또는 명령줄에서 활성화하려면 다음을 사용할 수 있습니다:

설정 파일 (.oxlintrc.json)

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/next-script-for-ga": "error"
  }
}

CLI

oxlint --deny nextjs/next-script-for-ga --nextjs-plugin

참고 자료

• 규칙 소스