← Back to rules

nextjs/no-sync-scripts 정확성

작동 방식

이 규칙은 Next.js 애플리케이션에서 동기적 <script> 태그 사용을 방지합니다.
src 속성을 가진 모든 <script> 태그는 반드시 async 또는 defer 속성을 포함해야 합니다.

왜 문제가 되는가?

동기 스크립트는 페이지 렌더링을 차단하고 성능에 부정적인 영향을 줄 수 있습니다.
Next.js 애플리케이션에서는 스크립트를 비동기적으로 로드하기 위해 async 또는 defer 속성을 사용하는 것이 권장되며,
이는 페이지 로드 시간과 사용자 경험을 향상시킵니다.

예시

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

// async/defer 없이 동기 스크립트
<script src="https://example.com/script.js"></script>

// 동적 src로 인해 async/defer 없음
<script src={dynamicSrc}></script>

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

// async 속성이 있는 스크립트
<script src="https://example.com/script.js" async></script>

// defer 속성이 있는 스크립트
<script src="https://example.com/script.js" defer></script>

// spread props 사용 (async/defer를 포함할 수 있으므로 허용됨)
<script {...props}></script>

사용 방법

이 규칙을 구성 파일이나 명령줄 인터페이스를 통해 활성화하려면 다음과 같이 사용할 수 있습니다:

Config (.oxlintrc.json)

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-sync-scripts": "error"
  }
}

CLI

oxlint --deny nextjs/no-sync-scripts --nextjs-plugin

참고 자료

• 규칙 소스