如何在Next.js App Router中添加Google Tag Manager脚本？

在App Router架构下，直接编写原生<script>标签容易引发hydration不匹配或应用崩溃问题，推荐使用Next.js官方提供的next/script组件来注入内联脚本，以下是具体实现步骤：

实现代码（根布局文件） #

在app/layout.tsx中导入Script组件并添加内联配置脚本：

import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 注入GTM配置的内联脚本 */}
        <Script
          id="google-gtag-config"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'G-XXXXX'); // 替换为你的GA测量ID
            `,
          }}
        />
        {children}
      </body>
    </html>
  );
}

关键细节说明 #

• strategy="afterInteractive"：该策略会在页面首次交互后加载脚本，既不会阻塞初始渲染，又能避免服务器与客户端的hydration不匹配问题——脚本仅在客户端执行，不会参与服务器端渲染。如果你的脚本非页面核心功能，也可以用strategy="lazyOnload"（页面完全加载后执行）。
• dangerouslySetInnerHTML：Next.js的Script组件通过该属性支持内联脚本内容注入，确保脚本代码能正确被客户端解析执行。
• 唯一ID：给脚本添加id="google-gtag-config"，避免重复注入相同脚本。

注意事项 #

• 务必将G-XXXXX替换为你实际的Google Analytics测量ID。
• 不要在服务器组件中直接写原生<script>标签，必须通过next/script组件管理客户端脚本，这是App Router架构下的标准做法。

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