Need help regaring AEM with Remote SPA using Next JS

[kalyanchakravarthych]

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.

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

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

Thanks & Regards,

Kalyan

[EstebanBustamante]

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

[kalyanchakravarthych]

Hi,

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

Thanks & Regards,

Kalyan

[kalyanchakravarthych]

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.

Please help me on the same.

Thanks & Regards,

Kalyan

[chaudharynick]

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.