useEffect only runs in the client so the issue is likely unrelated to Next.js

it does appear to relate to all pages being pre-rendered, the "use client"; tag at the beginning doesn't seem to make a difference for this case though. In a React app, the package import and usage works perfectly fine, it's the next.js context that seems to change it.

in vanilla React, this code works perfectly, but in Next.js, the standard import fails and is undefined. all of the solutions I have found seem to use one method or another of dynamically importing the Zoom SDK but none seem to actually work!

I know this isn't a strictly Next.js question, just thought i'd reach out here in case anyone has had Zoom SDK experience, it's been hard to find answers about it.

...
import ZoomMtgEmbedded from '@zoomus/websdk/embedded';

function App() {
  const client = ZoomMtgEmbedded.createClient();
  function getSignature(e) {
    fetch(authEndpoint, {....}).then(res => res.json())
    .then(response => {
      startMeeting(response.signature)
    }).catch(...)
  }

  function startMeeting(signature) {

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

    client.init({
      zoomAppRoot: meetingSDKElement,
      language: 'en-US'
    });

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

  return (

    <div className="App">
      <main>
        <h1>Zoom Meeting SDK Sample React</h1>

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

        <button onClick={getSignature}>Join Meeting</button>
      </main>
    </div>
  );
}

export default App;

yeah the directive doesn't change the rendering behavior to CSR, these components are still pre-rendered

if you don't want this specific component to render on the server you can import it with next/dynamic and ssr: false: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr

also this is unrelated but the code in your last snippet probably has a bug, it is instantializing client on every re-render. you probably want to store it inside a ref