← 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 でこのルールを有効化するには、以下のいずれかを使用してください：

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース