Next.js因JS库使用window对象构建失败（无法修改lib.js）的解决方案

方法1：在客户端生命周期钩子中动态导入 #

利用useEffect仅在客户端执行的特性，在组件挂载后再导入目标库，此时window对象已存在：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [xyz, setXyz] = useState(null);

  useEffect(() => {
    // 客户端环境下动态导入lib.js
    import('@/public/lib.js').then((module) => {
      setXyz(module.xyz);
    });
  }, []);

  // 使用xyz前先判断是否加载完成
  if (!xyz) return <div>Loading...</div>;

  return <div>{/* 此处使用xyz */}</div>;
}

export default YourComponent;

方法2：使用Next.js的dynamic导入并禁用SSR #

通过next/dynamic导入依赖该库的组件，强制组件仅在客户端渲染，避免服务端执行时触发window不存在的错误：

import dynamic from 'next/dynamic';

// 导入使用了xyz的组件，禁用服务端渲染
const ComponentUsingXyz = dynamic(
  () => import('../components/ComponentUsingXyz'),
  { ssr: false, loading: () => <div>Loading...</div> }
);

function Page() {
  return <ComponentUsingXyz />;
}

export default Page;

方法3：在全局入口文件中判断环境后加载（适用于全局使用场景） #

在_app.js或_app.tsx中，通过typeof window !== 'undefined'判断客户端环境后再加载库：

import { useEffect } from 'react';
import App from 'next/app';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      // 客户端环境中加载lib.js
      import('@/public/lib.js');
    }
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

注意：如果库需要在组件初始化阶段就使用，优先选择方法1或方法2，确保库在客户端环境完成加载后再执行相关逻辑。

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