Next.js 14 support for AEM

[rohanpereiraedg]

I have been exploring the template on https://github.com/adobe/aem-headless-app-templates for Next.js integration with AEM. This only seems to work with Next.JS 12 and not the latest Next.js. AEM remotepagenext resource type seems to hit two endpoints in Next.js. One to get the next data props and the other to get the asset manifiest. 

Next JS 14 doesnt seem to have the next data dom element especially if you use the new app router. Also the asset manifest generated by WebpackAssetsManifest plugin does not output any meaningful entrypoint files like main.js

What is the recommended way to integrate with AEM? Next.js 12 is no longer receiving official security updates and that is a big no to downgrade.

[h_kataria]

You can refer this tutorial as well This is sample app built using graphql. We have used similar setup in one of the projects.

[TarunKumar]

Hi @rohanpereiraedg ,

I can focus on below mentioned points while integrating AEM with nextJs.

What is the AEM archetype you are using, I'd suggest to use anything above 41 and also while creating AEM project remove the frontend module because we don’t need the frontend module as we are using RemoteSPA.
While you have been doing this can you also check if you mapping is correct with AEM components.

MapTo(`${NEXT_PUBLIC_AEM_SITE}/components/samplecomponent`)(AEMSampleComponent)

This has to be done in your import-components.js file of next js app.

-Tarun

[EstebanBustamante]

Hi,

Unfortunately, it's best to stick with the version recommended by Adobe, such as Next.js 12. I previously upgraded to Next.js 13, but it involved some complex adjustments and I don't recall if this fully worked. If you encounter issues, I recommend logging them on the GitHub repository for further guidance https://github.com/adobe/aem-headless-app-templates/issues/14 .

Hope this helps.

[rohanpereiraedg]

I have followed the tutorials but the main issue is the asset manifest file is not loading anything meaningful. I have tried both the page router and app router

[kautuk_sahni]

@rohanpereiraedg Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[rohanpereiraedg]

No a solution has not been found

[rohanpereiraedg]

I got Next JS 14 working with AEM after I downgraded the app router to use the pages directory. Not a great solution as so many great features exist in the app router but looks like that is the only supported workaround. It could be that pages directory routing is more CSR heavy which allows the remote spa app to act like a client side application.

[rohanpereiraedg · Accepted solution]

I have created a better solution for AEM next JS here. It still needs a bit of tidying up but it is more scalable and native than the current official solution

https://github.com/rohanrp/aem-remote-ssr-example

[rohanpereiraedg]

There is also a follow up article

https://www.linkedin.com/pulse/approaches-integrating-adobe-experience-manager-aem-front-pereira-rbm...