在Next.js中集成Zoom SDK时出现ReferenceError: self is not defined问题求助

问题说明 #

在Next.js项目中集成Zoom Meeting SDK时，触发ReferenceError: self is not defined错误。该问题根源在于Next.js默认的服务端渲染（SSR）机制：Zoom SDK依赖浏览器环境的self（等同于window）对象，而服务端不存在这个对象，导致SDK初始化阶段直接报错。

解决方案 #

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

将Zoom相关组件通过Next.js的dynamic函数导入，强制组件仅在客户端渲染：

import dynamic from 'next/dynamic';

// 禁用SSR，仅在客户端加载Meeting组件
const Meeting = dynamic(() => import('./Meeting'), { ssr: false });

export default function ZoomPage() {
  return <Meeting />;
}

方案2：动态加载Zoom SDK模块 #

不在组件顶部直接导入Zoom SDK，而是在客户端环境下动态加载，避免服务端执行SDK代码：

修改原Meeting.js组件：

import React, { useEffect, useState } from 'react';

function Meeting() {
  const [client, setClient] = useState(null);

  useEffect(() => {
    // 仅在客户端动态加载Zoom SDK
    const loadZoomSDK = async () => {
      if (typeof window !== 'undefined') {
        const { default: ZoomMtgEmbedded } = await import('@zoomus/websdk/embedded');
        const zoomClient = ZoomMtgEmbedded.createClient();
        setClient(zoomClient);
      }
    };

    loadZoomSDK();
  }, []);

  function getSignature(e) {
    e.preventDefault();

    fetch('/api/zoom/signature', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        meetingNumber: '123456789',
        role: 0,
      }),
    })
      .then((res) => res.json())
      .then((response) => {
        startMeeting(response.signature);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  function startMeeting(signature) {
    const sdkKey = 'YOUR_SDK_KEY';
    const meetingNumber = '123456789';
    const passWord = '';
    const role = 0;
    const userName = 'React';
    const userEmail = '';
    const registrantToken = '';
    const zakToken = '';

    if (!client) return;

    let meetingSDKElement = document.getElementById('meetingSDKElement');

    client.init({
      debug: true,
      zoomAppRoot: meetingSDKElement,
      language: 'en-US',
      customize: {
        meetingInfo: [
          'topic',
          'host',
          'mn',
          'pwd',
          'telPwd',
          'invite',
          'participant',
          'dc',
          'enctype',
        ],
        toolbar: {
          buttons: [
            {
              text: 'Custom Button',
              className: 'CustomButton',
              onClick: () => {
                console.log('custom button');
              },
            },
          ],
        },
      },
    });

    client.join({
      signature: signature,
      sdkKey: sdkKey,
      meetingNumber: meetingNumber,
      password: passWord,
      userName: userName,
      userEmail: userEmail,
      tk: registrantToken,
      zak: zakToken,
    });
  }

  function handleJoinMeetingClick(e) {
    e.preventDefault();

    if (client) {
      getSignature(e);
    }
  }

  return (
    <div>
      <h1>Zoom Meeting</h1>

      <div id="meetingSDKElement">
        {/* Zoom Meeting SDK Component View Rendered Here */}
      </div>

      <button onClick={handleJoinMeetingClick} disabled={!client}>Join Meeting</button>
    </div>
  );
}

export default Meeting;

关键修复点 #

• 移除组件顶部直接导入的ZoomMtgEmbedded，改用await import()在客户端动态加载SDK
• 在startMeeting中增加client存在性判断，避免空值调用报错
• 给加入按钮添加disabled属性，确保SDK初始化完成后才能触发操作

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