Question
zoom does not work with next js 15
I am experiencing an issue with the Zoom Web SDK in my Next.js application. Upon initializing the Zoom meeting, the application displays a black screen.any help or starter kit for next js 15 ?
--------------------------------------------------------------
this is my console
[Fast Refresh] rebuilding
zoomus-websdk.umd.min.js:2 success load webim
zoomus-websdk.umd.min.js:2 success load jsmedia
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/3.10.0/lib/av/audio.simd.wasm
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/3.10.0/lib/av/video.mtsimd.wasm
4
-------------------------------
"dependencies": {
"next": "15.1.3",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
-------------------------
-------------------------
"use client";
import "./App.css";
import React, { useEffect, useState } from "react";
import Script from "next/script";
import "@zoom/meetingsdk/dist/css/bootstrap.css";
import "@zoom/meetingsdk/dist/css/react-select.css";
function Welcome() {
const [ZoomMtg, setZoomMtg] = useState<any>(null);
const authEndpoint = ""; // Replace with your endpoint
const sdkKey = ""; // Replace with your Zoom SDK Key
const meetingNumber = ""; // Replace with your meeting number
const passWord = ""; // Replace with your meeting password
const role = 0; // 0 = Attendee, 1 = Host
const userName = "React";
const leaveUrl = "http://localhost:3000"; // Redirect after leaving the meeting
useEffect(() => {
import("@zoom/meetingsdk")
.then(({ ZoomMtg }) => {
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
setZoomMtg(ZoomMtg);
})
.catch((error) => console.error("Zoom SDK Error:", error));
}, []);
const getSignature = async () => {
if (!ZoomMtg) return;
try {
const response = await fetch(authEndpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ meetingNumber, role }),
});
const data = await response.json();
startMeeting(data.signature);
} catch (error) {
console.error("Error fetching signature:", error);
}
};
const startMeeting = (signature: string) => {
if (!ZoomMtg) return;
document.getElementById("zmmtg-root")!.style.display = "block";
ZoomMtg.init({
leaveUrl,
success: () => {
ZoomMtg.join({
signature,
sdkKey,
meetingNumber,
passWord,
userName,
success: (success: unknown) => console.log("Joined:", success),
error: (error: unknown) => console.error("Join Error:", error),
});
},
error: (error: unknown) => console.error("Init Error:", error),
});
};
return (
<>
<Script
src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
strategy="beforeInteractive"
/>
<div>
<div id="zmmtg-root"></div>
<div id="aria-notify-area"></div>
<main>
<h1>Zoom Meeting</h1>
<button onClick={getSignature}>Join Meeting</button>
</main>
</div>
</>
);
}
export default Welcome;