Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

AEM with Next JS

Avatar

Community Advisor

I am exploring things around AEM with Next JS architecture. I read multiple articles, but didn't find anything concrete. Please help me with your comments as PROS and CONS of using AEM with Next JS. Also, Is it good to consider Next JS where 80% of the component content is heavily loading from third party system and not from AEM authoring.

 

Thanks in advance !!! 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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



Esteban Bustamante

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

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



Esteban Bustamante