Level 2

Solved

Next.js 14 support for AEM

Forum|Forum|1 year ago
August 29, 2024
6 replies
4677 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by rohanpereiraedg

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

h_kataria

Community Advisor

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

Community Advisor

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

Community Advisor and Adobe Champion

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.

Esteban Bustamante

R

rohanpereiraedgAuthor

Level 2

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

Community Manager

@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!

Kautuk Sahni

R

rohanpereiraedgAuthor

Level 2

No a solution has not been found

R

rohanpereiraedgAuthor

Level 2

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.

R

rohanpereiraedgAuthorAccepted solution

Level 2

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