Adobe Experience Manager and Next.js
In recent years, Next.js has experienced a surge in popularity among developers and organizations thanks to its compelling features and capabilities. In this article, we will check the available options for integrating Next.js with your Adobe Experience Manager (AEM) instance.
What is Next.js?
Here are some Next.js key features:
Server-Side Rendering (SSR)
Static Site Generation (SSG)
Incremental Site Regeneration (ISG)
Automatic Code Splitting
Fast refresh and builds
Automatic lazy loading
What AEM offers while working with Next.js?
With these JS libraries, you can achieve the same models that are supported so far by an AEM SPA:
- Headless SPA: Your SPA app only consumes the "Data" from AEM through Content Services or GraphQL
- Embedded SPA: Your SPA app is embedded within your AEM project (AEM SPA Editor 1.0)
- Hybrid SPA (Remote SPA/AEM SPA Editor 2.0): Your SPA app is external to AEM, but keeps "editable areas" within AEM.
What about SSR?
Server Side Rendering (SSR) is one of the "big" advantages of using a framework such as Next.js. In a nutshell, SSR renders a page on the server side to send a fully rendered page to the client. That way, SSR improves page load times, enhances search engine visibility, provides better support for low-powered devices, optimizes social media sharing, and ensures a more inclusive web experience.
If you are planning to use Next.js along with AEM, please consider the following considerations:
The SPA Editor has some documented limitations that need to be considered.
The SPA Editor SDK is only available for Angular and React. Although the React libraries from this SDK work fine with Next.js, the official support is not inclined towards Next.js but React instead.
The official version supported for Next.js is 12.2
If you are planning to use a Hybrid SPA Model (Remote SPA), Adobe provides a relatively new AEM Remote template for Next.js. Although it is a good start, it is still under development and lacks some functionality.
SSR introduces additional complexity to the development process, as you need to consider both server-side and client-side rendering aspects. This complexity can impact development time, debugging, and overall project maintenance.
Next.js emerges as a robust and expanding framework that harnesses the power of server-side rendering (SSR), static site generation (SSG), and incremental site regeneration (ISG) to optimize website performance.
With Adobe Experience Manager's support for React, integrating Next.js into a project becomes feasible, albeit with certain limitations inherited from the SPA SDK. The Next.js template serves as an excellent foundation for implementing a remote SPA model, although it's essential to acknowledge the potential challenges that may lie ahead in uncharted territory. Nonetheless, the possibilities and benefits that Next.js offers make it an exciting option to consider for enhancing web development with AEM.
Learn more about the capabilities of AEM by reading: First Impressions of Adobe Experience Manager's Next-Gen Editing Capabilities.