NextJS+Redux环境下页面就绪时正确调用外部JS初始化函数的方法

1. 声明全局变量类型 + 显式通过window访问 #

Next.js的编译/类型检查无法识别外部脚本注入的全局变量，所以需要先告知TypeScript该变量的存在，再通过window对象显式访问，以此绕过编译错误。

针对TypeScript项目： #

"use client";

import Script from 'next/script';

// 声明全局window对象上的SomeFeature类型
declare global {
  interface Window {
    SomeFeature: {
      init: () => void;
    };
  }
}

export default function YourComponent() {
  return (
    <>
      <div>....</div>
      <Script 
        type="text/javascript" 
        src="/scripts/SomeFeature.js" 
        onReady={() => {
          // 显式通过window访问，确保编译时能识别
          window.SomeFeature.init();
        }} 
      />
    </>
  );
}

针对纯JavaScript项目： #

无需类型声明，直接通过window访问全局变量即可：

"use client";

import Script from 'next/script';

export default function YourComponent() {
  return (
    <>
      <div>....</div>
      <Script 
        type="text/javascript" 
        src="/scripts/SomeFeature.js" 
        onReady={() => {
          window.SomeFeature.init();
        }} 
      />
    </>
  );
}

2. 备选方案：动态导入模块化脚本（若可修改外部代码） #

如果你的SomeFeature.js可以改造成ES模块，也可以用动态导入替代Script标签，更符合模块化规范，同时避免全局变量问题：

改造外部脚本为模块： #

// /scripts/SomeFeature.js
export function init() {
  // 你的初始化逻辑
}

在组件中动态导入并初始化： #

"use client";

import { useEffect } from 'react';

export default function YourComponent() {
  useEffect(() => {
    const loadFeature = async () => {
      const { init } = await import('/scripts/SomeFeature.js');
      init();
    };
    loadFeature();
  }, []);

  return <div>....</div>;
}

注：此方案仅适用于你有权修改外部脚本结构的场景，若脚本为第三方不可修改资源，优先选择第一种方案。

内容的提问来源于stack exchange，提问作者Boštjan Biber