Issue Integrating React SDK with Next.js Application – 400 Error on Portal Load

[hemalathag8810 (hemalatha gatta)]

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…

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.
3. When navigating to 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

my-next-app.zip (1.48 MB)

[Kamil_Janeczek]

@hemalathag8810the 404 is a next.js routing error or call to Pega that is erroring out?

[Akhilesh.Madala (Akhilesh M)]

@Kamil Janeczek Thanks for reply.

After loading the React SDK in the browser, the path changes from http://localhost:3000/ to http://localhost:3000/portal or 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)correctly after running the command, but gives a 404 error when the path changes to “http://localhost:3050/portal” or “http://localhost:3050/embedded”. For reference, please look at the above images.

Thanks
Akhilesh

[gupts2 (Shipra Gupta)]

@hemalathag8810 Please confirm if you have NextJS routes added for /embedded or /portal in your application.

[hemalathag8810 (hemalatha gatta)]

@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)

[hemalathag8810 (hemalatha gatta)]

@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

[hemalathag8810 (hemalatha gatta)]

@gupts2 No, those folders are not present in the app directory.

Thanks,

Hemalatha

[hemalathag8810 (hemalatha gatta)]

@gupts2 ,@kamil Janeczek Following up to see if there’s any update when you have a moment.

Thanks
Hemalatha

[gupts2 (Shipra Gupta)]

@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?

[Kamil_Janeczek]

@hemalathag8810 checking with the team

[gupts2 (Shipra Gupta)]

@hemalathag8810 Can you please confirm if you have

portal/page.tsx under app directory for /portal

for /embedded embedded/page.tsx folder structure

[Akhilesh.Madala (Akhilesh M)]

@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 15

Thanks
Akhilesh

[gupts2 (Shipra Gupta)]

@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 for your use case and let us know if that works.

[hemalathag8810 (hemalatha gatta)]

@gupts2 Any update on this please.

Thanks,

Hemalatha

[hemalathag8810 (hemalatha gatta)]

@gupts2 Yes, we are using Next.js 16. Is there a specific version that supports this document?

Thanks,

Hemalatha