Next.js 13项目中Google分析与TagManager自动注入<head>的原因及处理

可能的来源 #

• 第三方依赖包：检查项目依赖，比如next-google-analytics、@next/third-parties这类专门集成GA/GTM的包，或是你用第三方启动模板创建项目时自带的集成。
• Next.js官方第三方集成：Next.js 13+的@next/third-parties包自带自动注入GTM/GA的能力，只要依赖里有这个包且配置了对应环境变量，就会自动生成脚本。
• 环境变量触发：查看项目根目录的.env.local或.env文件，有没有NEXT_PUBLIC_GA_ID、NEXT_PUBLIC_GTM_ID这类变量，部分依赖会读取这些变量自动注入脚本。
• 布局组件的隐式配置：Next.js 13的App Router下，app/layout.tsx里可能藏着你没注意到的GoogleTagManager或GoogleAnalytics组件（来自@next/third-parties/google）；Pages Router则看pages/_app.tsx里的相关配置。

删除/禁用的方法 #

1. 移除相关依赖 #

如果是第三方依赖导致的，直接卸载对应包：

npm uninstall next-google-analytics @next/third-parties
# 用yarn的话
yarn remove next-google-analytics @next/third-parties

2. 删除环境变量 #

找到项目里的.env.local/.env文件，删除NEXT_PUBLIC_GA_ID、NEXT_PUBLIC_GTM_ID这类相关变量，保存后重启开发服务器。

3. 移除布局组件中的配置 #

检查app/layout.tsx（App Router）或pages/_app.tsx（Pages Router），如果有类似下面的代码，直接删除：

// App Router示例
import { GoogleTagManager, GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XXXXXX" />
      <GoogleAnalytics gaId="G-XXXXXX" />
      <body>{children}</body>
    </html>
  )
}

4. 手动禁用自动注入 #

如果是@next/third-parties的自动行为，可在next.config.js里配置禁用：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    thirdPartyPlugins: false,
  },
}

module.exports = nextConfig

脚本管理建议 #

如果之后需要手动控制GA/GTM脚本，推荐：

• 用Next.js的next/script组件手动添加脚本，选择合适的加载策略（比如afterInteractive）
• 只在生产环境注入脚本，通过环境变量判断：

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      {process.env.NODE_ENV === 'production' && (
        <>
          <Script
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
            strategy="afterInteractive"
          />
          <Script id="google-analytics" strategy="afterInteractive">
            {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
            `}
          </Script>
        </>
      )}
      <body>{children}</body>
    </html>
  )
}

内容的提问来源于stack exchange，提问作者Dreama991