CORS 403 on Messenger widget in Next.js SSR

Hey everyone, I’ve run into a really strange issue with the Genesys Web Messaging SDK in a React Next.js app.

The widget fails to load during SSR with a CORS 403 error when initializing the web messaging session.

1. Verified the OAuth token is valid.
2. Checked CORS settings in Admin.

Is there a specific header missing for Next.js? Need the correct SDK initialization snippet.

The documentation actually says, “Server-side rendering requires client-side hydration for browser-specific APIs.” You cannot call visitor endpoints during SSR. Use useEffect to initialize the SDK only on the client.

useEffect(() => {
 const init = async () => {
 await messengerSDK.init({ appId: 'YOUR_ID' });
 };
 init();
}, []);