AEM with Next JS

Hi,

The advantage of Next.js, in short, is performance. The framework incorporates features like Server-side Rendering (SSR), Automatic Code Splitting, Incremental Page Generation, and Built-in Routing and API Support.

Additionally, Next.js is built on top of React, so there's no steep learning curve for Front-End developers already familiar with React. This enables a clear separation between Front-End and Back-End, leading to faster development cycles. Moreover, Next.js offers various Front-End techniques such as lazy loading and image optimization as part of its components.

The drawback of Next.js is that since you require SSR, it needs to be compiled into a Node server. This implies the necessity of utilizing an external infrastructure. There are services like Vercel, Netlify, etc., which offer this functionality, and setting it up is relatively straightforward. However, it does add an extra element to maintain and incur costs.

Regarding integration with AEM, several approaches have been attempted, but not all are perfect solutions. The SPA Editor, for instance, requires a SPA architecture, which may not suit all requirements. The mapping of components and the learning curve associated with the SPA Editor can be challenging.

The Universal Editor, recently released, could be a preferred solution, although it's still relatively new.

Another option involves creating a custom architecture where Next.js is loaded and executed via client libraries. This approach has been adopted by proficient Front-End developers and can offer flexibility. You can find an example of this pattern with React: https://www.youtube.com/watch?v=Byfs7ptHhiU

Hope this helps