Enonic Nextxp Integration

Guides you through wiring up Next.js as a headless frontend for Enonic XP using the Next.XP framework. Covers the full stack: configuring the Enonic adapter with environment variables, mapping content types to React components via the ComponentRegistry, fetching data through Guillotine GraphQL queries, and enabling Content Studio's live preview mode with draft/master branch switching. Includes rich text handling with RichTextView, macro registration, and deployment to production with Enonic Cloud ingresses. Most useful when you're setting up a new Next.XP project or debugging why preview isn't working in Content Studio. Won't help with traditional server-side Enonic rendering or React4XP.

skills.sh installs: 488
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add webmaxru/enonic-agent-skills --skill enonic-nextxp-integration --agent claude-code

Installs into .claude/skills of the current project.

Files

Next.js + Enonic XP Headless Integration (Next.XP)

Procedures

Step 1: Identify the workspace integration surface

Inspect the workspace for Next.js entry points (next.config.*, package.json with next dependency), Enonic XP app markers (build.gradle with com.enonic.xp), or existing Next.XP adapter references (@enonic/nextjs-adapter).
Execute node scripts/find-nextxp-targets.mjs . to inventory Next.js projects, .env files with ENONIC_* variables, component mapping files (_mappings.ts), and Guillotine query files when a Node runtime is available.
If a Node runtime is unavailable, inspect package.json, .env, and src/components/_mappings.ts manually to identify the integration surface.
If the workspace contains both an Enonic XP app and a Next.js frontend, confirm which side the task targets before proceeding.
If the workspace is not a Next.js + Enonic XP project, stop and explain that this skill does not apply.