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:
- Open AI setup prompt.
- Paste the Frontend startup prompt into the agent (it will teach you what changed and point at backend next steps).
- 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/compilerGet 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:3000Sign up with email/password at /login (Google/GitHub are disabled during alpha).
2. Initialize
npx nexus initThis writes a nexus.config.ts you can tailor later.
3. Enable the compiler
import { withNexus } from "@nexus-cms/nextjs/config";
export default withNexus({ reactStrictMode: true });Import
withNexusfrom@nexus-cms/nextjs/config(not the package root) so loading your config never pulls server-only modules.
4. Generate the schema
npx nexus generateThis 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
"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:
- Follow Filament backend (or paste the backend prompt on AI setup).
- Swap
createMemoryAdapterforcreateHttpAdapter— see Next.js adapter. - Import your schema into the backend and test publish + reload.
Next: Core concepts · AI setup prompt · Licensing.