Next.js集成Zego Cloud遇document is not defined错误（已用use client）

即使加了'use client'还报错，核心原因是Zego SDK或相关代码在Next.js预渲染（SSR/SSG）阶段就执行了访问document的逻辑——客户端组件虽然在浏览器端会接管，但预渲染时Node.js环境里还是会跑一遍组件顶层的代码，这时候document不存在就会报错。

给你几个靠谱的解决方法：

方法1：用Next.js动态导入禁用SSR #

把Zego相关的组件单独抽成一个文件，然后用dynamic导入并关闭SSR，确保这个组件只在浏览器端加载：

// 页面文件（比如page.js）
import dynamic from 'next/dynamic';

// 动态导入Zego组件，禁用SSR
const ZegoLiveComponent = dynamic(() => import('./components/ZegoLive'), {
  ssr: false,
  loading: () => <div>加载中...</div> // 可选：加载状态提示
});

export default function Home() {
  return (
    <div>
      <ZegoLiveComponent />
    </div>
  );
}

然后在ZegoLive.jsx里正常写客户端逻辑，加'use client'即可。

方法2：在组件内部延迟初始化SDK #

如果不想拆分组件，就在客户端组件里用useEffect延迟加载/初始化Zego SDK，确保只在浏览器环境执行：

'use client';
import { useEffect, useState } from 'react';

export default function ZegoLive() {
  const [zegoEngine, setZegoEngine] = useState(null);

  useEffect(() => {
    // 先判断是否在浏览器环境
    if (typeof document === 'undefined') return;

    // 动态加载Zego SDK并初始化
    import('zego-express-engine-webrtc').then((ZegoExpressEngine) => {
      const engine = new ZegoExpressEngine(你的APPID, 你的服务器密钥);
      setZegoEngine(engine);
      // 这里可以继续写初始化后的逻辑，比如登录房间等
    });

    // 组件卸载时销毁实例
    return () => {
      if (zegoEngine) {
        zegoEngine.destroy();
      }
    };
  }, []);

  // SDK未初始化时显示加载状态
  if (!zegoEngine) {
    return <div>正在准备直播组件...</div>;
  }

  return (
    <div>
      {/* 这里写Zego相关的UI和逻辑 */}
    </div>
  );
}

注意点 #

• 不要在'use client'文件的顶层直接导入并初始化Zego SDK，比如不要在组件函数外面写import ZegoExpressEngine from 'zego-express-engine-webrtc'然后直接new实例，这种代码会在预渲染阶段执行。
• 如果用Zego的官方UI组件（比如ZegoUIKitPrebuilt），同样要套动态导入+ssr: false，因为这些UI组件内部可能直接访问了document。

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