AEM + Nextjs

[user06615]

Dear Adobe team,

Our team has implemented AEM as headless with Next.js, resulting in the loss of preview mode on AEM. In order to restore the authoring experience, we have been following the AEM + Next.js documentation. We have exposed an API that provides us with NEXT_DATA and another API for generating assets-manifest.json for client-side rendering. While we were successful in rendering server-side pages on AEM, we encountered an issue where the pages were stuck in an infinite loop.

Key Points:

1. We do not utilize responsive grid for data rendering.

2. We have our own method of forming and rendering component.

[EstebanBustamante · Accepted solution]

Hi,

Offering advice on what to do is a bit tricky since your NextJS project seems to be quite customized. Your best bet would be to stick to one of Adobe's supported authoring methods. If you're eager to use NextJS while enjoying a WYSIWYG authoring experience, the SPA Editor is your go-to. Keep in mind, though, that this isn't officially backed by Adobe; it's more of a React thing. Fortunately, NextJS being built on React means most features play well together.

Here you have some useful resources for NextJS and SPA: 

https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles...

https://github.com/duynguyen/aem-nextjs-template

Hope this helps