Next.js静态部署下如何通过URL参数选择性加载外部脚本？

方案核心逻辑 #

不要依赖React的状态或路由API做判断，直接在HTML的<head>最前部插入阻塞式内联脚本，在所有资源加载前先解析URL参数并存储全局标记，后续脚本根据全局标记判断是否加载，完全适配静态导出场景。

具体实现步骤 #

1. 自定义_document.tsx注入前置判断脚本 #

Next.js的自定义document会在静态构建时被注入到每一页的静态HTML中，我们在这里插入优先级最高的内联脚本，提前解析参数：

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* 其他全局meta标签 */}
          <script
            dangerouslySetInnerHTML={{
              __html: `
                // 这段代码会在所有其他资源加载前执行
                (function() {
                  const urlParams = new URLSearchParams(window.location.search);
                  window.__SCRIPT_FLAGS__ = {
                    disableAll: urlParams.get('scripts') === 'false' || !!urlParams.get('noscripts'),
                    disableAnalytics: urlParams.get('analytics') === 'false',
                    disableCookie: urlParams.get('cookie') === 'false'
                  };
                })();
              `
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

2. 改造HeadScripts.tsx组件，用原生API动态加载脚本 #

不要直接在组件内返回<script>标签，改为通过原生DOM API创建脚本，保证条件判断后插入的脚本可以正常被浏览器执行：

import { useEffect } from 'react'

const HeadScripts = () => {
  useEffect(() => {
    const flags = window.__SCRIPT_FLAGS__
    // 禁用全部脚本直接返回
    if (flags.disableAll) return

    const head = document.head

    // 加载analytics脚本（未禁用的情况下）
    if (!flags.disableAnalytics) {
      const analyticsScript = document.createElement('script')
      analyticsScript.src = '你的analytics脚本地址'
      analyticsScript.async = true
      head.appendChild(analyticsScript)
    }

    // 加载cookie通知脚本（未禁用的情况下）
    if (!flags.disableCookie) {
      const cookieScript = document.createElement('script')
      cookieScript.src = '你的cookie脚本地址'
      cookieScript.async = true
      head.appendChild(cookieScript)
    }

    // 其他自研脚本同理添加即可
  }, [])

  // 这里不需要返回任何元素，所有脚本都通过原生API插入
  return null
}

export default HeadScripts

方案说明 #

• 该方案不需要SSR/服务端逻辑，完全兼容next export静态导出后FTP部署的场景
• 参数判断在页面解析<head>的第一时间执行，不会出现脚本提前加载的问题
• 可灵活扩展多参数控制逻辑，适配不同的测试需求
• 解决了原React动态渲染<script>标签不执行的问题

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