Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

AEM remote spa with nextjs navigation issue

Avatar

Level 3

Hi,

 

When iam navigating from home page to adventures using in remote spa with next js, adventures.json in AEM is not loading but in NextJS server it is loading. It should load from localhost:3000 instead of localhost:4502. Please find the below screenshot for your reference.

 

http://localhost:4502/_next/data/development/adventures.json

 

In AEM it is loading like this:

 

kalyanchakravarthych_0-1717788918272.png

 

kalyanchakravarthych_3-1717789157244.png

 

 

In NextJS server it is loading like this

kalyanchakravarthych_1-1717789017669.png

 

kalyanchakravarthych_2-1717789061207.png

 

The UI call is initiating from router.js but in AEM it is not happening. Can anyone help me with the steps to proceed on the same.

 

 

 

 

Thanks & Regards,

Kalyan

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

3 Replies

Avatar

Community Advisor

Hi @kalyanchakravarthych ,

Based on the screenshots you provided, it seems like there is an issue with the URL used to fetch the `adventures.json` file when navigating from the home page to adventures in your remote SPA with Next.js.

In the AEM screenshot, the URL used to fetch the `adventures.json` file is `http://localhost:4502/_next/data/development/adventures.json`, which is the AEM instance URL.

In the Next.js server screenshot, the URL used to fetch the `adventures.json` file is `http://localhost:3000/_next/data/development/adventures.json`, which is the Next.js server URL.

To resolve this issue, you need to ensure that the URL used to fetch the `adventures.json` file is the correct URL of your Next.js server instead of the AEM instance URL.

Here are the steps to proceed:

1. In your Next.js project, locate the code where the `adventures.json` file is fetched. It could be in a component or a data fetching function.
2. Look for the code that specifies the URL for fetching the `adventures.json` file.
3. Update the URL to use the correct URL of your Next.js server (`http://localhost:3000`).
4. Save the changes and restart your Next.js server.
5. Test the navigation from the home page to adventures again and verify that the `adventures.json` file is now being fetched from the correct URL.

By updating the URL to use the correct Next.js server URL, the `adventures.json` file should be loaded correctly in your remote SPA with Next.js.

Hi,

 

I tried by debugging the code and I could not able to get where it is forming the json. In the code it is expecting assetPrefix which is reading from JSON and if it is not found then it is picking the url host. Due to this failing and getting error. Can you help where we are forming the json and also help me how we can resolve this issue. 

 

Thanks & Regards,

kalyan

Hi,

 

There are 2 approaches to solve this as below.

  1. Add the http://localhost:3000/<page_name> on each we create.
  2. In the next js config file add one more header under source: '/_next/:path*' as below.

       {
key: 'x-nextjs-data',
value: 'http://localhost:3000'
}

 

Thanks & Regards,

Kalyan