← 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>

// async/defer を指定しない動的 src
<script src={dynamicSrc}></script>

このルールに準拠する正しいコード例:

// async 属性付きスクリプト
<script src="https://example.com/script.js" async></script>

// defer 属性付きスクリプト
<script src="https://example.com/script.js" defer></script>

// スプレッドプロップスを使用（async/defer を含む可能性があるため許可）
<script {...props}></script>

使い方

設定ファイルまたは CLI でこのルールを有効化するには、以下の方法が使えます：

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース