Next.js项目如何向所有页面注入中间件脚本实现全局悬浮聊天图标？

方案1：使用 _app.tsx + Next.js 内置Script组件（最推荐） #

pages/_app.tsx 是Next.js Pages Router的全局入口组件，所有页面都会被它包裹，修改后天然对所有页面生效，配合官方Script组件可以自动处理脚本加载优先级、避免重复加载，是当前场景的最优选择。
操作步骤：

• 若pages目录下没有_app.tsx，先新建该文件，参考代码如下：

import type { AppProps } from 'next/app'
import Script from 'next/script'
// 导入你项目原有的全局依赖、布局组件
import MyLayout from '你的MyLayout组件实际路径'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      {/* 保留原有页面渲染逻辑 */}
      <Component {...pageProps} />
      {/* 客服SDK脚本，lazyOnload策略不会阻塞页面渲染 */}
      <Script
        id="chat-sdk"
        strategy="lazyOnload"
        onLoad={() => {
          // 替换为服务商提供的实际参数
          const BASE_URL = '你的SaaS服务商提供的BASE_URL'
          window.chatSDK.run({
            token: '你的客服SDK授权token',
            baseUrl: BASE_URL
          })
        }}
      >
        {`
          (function(d,t) {
            var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            const BASE_URL = '你的SaaS服务商提供的BASE_URL';
            g.src=BASE_URL+"/packs/js/sdk.js";
            g.defer = true;
            g.async = true;
            s.parentNode.insertBefore(g,s);
          })(document,"script");
        `}
      </Script>
    </>
  )
}

• 若TypeScript项目出现window.chatSDK不存在的报错，在项目全局类型声明文件（如global.d.ts）中添加类型定义即可：

declare global {
  interface Window {
    chatSDK: {
      run: (options: { token: string; baseUrl: string }) => void
    }
  }
}
export {}

方案2：注入到MyLayout组件 #

如果确认项目所有页面都复用了MyLayout组件，也可以把上述的Script组件直接放在MyLayout的返回内容末尾，效果和放在_app.tsx完全一致。

注意事项 #

• 不要手动在useEffect中创建DOM节点插入脚本，Next.js官方Script组件已经做了SSR兼容、加载优化，稳定性更高
• 不需要把脚本放在_document.tsx中，放在_app.tsx配合lazyOnload策略性能更优
• 上线前确认替换所有占位的BASE_URL、token参数为生产环境实际值，不要泄露敏感凭证

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