Keep in mind that NextJS runs both in the browser and on the server. During a server side render, window is not defined. You can use dynamic imports to only import some dependencies on the browser, where window will be defined.

https://nextjs.org/docs/advanced-features/dynamic-import

Here is the example from NextJS

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

You can do essentially the same, but with your dependency.

Edit: I thought ZoomMtg was a component. The first example from the docs is closer to what you need for ZoomMtg.

Something like this should do the trick:

  const [zoomMtg, setZoomMtg] = useState(null)
  useEffect(() => {
   ( async () => {
     if(typeof window !== "undefined"){
      const {ZoomMtg} = (await import('@zoomus/websdk'))
      setZoomMtg(ZoomMtg)
    }
    })()
  }, [])

Then just confirm zoomMtg the state variable is defined before rendering your component. {!!zoomMtg && <YourComponent />

NOTE: If you have control over the YourComponent module, then a better alternative would be to move the import of ZoomMtg to this file and just import it normally. Then import YourComponent with the nextjs dynamic syntax.

i have faced same issue in nextjs after import module it will give a error like this - SyntaxError: Cannot use import statement outside a module. if you want to use module if it is not working in nextjs it is best solution and it is not a issue just configer setting if modules not working follow -

npm i next-compose-plugins 
npm i next-transpile-modules

next.config.js

const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules")([
   "@project-serum/sol-wallet-adapter",
   "import another modules if not working..."
]);

module.exports = withPlugins([withTM], {
  pageExtensions: ["mdx", "md", "jsx", "js", "tsx", "ts", "cjs", "mjs"],
  distDir: "build",
  basePath: "",
  and config other... 
}

after this setting in next.config.js you can use module suppose make a new file demo.js in components and after this it will work.

demo.js

import Wallet from "@project-serum/sol-wallet-adapter";

I tested this code, it works:

const Page = () => {

    const handleClick = async () => {
        alert("ok")
    }

    return (
        <main>
            {/* get meeting number and role here (and password maybe) */}
            <button onClick={handleClick}>Join meeting</button>
            {/* <div>{meetingUrl && <ZoomWindow url={meetingUrl} />}</div>  */}
        </main>
    )
}

export default Page

Check your @zoomus/websdk lib, then

• npm i in your folder
• re-run your project