Next.js setup

Create the backend route

Pagiera exposes one catch-all handler for editor and runtime operations. Create src/app/api/pagiera/[...path]/route.ts:

import { createPagieraRouteHandlers, pagieraConfigFromEnv } from "pagiera/server";

export const maxDuration = 120;
export const dynamic = "force-dynamic";

const handlers = createPagieraRouteHandlers(pagieraConfigFromEnv());
export const { GET, POST, PUT, PATCH, DELETE } = handlers;

Protect the route

Pagiera does not choose an authentication provider for you. Run your normal session or role check before forwarding editor requests. Public page rendering can remain public; editing and publishing endpoints should not.

Load the editor bootstrap

Fetch the initial document on the server. This keeps the first render deterministic and avoids a loading-only editor shell.

// src/lib/editor-bootstrap.ts
import { getPagieraServer, pagieraConfigFromEnv } from "pagiera/server";

export async function editorBootstrap(pageId?: string) {
  const server = await getPagieraServer(pagieraConfigFromEnv());
  const bootstrap = await server.getEditorBootstrap(pageId);
  if (!bootstrap) throw new Error("Editor page not found");
  return bootstrap;
}

Mount the studio

Create a server page that performs the permission check and loads the bootstrap. Pass that result to a small client wrapper containing the interactive editor.

Keep the boundary explicit

• Server component: authentication, route parameters and bootstrap loading.
• Client component: studio interactions and in-editor navigation.
• API route: saving, previewing, publishing and asset operations.

Run the health check

Start Next.js and visit /api/pagiera/health. Resolve PostgreSQL or Redis errors before opening the editor. If AI is configured, confirm that the selected OpenRouter model is available.