← Back to rules

nextjs/inline-script-id 정확성

작동 방식

next/script 컴포넌트 내부에 인라인 콘텐츠 또는 dangerouslySetInnerHTML가 있는 경우, 반드시 id 속성이 존재해야 함을 강제합니다.

왜 문제가 될까요?

Next.js는 페이지 렌더링 중 중복 제거를 위해 인라인 스크립트에 고유한 id 속성이 필요로 합니다.
id가 없으면 동일한 인라인 스크립트가 여러 번 실행될 수 있으며, 예기치 못한 동작이나 성능 문제를 유발할 수 있습니다.
특히 전역 상태를 수정하거나 한 번만 초기화하는 작업을 수행하는 스크립트의 경우 더욱 중요합니다.

예시

이 규칙에 어긋나는 잘못된 코드 예시:

import Script from 'next/script';

export default function Page() {
  return (
    <Script>
      {`console.log('Hello world');`}
    </Script>
  );
}

// dangerouslySetInnerHTML 사용 시도도 잘못됨
export default function Page() {
  return (
    <Script
      dangerouslySetInnerHTML={{
        __html: `console.log('Hello world');`
      }}
    />
  );
}

이 규칙을 준수하는 올바른 코드 예시:

import Script from 'next/script';

export default function Page() {
  return (
    <Script id="my-script">
      {`console.log('Hello world');`}
    </Script>
  );
}

// dangerouslySetInnerHTML 사용 시 올바름
export default function Page() {
  return (
    <Script
      id="my-script"
      dangerouslySetInnerHTML={{
        __html: `console.log('Hello world');`
      }}
    />
  );
}

// 외부 스크립트의 경우 id가 필요 없음
export default function Page() {
  return (
    <Script src="https://example.com/script.js" />
  );
}

사용 방법

이 규칙을 활성화하기 위해 설정 파일 또는 CLI를 사용하는 경우 다음을 활용하세요:

설정 파일 (.oxlintrc.json)

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/inline-script-id": "error"
  }
}

CLI

oxlint --deny nextjs/inline-script-id --nextjs-plugin

참고자료

• 규칙 소스