Docs Developer Site
Developer Docs Next.XP next Next.js adapter

Next.js adapter

Contents

@enonic/nextjs-adapter is the front-end library at the center of Next.XP. It queries Guillotine, builds renderable page structures, maps XP descriptors to React views, processes URLs and rich text, and supplies Content Studio editing metadata.

This page documents @enonic/nextjs-adapter 6, the adapter major that defines Next.XP 6.

Installation

npm install @enonic/nextjs-adapter

Adapter 6 requires Node.js 24.15.0 or later, npm 10.9.2 or later, and React and React DOM 19. The documented Next.XP stack targets Next.js 16.4; see Starter dependencies for the complete front-end stack.

Supporting libraries

The adapter installs @enonic/react-components as a dependency and selects its compatible version. This separately versioned library provides React renderers and types for XP page structures and rich text.

Adapter 6 uses the library’s RichText renderer for links, images, and macros. The adapter’s own views render the standard Next.XP page tree and add its Content Studio annotations. The library’s generic page renderers also provide annotations when used directly.

For browser-side visual editing, the starter installs and initializes @enonic/page-editor separately. See Editing and preview for how it works with the annotated HTML.

Entry points

Import Use

@enonic/nextjs-adapter

Types, constants, registry, localization, URL utilities, and other exports safe in shared application code.

@enonic/nextjs-adapter/server

Guillotine and content fetching. Import only from server components, route handlers, or other server code.

@enonic/nextjs-adapter/client

React locale context for client components.

@enonic/nextjs-adapter/views/<ViewName>

One default export per built-in React view.

Basic use

import {validateData} from '@enonic/nextjs-adapter';
import {fetchContent} from '@enonic/nextjs-adapter/server';
import MainView from '@enonic/nextjs-adapter/views/MainView';

export default async function Page({params}) {
    const resolved = await params;
    const result = await fetchContent({
        locale: resolved.locale,
        contentPath: resolved.contentPath || []
    });

    validateData(result);
    return <MainView {...result}/>;
}

Register application mappings before the first fetch. See Components and views.

API sections

  • Common API — registry, localization, URL handling, types, and constants

  • Server API — content, Guillotine, and static-path fetching

  • Client API — client-side locale context

  • Views — built-in renderers and their roles

Contents

Contents