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

Packages are public on npm. Prefer the meta package (Next.js adapter + CLI):

npm install nexus-cms

That installs @nexus-cms/nextjs (which pulls core, react, compiler) and @nexus-cms/cli (the nexus binary). Equivalent split install:

npm install @nexus-cms/nextjs
npm install -D @nexus-cms/cli

Laravel is not an npm package — when you need a content backend, install it with Composer in your Laravel app (after it’s on Packagist):

composer require nexus-cms/laravel

Package source: https://github.com/forged-tools/backend

Create a free alpha account at Dashboard and set the workspace license key as NEXUS_LICENSE_KEY / NEXT_PUBLIC_NEXUS_LICENSE_KEY (and on <CmsProvider licenseKey={…} />). Edit mode requires a valid key — without one, /?edit=1 shows a license gate. Pro features (versions, locales, collection add/remove) need a Pro-tier key — see Licensing.

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 token handshake) to launch the overlay editor.

Connect a real backend next

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

  1. Follow Laravel 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