AEM with Next Js as non SPA

[sanjayjgaonkar]

I am new to AEM, has anyone able to make Next js work with AEM as an non-SPA? The closest I could find is making React Habitat can be used as non SPA with AEM.

[kautuk_sahni]

@sanjayjgaonkar 

Yes, it is possible to use Next.js with AEM as a non-SPA (Single Page Application). This can be achieved by utilizing React Habitat, which is a framework for building non-SPA React applications. When using React Habitat with AEM, you can leverage AEM's content management capabilities while still enjoying the benefits of Next.js, such as server-side rendering and static site generation.

To integrate React Habitat with AEM, you can follow these steps:

1. Create a React Habitat application: Set up a basic React Habitat project using the Create React Habitat CLI or your preferred method.

2. Develop your Next.js components: Build your Next.js components using the Next.js framework. These components will handle the rendering of your application's UI.

3. Integrate AEM with React Habitat: Utilize the React Habitat AEM plugin to connect your React Habitat application with AEM. This plugin allows you to fetch content from AEM and render it within your Next.js components.

4. Configure AEM: Set up AEM to serve your Next.js application. This involves configuring AEM's routing and content delivery mechanisms to handle requests for your Next.js pages.

By following these steps, you can successfully integrate React Habitat with AEM and create a non-SPA application that benefits from both platforms.