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

如何使用

通过配置文件或 CLI 启用此规则，可使用：

配置文件 (.oxlintrc.json)

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

CLI

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

参考资料

• 规则源码