Add a visual page editor to a Next.js application

1Install the package

Pagiera ships the editor, the runtime and the server handlers in a single package. Node.js 20+, React 18.3+ and the Next.js App Router are required for the full-stack integration.

bun add pagiera

2Configure the services

Create .env.local with a PostgreSQL connection and a Redis connection. An OpenRouter key is only needed if you want AI generation; everything else works without it.

PAGIERA_POSTGRES_URL=postgresql://postgres:postgres@localhost:5432/pagiera
PAGIERA_REDIS_URL=redis://localhost:6379
OPENROUTER_API_KEY=sk-or-v1-your-key
OPENROUTER_MODEL=anthropic/claude-sonnet-4.5

NotePagiera creates the PostgreSQL tables it needs when the server first initializes. You do not run a separate migration step.

3Mount the backend

A single catch-all route handler exposes every editor endpoint. Export the verbs it returns and Next.js routes the rest.

// 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;

Open /api/pagiera/health after starting the app. It reports whether PostgreSQL, Redis and the configured OpenRouter model are reachable, which turns a silent misconfiguration into a readable answer.

4Load the editor data on the server

The first document is server-rendered, so the studio opens with content instead of a loading state.

// 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;
}

5Mount the studio behind your own auth

Render the studio on a route only your team can reach. Pagiera deliberately does not ship an authentication layer — the editor route and the API route inherit whatever your application already enforces.

• Protect both the editor page and /api/pagiera with the same check.
• Import the editor stylesheet before your own CSS: @import rules must precede other rules.
• Add the font provider so next/font families appear in the Typography panel.

What each service is responsible for

Frequently asked questions