如何在Next.js的JSX中运行Termly提供的合规脚本？

方案1：正确使用Next.js Script组件（修复AppLayout语法错误） #

如果使用App Router，Script组件需放置在页面组件（如page.tsx）或布局组件的body范围内，避免因位置错误触发AppLayout相关语法问题。同时手动初始化Termly脚本，确保DOM容器已挂载：

import Script from 'next/script'

export default function TermsPage() {
  return (
    <div>
      {/* 为Termly提供挂载容器 */}
      <div id="termly-embed-container"></div>
      
      {/* 加载Termly脚本并手动初始化 */}
      <Script
        id="termly-embed-script"
        src="https://app.termly.io/embed.min.js"
        strategy="afterInteractive"
        onLoad={() => {
          // 确认Termly全局对象存在后初始化
          if (window.termlyEmbed) {
            window.termlyEmbed.init({
              containerId: 'termly-embed-container',
              policyId: '你的Termly政策ID' // 替换为实际ID
            })
          }
        }}
      />
    </div>
  )
}

• 关键：strategy="afterInteractive"确保脚本在页面交互后加载，避免阻塞渲染；手动初始化能解决自动挂载时容器未就绪的问题。

方案2：修正dangerouslySetInnerHTML用法 #

若使用该方法，需确保脚本通过HTML字符串注入，且容器与脚本配置匹配：

export default function TermsPage() {
  return (
    <div>
      <div id="termly-embed"></div>
      {/* 通过dangerouslySetInnerHTML注入完整脚本 */}
      <div
        dangerouslySetInnerHTML={{
          __html: `
            <script 
              type="text/javascript" 
              src="https://app.termly.io/embed.min.js" 
              data-policy-id="你的Termly政策ID" 
              id="termly-script"
            ></script>
          `
        }}
      />
    </div>
  )
}

• 注意：不要直接在JSX中写<script>标签，必须通过dangerouslySetInnerHTML注入，同时核对data-policy-id的准确性。

常见排查点 #

• 政策ID验证：登录Termly后台复制正确的政策ID，避免拼写错误。
• 控制台错误检查：打开浏览器F12控制台，查看是否存在脚本加载失败（404/500）或全局对象未定义（window.termlyEmbed不存在）的错误。
• CSP配置：若网站启用内容安全策略，需在next.config.js中允许加载Termly脚本：

  module.exports = {
    async headers() {
      return [
        {
          source: '/(.*)',
          headers: [
            {
              key: 'Content-Security-Policy',
              value: "script-src 'self' https://app.termly.io;"
            }
          ]
        }
      ]
    }
  }
  

• App Router布局规范：确保Script组件放置在RootLayout的body内部组件中，不要直接放在布局根节点外。

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