Nexus CMS

Getting started

Add Nexus CMS to a Next.js app in a few minutes.

Alpha — packages are 0.1.x. Usage is free until a stable release.

Nexus works like a compiler plugin: add config, run the CLI, mount the provider. You do not rewrite your landing components for the CMS to work (optional // @cms-ignore comments guide the compiler away from decorative UI). For custom hover/tilt wrappers that fight the editor, see Edit mode and custom interactions in Comment directives.

Prefer AI setup?

If you use Cursor, Claude, or similar, start here instead of typing every step by hand:

  1. Open AI setup prompt.
  2. Paste the Frontend startup prompt into the agent (it will teach you what changed and point at backend next steps).
  3. When you are ready for Filament/Laravel (or any HTTP store), paste the Backend startup prompt in that repo.

Manual steps below are the same path the agent should follow.

1. Install

npm install @nexus-cms/core @nexus-cms/react @nexus-cms/nextjs
npm install -D @nexus-cms/cli @nexus-cms/compiler

Get a license key from the Dashboard after email/password signup (alpha workspaces get Pro-tier access automatically).

Local SaaS stack (apps/web)

# Option A — Docker Mongo (port 27017)
docker compose up -d

# Option B — no Docker: set in apps/web/.env.local
# MONGODB_URI=memory
# USE_MEMORY_MONGO=1

cp apps/web/.env.example apps/web/.env.local   # then set AUTH_SECRET
pnpm --filter @nexus-cms/web dev               # http://localhost:3000

Sign up with email/password at /login (Google/GitHub are disabled during alpha).

2. Initialize

npx nexus init

This writes a nexus.config.ts you can tailor later.

3. Enable the compiler

next.config.mjs
import { withNexus } from "@nexus-cms/nextjs/config";

export default withNexus({ reactStrictMode: true });

Import withNexus from @nexus-cms/nextjs/config (not the package root) so loading your config never pulls server-only modules.

4. Generate the schema

npx nexus generate

This scans your include globs and emits .nexus/cms-schema.json — a list of every editable region, with stable ids matching the data-cms-id attributes the compiler injects into your DOM.

5. Mount the provider

app/providers.tsx
"use client";
import { CmsProvider, NexusLayer, createMemoryAdapter } from "@nexus-cms/react";
import schema from "../.nexus/cms-schema.json";

const adapter = createMemoryAdapter(schema as never); // swap for the HTTP adapter

export function Providers({ children, editMode }) {
  return (
    <CmsProvider schema={schema as never} adapter={adapter} page="/" editMode={editMode}>
      {children}
      <NexusLayer />
    </CmsProvider>
  );
}

Open your site with ?edit=1 (or via the Filament handshake) to launch the overlay editor.

Connect a real backend next

Memory adapter is for local demos only. To persist content:

  1. Follow Filament backend (or paste the backend prompt on AI setup).
  2. Swap createMemoryAdapter for createHttpAdapter — see Next.js adapter.
  3. Import your schema into the backend and test publish + reload.

Next: Core concepts · AI setup prompt · Licensing.

On this page