Next.js跳转页面后特定页面添加的Script脚本仍留存问题咨询

问题1：脚本加载后跳转其他页面仍留存属于正常逻辑 #

Next.js 采用客户端路由实现页面跳转，整个应用运行过程中不会刷新全局文档，脚本一旦被注入到DOM中、对应逻辑挂载到window全局对象上，除非主动清理，否则不会自动消失，这是符合预期的运行机制。

问题2：next/script 不会自动限制脚本仅在指定页面执行 #

你当前把Script组件仅放在X页面中，脚本确实只会在首次访问X页面时被注入，但注入后脚本就是全局生效的：

• 如果你没有额外编写逻辑，脚本本身不会主动在其他页面执行自定义操作，但Facebook Pixel这类统计脚本默认会监听路由变化自动触发上报，需要额外处理避免非X页面的数据被统计。
• next/script 本身没有按页面自动禁用/卸载脚本的优化逻辑，所有执行规则需要你自己控制。

问题3：按需选择处理方案 #

你可以根据自己的需求选两种处理方式：

方案1：仅屏蔽非X页面的上报（推荐，性能损耗更低） #

如果只是不希望其他页面被FB Pixel统计，不需要主动移除脚本，只要在X页面组件的卸载钩子中清理全局FB对象即可：

// 如果你用Pages Router
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import Script from 'next/script'

const XPage = () => {
  const router = useRouter()

  useEffect(() => {
    // 仅在X页面路径下触发上报
    if (window.fbq && router.pathname === '/你的X页面路径') {
      fbq('track', 'PageView')
    }

    // 路由离开X页面时清理全局对象
    return () => {
      if (window.fbq) {
        delete window.fbq
        delete window._fbq
      }
    }
  }, [router.pathname])

  return (
    <>
      {/* 注意把原来的track逻辑从内联脚本里移到上面的useEffect中 */}
      <Script id="Facebook_Pixel_Code">
        {`!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init', [OUR_FB_ID]);`}
      </Script>
      {/* 页面其他内容 */}
    </>
  )
}

export default XPage

如果使用的是Next.js 13+ App Router，把useRouter换成usePathname获取当前路径即可。

方案2：完全移除脚本（适合合规类强需求） #

如果要求非X页面完全不能存在FB相关的脚本，就在清理函数中同时删除DOM中的脚本标签：

// 在上面的useEffect清理函数中增加以下逻辑
return () => {
  // 移除全局对象
  if (window.fbq) {
    delete window.fbq
    delete window._fbq
  }
  // 移除注入的脚本标签
  const fbRemoteScript = document.querySelector('script[src*="facebook.net/fbevents.js"]')
  const fbInlineScript = document.getElementById('Facebook_Pixel_Code')
  fbRemoteScript?.remove()
  fbInlineScript?.remove()
}

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