Enterprise Headless CMS with AEM 6.5 and Next.js

This article explains how to build a real-world enterprise level CMS using Adobe Experience Manager (AEM) 6.5 and Next.js.

A Headless CMS separates the backend content repository from the frontend presentation layer.

Instead of rendering pages inside the CMS, the content is exposed through APIs and consumed by external applications.

Adobe Experience Manager supports Headless architecture through:

• Content Fragment Models
• GraphQL APIs
• REST APIs
• Digital Asset Management (DAM)

The content is created and managed inside AEM. The same content is then fetched using GraphQL and rendered within a Next.js application.

From the frontend itself, we are able to edit content inline without using the traditional AEM Sites editor.

Once the content is updated, it is saved back into AEM, keeping AEM as the single source of truth.

This flow shows how a real enterprise headless project works today.

Project Workflow:

Prerequisites:

• AEM 6.5
• AEM Service Pack 18 or higher (required for Headless GraphQL support)
• Node.js version 18 or above
• Basic knowledge of React or Next.js
• Basic understanding of Headless CMS concepts

AEM Backend Setup:

The first step is to create a Content Fragment Model.

Navigate to Tools → Assets → Content Fragment Models.

There will be various predefined folders. Select one according to your preference. In this project, the global folder is used.

Create a model inside the global folder and provide a title and description for your project.

Once the model is created, it will appear with an Enabled tag highlighted in green.

However, the model still requires fields to define the structure of the content.

Hover over the model and click the Edit (pencil) icon to open the model editor.

Add the following required fields:

• Title
• Subtitle
• CTA Text
• CTA Link

Each field represents a structured piece of content that will be consumed by the frontend.

After defining the fields, save the model.

Once the model is ready, the next step is to create content using this model.

Navigate to Assets → Files.

In Headless AEM, we typically navigate through Assets → Files because this is where digital assets are stored and managed inside AEM’s Digital Asset Manager (DAM).

These assets can then be used by content fragments or exposed through APIs and delivered to frontend applications such as Next.js.

The content is stored in the repository path:

/content/dam

Create a new folder which will be used as the main folder for the entire AEM Headless project.

Most Important Step:

To ensure the folder can use the correct Content Fragment Model, we need to configure the model path in the folder settings.

This allows AEM to recognize the model and display the appropriate layout when creating content fragments.

Open the folder and select Folder Properties.

Next, navigate to the Cloud Services tab.

Set the configuration path to:

/conf/global

Click Save & Close.

This step enables the folder to access all Content Fragment Models available under the global configuration.

If this configuration is not set, AEM will only display the default fragment models provided by the system.

Next, inside the folder create a Content Fragment and select the model created earlier.

Fill in the required fields for the content fragment. These fields can be managed using the "i" (information) icon.

Once the fields are completed, save the content.

Expose Content using GraphQL:

Navigate to Tools → Assets → GraphQL.

Create a new GraphQL endpoint for your project and save it.

Copy the endpoint URL which will be used in the frontend application.

To verify the content, open the GraphiQL Explorer:

http://localhost:4502/aem/graphiql.html

Select the endpoint and run the following query:

query {
  faunaHeroList {
    items {
      title
      subtitle
      ctaText
      ctaLink
    }
  }
}

If the query returns data successfully, it confirms that AEM is functioning correctly.

Frontend Setup with Next.js:

Next.js is used to build the frontend presentation layer.

Instead of building the UI from scratch, a prebuilt Next.js template was used and customized to integrate with AEM.

The static content was replaced with dynamic data fetched from AEM using GraphQL.

Modified files include:

1. lib/aem.ts

• Connects Next.js to AEM
• Calls the AEM GraphQL endpoint
• Fetches hero section content
• Returns structured data to frontend components

2. app/api/aem/hero/route.ts

• Handles saving data back to AEM
• Receives POST requests from the frontend
• Updates the AEM content fragment
• Keeps AEM as the single source of truth

3. components/editor/inlineEditableText.tsx

Features include:

• Double-click to edit text
• Press Enter to save
• No forms required
• No page reload
• Turns any text into an inline editor

4. app/editor/page.tsx

• This is the editor page
• Fetches content from AEM
• Renders the page in editor mode
• Only this page allows inline editing

Run the application locally using:

npm run dev

This starts the development server.

Open the generated local URL in your browser.

Important:

Adding /editor at the end of the URL enables editor mode.

Example:

Main website → http://localhost:3000

Editor page → http://localhost:3000/editor

Double-click the title or subtitle to edit the content.

Press Enter to save changes.

The content will be saved back to AEM Content Fragment.

Returning to the main page will display the updated content, confirming the headless integration.

Conclusion:

This project demonstrates how AEM can operate purely as a Headless CMS while Next.js manages the entire frontend experience.

Using Content Fragment Models, GraphQL APIs, and REST-based updates, we can build a modern architecture that supports structured content management and dynamic frontend editing.

This approach is increasingly used in enterprise environments where teams want the reliability of AEM combined with the flexibility of modern JavaScript frameworks.

Reference:

For the complete source code and implementation, explore the GitHub repository below:

https://github.com/vanditshah20/aem-headless-nextjs-site

This repository contains the full AEM 6.5 and Next.js integration example, including GraphQL queries, API routes, and frontend components used in the headless CMS project.

Written by

Vandit Shah