Docs Developer Site
Developer Docs Next.XP next Concepts Editing and preview

Editing and preview

Contents

Next.XP lets Content Studio display the Next.js front end while editors work with draft content. The Next.XP app resolves the Next.js URL of the selected content, and Content Studio loads it directly from Next.js.

Preview handshake

  1. Content Studio requests preview of content inside a site.

  2. The app selects a named front-end URL and shared secret.

  3. The app fetches URL mappings from the front end’s /api/mappings, resolves the Next.js URL of the content, and adds an xp parameter with the XP project, encrypted with the secret.

  4. Content Studio loads the URL. The Next.js proxy sends the request through /api/preview, which validates the xp parameter, enables Next.js Draft Mode, and redirects to the content path without it.

  5. The adapter detects Draft Mode, forwards the XP session to Guillotine, and queries the draft branch.

/api/preview also records the Next.js build in a cookie, so the proxy enables Draft Mode again after the build changes.

Authentication and permissions

Preview is available only through an authenticated Enonic Content Studio session. The editor’s browser loads the preview from Next.js, and the starter’s proxy passes XP’s JSESSIONID cookie, when the browser sends it, to the adapter. The adapter then forwards that session as the JSESSIONID cookie on its Guillotine request. Browsers send the cookie only when Next.js and XP share a host name.

When the session is forwarded, Guillotine evaluates the draft query as the same Enonic user who opened the preview. XP’s normal content permissions remain in effect: the rendered result contains only content that user is allowed to access. The front end does not query draft content through a privileged service account or bypass XP access controls.

The shared API token and the Next.js Draft Mode cookie have different purposes. The token authenticates calls between the Next.XP app and the protected front-end endpoints, while the Draft Mode cookie selects draft rendering. Neither replaces the editor’s XP identity or grants access to content by itself.

Render modes

Mode Behavior

next

Direct Next.js access. Uses published content and omits editing markup.

edit

Content Studio page editing. Uses draft content and adds component and region attributes.

preview or inline

Content Studio preview contexts. Uses draft content in Next.js draft mode.

live

Published XP context.

Editing annotations

Content Studio recognizes rendered page structures through data-portal-component-type and data-portal-region attributes. Adapter adds these attributes through its base component and region views when the render mode is edit.

The supporting @enonic/react-components package also implements these annotations in its generic component wrapper and region renderers. Next.XP currently uses that package directly for rich-text rendering, while the adapter supplies the page-tree annotations in the standard integration.

Page editor integration

@enonic/page-editor 2 runs in the browser and connects the rendered Next.js page to Content Studio’s visual editor. The starter installs this package directly, while @enonic/react-components is installed through @enonic/nextjs-adapter. Both supporting libraries version independently of Next.XP.

The starter’s PageEditorScript client component initializes the library with init({editMode: renderMode === RENDER_MODE.EDIT}). In edit mode, the library communicates with Content Studio and requests component markup through editor events. In inline preview mode, it reports link clicks to Content Studio.

The adapter supplies component and region annotations in the rendered HTML; the page editor supplies the browser-side editing behavior. See the Page Editor reference for its API and communication protocol.

Component refresh

Content Studio can request one component instead of refreshing the complete page. The adapter restricts the page tree to that component, and MainView delegates to SingleComponent. The starter wraps the response in a marker that can be extracted safely.

PageEditorScript subscribes to the page editor’s component-load-request event, fetches the component response from Next.js, extracts the marked HTML, and passes it to renderComponent(). It also uses the library’s loading and error states while handling the request.

Security

The value of ENONIC_API_TOKEN env var in Next.js must match the secret configured for the selected front end in com.enonic.app.nextxp.cfg Enonic XP config file. Do not expose it through a NEXT_PUBLIC_ variable. Restrict the preview endpoints to HTTPS in production.

See Preview live view extension for the XP-side implementation, App configuration, and Starter configuration.

Contents

Contents