Next.js 11项目中如何正确引入TruConversion热力图脚本？

Next.js 11 提供的 next/script 组件支持通过 strategy 属性控制脚本加载时机和注入位置，不需要手动往 next/head 或者 _document.js 里插入脚本即可满足需求。

• 正确放置位置：pages/_app.js 文件的全局导入区域下方，组件逻辑的最顶部
• 加载策略选择：指定 strategy="beforeInteractive"，该策略会自动将脚本注入到 </head> 标签之前，完全符合 TruConversion 的官方要求

代码示例 #

// pages/_app.js
import Script from 'next/script'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        id="truconversion-tracking"
        strategy="beforeInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            // 替换为你从 TruConversion 后台获取的完整热力图脚本代码
            (function(){var s,t;s=document.createElement('script');s.type='text/javascript';s.async=!0;s.src='https://truconversion.com/your-custom-tracking-code.js';t=document.getElementsByTagName('script')[0];t.parentNode.insertBefore(s,t);})();
          `
        }}
      />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

注意：如果使用内联脚本，一定要添加唯一的 id 属性，避免 Next.js 重复注入脚本。

如果你的脚本不需要在页面渲染前就加载，也可以选择 strategy="afterInteractive"，该策略会在页面 hydration 完成后尽快加载，不会阻塞页面首屏渲染，性能表现更好，也能满足热力图的统计需求。

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