enonic-nextxp-integration

Connect Next.js apps to Enonic XP using the Next.XP framework.

1|Updated Mar 28, 2026
One-click install
npx skills add https://github.com/webmaxru/enonic-agent-skills --skill enonic-nextxp-integration
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: enonic-nextxp-integration
Source: https://github.com/webmaxru/enonic-agent-skills/tree/main/skills/enonic-nextxp-integration
Command: npx skills add https://github.com/webmaxru/enonic-agent-skills --skill enonic-nextxp-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This guide helps teams connect Next.js frontends to Enonic XP via the Next.XP framework, enabling streamlined setup, routing, and preview workflows.

Core Features & Use Cases

  • Adapter configuration: set up and validate the Next.js adapter to communicate with Enonic XP and manage environment variables.
  • Content type mapping: register content types to React views, queries, and pages via a central component registry.
  • Guillotine data access: implement GraphQL queries with type introspection to fetch content data for rendering.
  • Content Studio preview: enable and troubleshoot preview mode and draft/master branching for editorial workflows.
  • End-to-end workflow: ensure consistent routing, assets, and URL handling across preview and production.

Quick Start

Scaffold the Next.XP project from the official template and wire your .env variables to enable preview and Guillotine endpoints.

Frequently Asked Questions about enonic-nextxp-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate a Next.js frontend with Enonic XP for headless content delivery?

To integrate Next.js with Enonic XP, you use the Next.XP framework adapter to connect your frontend, verify environment variables, and map content types to React components for headless content delivery.

What is the best way to map Enonic XP content types to Next.js components?

Mapping Enonic XP content types to Next.js components is handled through a central component registry in the Next.XP framework, linking specific content types directly to their corresponding React views, queries, and pages.

How do I fetch content data from Enonic XP using GraphQL in a Next.js app?

You fetch content data from Enonic XP by implementing Guillotine GraphQL queries with type introspection, verifying the Guillotine endpoints to ensure reliable data retrieval for rendering your Next.js application.

Why is Content Studio preview not working with my Next.js headless setup?

Content Studio preview issues in a Next.js headless setup often stem from incorrect adapter versions or environment variables; troubleshooting involves verifying draft/master branching and your Next.XP adapter configuration.

Does the Next.XP adapter support draft and master branching for editorial workflows?

Yes, the Next.XP adapter supports draft and master branching for editorial workflows by enabling and troubleshooting Content Studio preview mode alongside consistent routing and URL handling across branches.

What environment variables do I need to configure for a Next.js and Enonic XP integration?

Configuring Next.js and Enonic XP integration requires wiring your .env variables to enable preview mode and Guillotine endpoints, verifying adapter versions to ensure a reliable setup and operation.