# Issue Integrating React SDK with Next.js Application – 400 Error on Portal Load **URL:** \ **Category:** User Experience\ **Created:** [December 16, 2025, 6:07am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391 "2025-12-16T06:07:42Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![hemalathag8810](https://avatars.discourse-cdn.com/v4/letter/h/90db22/32.png) [@hemalathag8810](https://forums.pega.com/u/hemalathag8810)\ **Post date:** [December 16, 2025, 6:07am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/1 "2025-12-16T06:07:42Z")
**Hi Team,** We are currently integrating the React SDK into a Next.js application and have followed the steps outlined in the official documentation: [https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/integrating-react-sdk-n…](https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/integrating-react-sdk-n%E2%80%A6) **Details:** 1. The integration was performed using **version 25**. 2. After completing the setup and replacing the required files and code, the application starts successfully using `npm run start` and launches at [http://localhost:3000](http://localhost:3000). 3. When navigating to [https://localhost:3000/portal](https://localhost:3000/portal), we encounter a **400 Bad Request** error. - No API calls are visible in the browser’s Network tab. 4. The project folder has been attached for your review. Thanks, Hemalatha ![Screenshot 2025-12-16 at 11.28.53 AM.jpg](https://pega1.discourse-cdn.com/pega/original/3X/d/6/d650e163c4b77a3445a96a752068b472d4b28c33.jpeg) ![Screenshot 2025-12-16 at 11.28.37 AM.jpg](https://pega1.discourse-cdn.com/pega/original/2X/a/aac8b024be8a99683cfd6964b8e439e240fa9070.jpeg) ![Screenshot 2025-12-16 at 11.27.38 AM.jpg](https://pega1.discourse-cdn.com/pega/original/2X/d/ddd12696bdd2d57020c775b06bdedb51d1abc735.jpeg) [my-next-app.zip](https://forums.pega.com/uploads/short-url/leHOwBZMDySTGkNkmjxigtj3Vgq.zip) (1.48 MB) ---
**Author:** ![KamilJaneczek](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/kamiljaneczek/32/19116_2.png) [@KamilJaneczek](https://forums.pega.com/u/KamilJaneczek)\ **Post date:** [December 16, 2025, 8:11am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/2 "2025-12-16T08:11:37Z")
@hemalathag8810the 404 is a next.js routing error or call to Pega that is erroring out? ---
**Author:** ![Akhilesh.Madala](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/akhilesh.madala/32/22455_2.png) [@Akhilesh.Madala](https://forums.pega.com/u/Akhilesh.Madala)\ **Post date:** [December 16, 2025, 9:34am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/3 "2025-12-16T09:34:34Z")
@Kamil Janeczek Thanks for reply. After loading the React SDK in the browser, the path changes from [http://localhost:3000/](http://localhost:3000/) to [http://localhost:3000/portal](http://localhost:3000/portal) or [http://localhost:3000/embedded](http://localhost:3000/embedded), displaying the medico application based on our OAuth. The same process works for the Next.js application? Which launches localhost ([http://localhost:3050](http://localhost:3000/embedded))correctly after running the command, but gives a 404 error when the path changes to “[http://localhost:3050/portal](http://localhost:3000/portal)” or “[http://localhost:3050/embedded](http://localhost:3000/embedded)”. For reference, please look at the above images. Thanks Akhilesh ---
**Author:** ![gupts2](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/gupts2/32/4276_2.png) [@gupts2](https://forums.pega.com/u/gupts2)\ **Post date:** [December 16, 2025, 1:20pm UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/4 "2025-12-16T13:20:00Z")
@hemalathag8810 Please confirm if you have NextJS routes added for /embedded or /portal in your application. ---
**Author:** ![hemalathag8810](https://avatars.discourse-cdn.com/v4/letter/h/90db22/32.png) [@hemalathag8810](https://forums.pega.com/u/hemalathag8810)\ **Post date:** [December 17, 2025, 10:20am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/5 "2025-12-17T10:20:26Z")
@gupts2 We are using **Next.js version 16** , in which the **default routing system** is available. While setting up the **Next.js SDK** , the framework provides multiple configuration options. We have tried all the available options, but the same issue continues to occur. We have attached the following screenshots for reference: 1. Next.js CLI command 2. Successful Next.js installation 3. `package.json` 4. `npm run build` output 5. Network tab (issue observed when navigating to `/portal`) ![Next-CMD-1.png](https://pega1.discourse-cdn.com/pega/original/3X/8/e/8ee93abcc306f1c6e0050de6cd5e32b35070c669.png) ![InstallSuccess.png](https://pega1.discourse-cdn.com/pega/original/3X/c/6/c67232be90352b82e0e2f6d1fd6c52ed9b060b99.png) ![PackageJson.png](https://pega1.discourse-cdn.com/pega/original/2X/9/9dc95d4a13088b74725a5995b9a2d8b390f07f3f.png) ![RunBuild.png](https://pega1.discourse-cdn.com/pega/original/3X/5/2/526c649c11133dd17871b4287bcc635996175b99.png) ![NetworkPortalError.png](https://pega1.discourse-cdn.com/pega/original/3X/8/e/8eee1e8925afbd4cb56a00019b9d7f333f233607.png) ---
**Author:** ![hemalathag8810](https://avatars.discourse-cdn.com/v4/letter/h/90db22/32.png) [@hemalathag8810](https://forums.pega.com/u/hemalathag8810)\ **Post date:** [January 5, 2026, 6:13am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/6 "2026-01-05T06:13:54Z")
@Kamil Janeczek, @gupts2, Is there any update on this? Or else, is there a specific document or video available? Which version of Next.js is required to set up? Thanks, Hemaltha ---
**Author:** ![hemalathag8810](https://avatars.discourse-cdn.com/v4/letter/h/90db22/32.png) [@hemalathag8810](https://forums.pega.com/u/hemalathag8810)\ **Post date:** [January 6, 2026, 4:19am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/7 "2026-01-06T04:19:20Z")
@gupts2 No, those folders are not present in the app directory. Thanks, Hemalatha ---
**Author:** ![hemalathag8810](https://avatars.discourse-cdn.com/v4/letter/h/90db22/32.png) [@hemalathag8810](https://forums.pega.com/u/hemalathag8810)\ **Post date:** [January 21, 2026, 12:42pm UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/8 "2026-01-21T12:42:55Z")
@gupts2 ,@kamil Janeczek Following up to see if there’s any update when you have a moment. Thanks Hemalatha ---
**Author:** ![gupts2](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/gupts2/32/4276_2.png) [@gupts2](https://forums.pega.com/u/gupts2)\ **Post date:** [January 27, 2026, 10:33am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/9 "2026-01-27T10:33:12Z")
@hemalathag8810 There is an issue with NextJS 16 we are seeing locally hen trying your issues. Engineer is working on the prototype with Next JS 16 and will share the expert circle post here. Also can you confirm if you are using Next JS 16? ---
**Author:** ![KamilJaneczek](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/kamiljaneczek/32/19116_2.png) [@KamilJaneczek](https://forums.pega.com/u/KamilJaneczek)\ **Post date:** [January 5, 2026, 8:28am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/10 "2026-01-05T08:28:06Z")
@hemalathag8810 checking with the team ---
**Author:** ![gupts2](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/gupts2/32/4276_2.png) [@gupts2](https://forums.pega.com/u/gupts2)\ **Post date:** [January 5, 2026, 2:30pm UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/11 "2026-01-05T14:30:38Z")
@hemalathag8810 Can you please confirm if you have portal/page.tsx under app directory for /portal for /embedded embedded/page.tsx folder structure ---
**Author:** ![Akhilesh.Madala](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/akhilesh.madala/32/22455_2.png) [@Akhilesh.Madala](https://forums.pega.com/u/Akhilesh.Madala)\ **Post date:** [January 6, 2026, 5:09am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/12 "2026-01-06T05:09:58Z")
@gupts2 Can you please share the Next.js folder structure for integrating the Pega React SDK? Are we looking for portal/page.tsx under the app directory for /portal, and embedded/page.tsx for /embedded? When setting up Next.js, we don’t get these pages in the folder structure. Do we need to create them manually? If yes, what code should be inside? **Version 16** ![Version 16 folder structure.png](https://pega1.discourse-cdn.com/pega/original/2X/8/860b8e131db9ad345dc5a7da6b4466fdabe90154.png) **Version 15** ![Folder structure.png](https://pega1.discourse-cdn.com/pega/original/3X/c/0/c0e2010e774bdb603005288ab43d1a413b13a072.png) Thanks Akhilesh ---
**Author:** ![gupts2](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/gupts2/32/4276_2.png) [@gupts2](https://forums.pega.com/u/gupts2)\ **Post date:** [January 28, 2026, 5:06am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/13 "2026-01-28T05:06:17Z")
@hemalathag8810 New article was posted by Siva after trying out Next JS 16. While we work on publishing this on our docs site , please refer [How to Guide: Integrating Pega Constellation React SDK with Next.js 16 | Pega Community](https://community.pega.com/conversations/user-experience/how-to-guide%3A-integrating-pega-constellation-react-sdk-with-next.js-16) for your use case and let us know if that works. ---
**Author:** ![hemalathag8810](https://avatars.discourse-cdn.com/v4/letter/h/90db22/32.png) [@hemalathag8810](https://forums.pega.com/u/hemalathag8810)\ **Post date:** [January 8, 2026, 6:52am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/14 "2026-01-08T06:52:17Z")
@gupts2 Any update on this please. Thanks, Hemalatha ---
**Author:** ![hemalathag8810](https://avatars.discourse-cdn.com/v4/letter/h/90db22/32.png) [@hemalathag8810](https://forums.pega.com/u/hemalathag8810)\ **Post date:** [January 28, 2026, 4:47am UTC](https://forums.pega.com/t/issue-integrating-react-sdk-with-next-js-application-400-error-on-portal-load/10391/15 "2026-01-28T04:47:19Z")
@gupts2 Yes, we are using Next.js 16. Is there a specific version that supports this document? Thanks, Hemalatha