← Back to rules

nextjs/inline-script-id 正确性

它的作用

强制要求所有包含内联内容或使用 dangerouslySetInnerHTML 的 next/script 组件都必须指定 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

参考资料

• 规则源码