在Next.js中使用next/script组件添加脚本并正确配置tooltips全局变量的方法

我懂你遇到的痛点——在普通HTML里直接写<script>定义全局变量顺风顺水，但到了Next.js的Script组件里就不管用了，这其实是因为Next.js的脚本处理机制和原生HTML不一样，不是简单的“直接插入”就行。

为什么你的写法失效？ #

Next.js的Script组件（默认策略下）会将脚本运行在隔离的作用域中，你在<Script>标签里定义的const tooltips只是这个脚本块内部的局部变量，并不会自动暴露到全局的window对象上。而你的外部脚本大概率是在全局作用域下查找这个变量，自然找不到。

正确的实现方式 #

下面给你几种靠谱的解决方案，按场景选就行：

1. 显式将变量挂载到window对象

这是最直接的方法，把变量挂到全局的window上，让外部脚本能访问到：

import Script from "next/script";

export default function YourComponent() {
  return (
    <div>
      <Script>
        {/* 用模板字符串包裹脚本内容，显式挂载到window */}
        {`window.tooltips = {color: true, icon: true, size: true};`}
      </Script>
      <Script src="url to script" />
      <main></main>
    </div>
  );
}

2. 控制脚本执行顺序（避免时序问题）

如果你的外部脚本依赖这个tooltips变量，一定要确保变量先被定义，再加载外部脚本。可以用dependsOn属性指定依赖关系：

import Script from "next/script";

export default function YourComponent() {
  return (
    <div>
      <Script id="setup-tooltips">
        {`window.tooltips = {color: true, icon: true, size: true};`}
      </Script>
      {/* 用dependsOn确保外部脚本在变量设置完成后执行 */}
      <Script 
        src="url to script" 
        strategy="afterInteractive"
        dependsOn="setup-tooltips"
      />
      <main></main>
    </div>
  );
}

这里的strategy="afterInteractive"是让脚本在页面交互后执行，适合非关键脚本；如果是关键脚本，可以用beforeInteractive（但只能在_app.js或_document.js中使用）。

3. 用useEffect手动处理（更灵活）

如果你不想用Next.js的Script组件，也可以在客户端渲染阶段用useEffect直接操作全局对象，同时动态加载脚本：

import { useEffect } from 'react';

export default function YourComponent() {
  useEffect(() => {
    // 先设置全局变量
    window.tooltips = {color: true, icon: true, size: true};
    
    // 再加载外部脚本
    const script = document.createElement('script');
    script.src = 'url to script';
    script.async = true;
    document.body.appendChild(script);

    // 组件卸载时清理脚本
    return () => {
      document.body.removeChild(script);
      // 可选：清理全局变量
      delete window.tooltips;
    };
  }, []); // 空依赖确保只执行一次

  return <main></main>;
}

总结 #

核心思路就是：Next.js不会自动把脚本里的局部变量提升到全局，必须显式挂载到window；同时要注意脚本的执行顺序，确保依赖的变量先被定义，外部脚本再加载。

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