Docs Developer Site
Developer Docs Next.XP next

Next.js + Enonic XP = Next.XP

Contents

An integration between Next.js and Enonic XP for content-driven websites.

For a step-by-step introduction, follow the Next.js tutorial. This documentation is the product reference and can be read in any order.

About

With Next.XP, editors create structured content, assemble pages, and preview changes in Enonic Content Studio. Developers build the front-end using Next.js and React, mapping Enonic page components to React components.

Next.XP is Enonic’s recommended starting point for Next.js. Projects may adopt the complete stack, use individual software components, or build a custom integration directly against Enonic APIs.

What Next.XP provides

The integration provides:

  • Content retrieval from the Guillotine GraphQL API

  • Mapping between Enonic page components and React components

  • Content Studio preview and visual page editing of the Next.js front-end

  • Front-end revalidation when content is published

  • Processing of links and rich text from Enonic content

  • Support for localized content and front-end text

  • A starter project with the recommended application structure and configuration

How it fits together

A Next.XP solution has two running sides. Enonic XP manages content, schemas, and page composition, exposing content through the Guillotine GraphQL API. The Next.js application uses the adapter to fetch and render it, handling routing, caching, and front-end delivery.

Visitors access the Next.js front-end. Editors load the same front-end in Content Studio to work with draft content. The Next.XP app connects Content Studio to the front-end and notifies it when content is published.

Software stack

Next.XP 6 combines three software components—the starter, adapter, and Next.XP app—with the Enonic applications and platform below. The starter is optional when integrating the adapter into an existing Next.js application.

Software component Version Role

Next.js front-end

starter-nextjs

6

Recommended project template showing how to use the adapter in Next.js.

@enonic/nextjs-adapter

6

Fetches content from Guillotine, maps Enonic page components to React views, and handles rich text, preview, and localization.

Enonic back-end

Content Studio

6.1 or later

Editorial application for managing content, visually composing pages, and previewing the Next.js front-end.

Next.XP app

6

XP application for authenticated front-end preview in Content Studio and publication notifications for front-end revalidation.

Guillotine

9

GraphQL API installed in XP to expose content to the Next.js front-end.

Enonic XP

8.1 or later

Back-end platform managing content, schemas, and page composition.

See Starter dependencies for the Next.js and React versions, supporting libraries, and Node.js/npm requirements. For an existing Next.js project, see Adapter installation.

Versioning

The Next.XP product version follows the major version of @enonic/nextjs-adapter. The starter and the Next.XP app align to that major within the release window; their patch versions may differ. Supporting libraries follow their own release cycles.

See the release notes for what changed in each version, and the upgrade notes when moving between majors.

Using this reference

Start with Architecture for the request flows, or go directly to the adapter, starter, and Next.XP app references. Use Configuration to connect an existing application and Troubleshooting to diagnose common failures.

For broader platform concepts, see:

  • Guillotine for GraphQL schemas, queries, and API configuration

  • Enonic XP for content types, page components, and platform administration

  • Content Studio for content authoring and visual page editing

Contents

Contents