Expand my Community achievements bar.

Need help regaring AEM with Remote SPA using Next JS

Avatar

Level 3

Hi,

 

I have done the basic wknd-app setup AEM 6.5.19 with remote spa using next js. When i opened the home page as per the adobe documentation it is opening the page with parsys and i can add the components on the page.But when i see the console errors i am seeing many errors as per the attached screenshots.

 

kalyanchakravarthych_1-1716483564463.png

 

kalyanchakravarthych_2-1716483841019.png

 

kalyanchakravarthych_3-1716483882996.png

 

kalyanchakravarthych_0-1716483528121.png

kalyanchakravarthych_4-1716483944584.png

 

I am having the other issue when i click on adventures page even though if we have the page as below screenshot and getting the below error

 

kalyanchakravarthych_5-1716484063581.png

kalyanchakravarthych_6-1716484096377.png

Please help me and do the needful to resolve the issue that will be great.

 

Thanks & Regards,

Kalyan

4 Replies

Avatar

Community Advisor

Hi, 

You have a CORS issue, please check the other thread where I replied to you about how to fix this issue: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/parsys-is-not-displaying-i... and report back.

 

Most likely once the CORS issue is solved this will work fine.


Hope this helps



Esteban Bustamante

Hi,

 

Navigation is not working in remote spa in next js. Can you please help me on the same.

 

Thanks & Regards,

Kalyan

Hi @EstebanBustamante ,

 

One more observation is "_devMiddlewareManifest.json" and "_devPagesManifest.json" is loading from 4502 instead of 3000 due to this all the scripts are not loading. Because of this we are getting the issue. I dont know why it is loading from 4502.

 

kalyanchakravarthych_0-1717071785655.png

 

Please help me on the same.

 

Thanks & Regards,

Kalyan

Avatar

Level 2

Hi,

 

Most of the error in the screenshots seems to be HTML issues only that is for the nav that is coming at the wrong position. Can you please validate the HTML structure of the components used on the page?

Regarding _devPagesManifest.json it is showing 404 as its Next.js file which is created on runtime and is expected on the current domain only. Since the AEM and Next.js are on separate server it is showing the 404.

It is not possible to change the domain of this file since it is being handled and created by Next.js during runtime only.

 

 

regarding the second issue for the adventures page.

 

Routing is possible on the Next.js side only. You might need to modify next.js to support the routing and calling the respective JSON to load the page.