# Websdk Nextjs Integration

**URL:** <https://devforum.zoom.us/t/websdk-nextjs-integration/72665>\
**Category:** Web\
**Tags:** webinar\
**Created:** [July 21, 2022, 9:17pm UTC](https://devforum.zoom.us/t/websdk-nextjs-integration/72665 "2022-07-21T21:17:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bianca](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/bianca/32/39645_2.png) [@Bianca](https://devforum.zoom.us/u/Bianca)\
**Post date:** [July 21, 2022, 9:17pm UTC](https://devforum.zoom.us/t/websdk-nextjs-integration/72665/1 "2022-07-21T21:17:25Z")

</div>

**Description**  
Greetings!  
I’m trying to use @zoomus/websdk for integrate the client view in my website with NextJs. I’ve followed all the steps in the documentation and it works perfectly with my setup from the [sample React app](https://github.com/zoom/meetingsdk-react-sample). However, when I try to integrate it into my Nextjs app with the same setup it doesn’t work.  
I already got over “window is not defined” problem, with dynamic imports. However, now I only see a loading window with “Joining Meeting” message.  
Please, if there is something that I could do, I’ll be so grateful guys.

**Which Web Meeting SDK version?**  
@zoomus/websdk 2.5.0

**Meeting SDK Code Snippets**  
This is my setup

ZoomMtg.setZoomJSLib(“[https://source.zoom.us/2.5.0/lib](https://source.zoom.us/2.5.0/lib)”, “/av”);  
ZoomMtg.preLoadWasm();  
ZoomMtg.prepareWebSDK();  
ZoomMtg.i18n.load(“en-US”);  
ZoomMtg.i18n.reload(“en-US”);

ZoomMtg.init({  
leaveUrl,  
success: (success) =\> {  
console.log(success);

```
    ZoomMtg.join({
      signature,
      meetingNumber,
      userName,
      sdkKey,
      userEmail,
      passWord: "",
      tk: registrantToken,
      success: (success) => {
        console.log(success);
      },
      error: (error) => {
        console.log(error);
      },
    });
  },
  error: (error) => {
    console.log(error);
  },
});

```

---

<div class="post-metadata">

**Author:** ![michael.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/michael.zoom/32/37213_2.png) [@michael.zoom](https://devforum.zoom.us/u/michael.zoom)\
**Post date:** [July 21, 2022, 10:38pm UTC](https://devforum.zoom.us/t/websdk-nextjs-integration/72665/2 "2022-07-21T22:38:02Z")

</div>

Hi @Bianca, welcome 👋

I haven’t tried this myself, but my first thought on the differences in that sample react app to a nextjs app would be the SSR loading of those pages. Seeing you’re solving the window issue, if you prevent the page from using SSR do you get the same behavior? Are you getting any console errors in the browser?

---

<div class="post-metadata">

**Author:** ![Bianca](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/bianca/32/39645_2.png) [@Bianca](https://devforum.zoom.us/u/Bianca)\
**Post date:** [July 22, 2022, 2:14pm UTC](https://devforum.zoom.us/t/websdk-nextjs-integration/72665/3 "2022-07-22T14:14:05Z")

</div>

I only get this warning on console  
`DevTools failed to load source map: Could not load content for https://source.zoom.us/2.5.0/lib/webim.min.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE`  
But in the react App I got the same warning and it’s working.

- Additionally it looks like the css styles are not loading

Non-SSR behavior can be a problem. But in many cases that I read on this forum it worked this way.

Maybe loading ZoomMtg via the CDN and not the npm import might help, but when I try it I just get “ZoomMtg is undefined”.

Is there any workaround that I can implement from nextjs to have the client view?

---

<div class="post-metadata">

**Author:** ![j.schoenemeyer](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@j.schoenemeyer](https://devforum.zoom.us/u/j.schoenemeyer)\
**Post date:** [July 22, 2022, 3:19pm UTC](https://devforum.zoom.us/t/websdk-nextjs-integration/72665/4 "2022-07-22T15:19:41Z")

</div>

the error message is **not problematic** , the `webim.min.js.map` file is **only for debugging**  
if it’s not loaded, the debugger cannot show detail infos from minimized javascript files

the usual error at the time when zoom api is not functioning is:  
what method is used for signature

(1) JWT Signature (deprecated)  
(2) SDK JWT Signature

You can not mix both methods

Zoom Meeting SDK Sample React 2.5 uses SDK JWT Signature  
Zoom Meeting SDK Sample React 2.2 uses JWT Signature

Jürgen

---

<div class="post-metadata">

**Author:** ![Bianca](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/bianca/32/39645_2.png) [@Bianca](https://devforum.zoom.us/u/Bianca)\
**Post date:** [July 22, 2022, 4:02pm UTC](https://devforum.zoom.us/t/websdk-nextjs-integration/72665/5 "2022-07-22T16:02:54Z")

</div>

Great, So the webim.in.js is not a problem.

I’m using only SDK JWT signature with @zoomus/websdk 2.5.0

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [August 22, 2022, 2:03am UTC](https://devforum.zoom.us/t/websdk-nextjs-integration/72665/6 "2022-08-22T02:03:25Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.