Next.js接入Google Tag Manager后页面底部出现意外哈希码问题

• 你在_document.js中直接使用原生<script>标签配合dangerouslySetInnerHTML注入GTM代码的方式不符合Next.js的SSR渲染规则：_document.js仅用于定义文档的基础结构，所有自定义脚本如果没有放在官方规定的<Head>插槽内，也没有使用官方脚本组件，Next.js的SSR渲染逻辑会将用于hydration校验的内部内容哈希错误输出到body标签外，也就是你看到的异常字符串。
• 你插入的GTM代码用模板字符串包裹时存在多余的换行、缩进，触发了Next.js的内联脚本内容校验逻辑，额外输出了哈希标识到DOM中。

• 方案1（官方推荐）：使用Next.js内置的next/script组件注入GTM，无需使用dangerouslySetInnerHTML，操作如下：
  1. 在_document.js头部引入Script组件：

  import Script from 'next/script'
  

  2. 替换原有原生script代码为以下写法，放入<Head>组件内或者<Body>组件的起始位置，必须给组件添加唯一id属性：

  <Script id="gtm-inline-script" strategy="afterInteractive">
    {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P35C2ZJ');`}

该写法会让Next.js正确识别内联脚本，不会生成多余的哈希值，同时能保证GTM的加载时机符合性能要求。
- 方案2（兼容原生写法）：如果你坚持使用原生script标签，必须将整个script标签完整放入`_document.js`的`<Head>`组件内部，不要放在`<Body>`闭合标签外、`<Html>`根节点下的无插槽位置，同时尽量压缩GTM代码的多余换行和缩进。

修改完成后重启开发服务，检查页面源码即可看到异常哈希已经消失，GTM功能正常可用。

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