Implement AEM SPA in Next.JS

[madebymt]

I am working on a POC to migrate our AEM SPA application from create-react-app to Next to take advantage of the feature rich platform including SSR and SSG capabilities. I have my index and catch-all page routes written and have ported over the existing AEM App component and component library. The app loads when hitting all of the URLs properly, and I am able to see the network calls to the AEM server return the models successfully. However, I run into with rendering components the recommended AEM way ( App extends the AEM Page class and returns child pages and components which are generated under the hood by the AEM library based on the model). I am able to force components to render when I import them directly and render with the props found in the JSON, but this is not practical as that should be handled by the library).

One thing that I think may be the issue is the import-components which is dynamically imported on the Page index seems not work as intended.

const importComponents = dynamic(() => import('../src/components/import-components.js'))
This imports a script that imports other components.

Again, using the work around I mention above, I am able to import and render components but I shouldn't have to write my own framework for that, the AEM library should handle it. Has anyone else attempted to bring an AEM SPA into Next? If so, what did you do that worked? Any code samples would be appreciated as it doesn't seem that a lot of people are using AEM in this way.

Thanks!

[loganmurphy]

I'm having the same issues myself would love to see what others have done

[loganmurphy]

Here is an update with some more details on the issue, and what I have done in an attempt to resolve it:

Here is a link to a bare-bones repo next-aem-example I tried getting this up and running in codesandbox but there were some issues with the AEM libraries. There is no readme in the repo but steps are simple:

1. clone the repo and cd into the root dir
2. run npm install
3. run npm run dev
4. open the browser to http://localhost:300 (any path works, I have implemented a dynamic Page since AEM pages are dynamic, however we are hard-coding the server-side route/model for the purposes of this example so it'll work regardless of the URL path)

Caveats: There are a lot of workarounds here, I feel like AEM wasn't intended to be used with Next, which is why there is a tutorial for around 20 other CMSs on nextjs.org, but NOT AEM. I am also intermittently getting an error loading the page due to "self not defined" (somehow related to module imports, not sure how to resolve this other than reload the page when I see it, at least it isn't happening with a production build)

[keepthebyte]

You might want to look at the recent development from the AEM engineering team done in collaboration with folks at Vercel. The current work-in-progress code can be found here: https://github.com/duynguyen/aem-nextjs-template

[rohanrp]

I wrote a better version of the above repo here that will work with any nextjs version. https://github.com/rohanrp/aem-remote-ssr-example

[alexevladgabriel]

How do you handle custom templates for different pages, experience fragments?
Like using AEM as a full headless CMS, in NextJS you should have only imports for components and the rest to happen to build visually the page inside the AEM Editor.