← Back to rules

nextjs/next-script-for-ga 正确性

它的作用

强制在 Next.js 应用中实现 Google Analytics 时使用 next/script 组件，而不是使用普通的 <script> 标签。

为什么这是不好的？

使用普通的 <script> 标签来实现 Google Analytics 可能会导致以下问题：

• 脚本可能以阻塞方式加载，影响页面性能
• 缺少内置的优化或加载策略
• 无法获得 Next.js 提供的自动资源管理功能

示例

此规则的 错误 代码示例：

// 使用普通 script 标签引入 GA 源
<script src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>

// 使用内联 script 进行 GA 初始化
<script dangerouslySetInnerHTML={{
  __html: `
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  `
}} />

此规则的 正确 代码示例：

import Script from 'next/script'

// 使用 next/script 引入 GA 源
<Script
  src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
  strategy="lazyOnload"
/>

// 使用 next/script 进行 GA 初始化
<Script id="google-analytics">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  `}
</Script>

如何使用

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

配置文件 (.oxlintrc.json)

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/next-script-for-ga": "error"
  }
}

CLI

oxlint --deny nextjs/next-script-for-ga --nextjs-plugin

参考资料

• 规则源码