Next.js中Link跳转时第三方脚本变量访问异常问题排查

strategy="beforeInteractive" 的第三方脚本只会在页面首次刷新加载时执行——它是Next.js在SSR/SSG阶段就嵌入到HTML头部的脚本，仅在整个页面文档加载时运行一次。而通过next/link跳转属于客户端路由（CSR），不会重新加载整个HTML，所以跳转时这个脚本不会再次执行；如果跳转前的页面没加载过该脚本，或者脚本的全局变量没有被保留，就会触发ReferenceError。

1. 替换脚本加载策略（优先推荐） #

把strategy="beforeInteractive"换成afterInteractive或lazyOnload，这两个策略会在客户端路由跳转时也能正确加载脚本：

// 布局组件代码
import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      <Script 
        src="https://example.js" 
        strategy="afterInteractive" 
        onLoad={() => {
          // 脚本加载完成后可执行初始化逻辑
        }}
      />
      {children}
    </>
  );
}

• afterInteractive：页面交互就绪后立即加载，适合需要尽快可用但不阻塞首屏的脚本
• lazyOnload：浏览器空闲时加载，适合非核心功能的脚本

2. 手动检查并动态加载脚本（适配必须用beforeInteractive的场景） #

如果因为业务限制必须保留beforeInteractive，可以在页面的useEffect里手动检查全局变量，不存在则动态创建脚本标签加载：

// 页面组件代码
import { useEffect } from 'react';

declare var MyIncomingVariable: any;

export default function TargetPage() {
  useEffect(() => {
    function loadRequiredScript() {
      if (typeof MyIncomingVariable === 'undefined') {
        const script = document.createElement('script');
        script.src = 'https://example.js';
        script.onload = () => {
          // 脚本加载完成后执行你的业务逻辑
          if (MyIncomingVariable) {
            // 初始化操作
          }
        };
        document.head.appendChild(script);
      } else {
        // 变量已存在，直接执行逻辑
      }
    }

    loadRequiredScript();
  }, []);

  return <div>页面内容</div>;
}

3. 全局变量持久化检查 #

有些第三方脚本挂载的全局变量可能在路由跳转时被意外清除，可在布局组件中添加路由跳转后的检查逻辑，确保变量始终存在：

// 布局组件代码
import Script from 'next/script';
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function Layout({ children }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = () => {
      if (typeof window.MyIncomingVariable === 'undefined') {
        const script = document.createElement('script');
        script.src = 'https://example.js';
        document.head.appendChild(script);
      }
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router]);

  return (
    <>
      <Script src="https://example.js" strategy="beforeInteractive" />
      {children}
    </>
  );
}

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