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?

In order to grasp the concept of Next.js, it is essential first to highlight the significance of React. The highly popular and widely used JavaScript library for UI development, lays the foundation for a number of frameworks.

Next.js, a JavaScript framework built on top of React, simplifies the configuration of previously challenging aspects in React. It provides an easier way to handle these complexities, making React development more streamlined and efficient.

Here are some Next.js key features:

• Server-Side Rendering (SSR)

• Static Site Generation (SSG)

• Incremental Site Regeneration (ISG)

• Automatic Code Splitting

• File-Based Routing

• Typescript support

• Fast refresh and builds

• Automatic lazy loading

What AEM offers while working with Next.js?

The integration between AEM and Next.js is primarily facilitated through the reuse of React-related features developed by Adobe. This is exemplified by the SPA Editor JS SDK, a collection of JavaScript libraries provided by Adobe specifically designed to enable editable content for Single Page Application (SPA) pages within AEM (AEM SPA Editor).

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.

While Adobe suggests I/O runtime for server-side rendering (SSR), an alternative approach is to leverage Next.js and Vercel to deploy your own JavaScript server. Although various SaaS vendors can be used for SSR, Vercel is the preferred and recommended option for deploying Next.js applications due to its simplicity, speed, and seamless deployment process, allowing you to build and launch your app within minutes.

Caveats

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.

Wrapping Up

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.