Sandbox Mode: Data is public and resets every 15 minutes.
Back to Articles
Hero image for How to Setup NextBlock: From Scratch
Getting Started3 min read

How to Setup NextBlock: From Scratch

Two clear ways to launch NextBlock: the full monorepo for contributors, or the CLI for a fast standalone setup.

There are two strong ways to start with NextBlock: clone the full monorepo if you want the whole platform, or scaffold a standalone app if you want to ship quickly. Both paths land you on the same editorial model, design system, and CMS foundation.

Choose your path

Monorepo

Best for contributors, plugin authors, and teams that want direct access to every app and shared package.

CLI starter

Best for launching a production-ready Next.js project with NextBlock™ already wired in and easy to deploy.

NextBlock™ platform artwork showing the CMS, blocks, and integrations that ship together
Whichever path you choose, you still inherit the same block editor, CMS shell, and shared product language.

Before you start

The setup wizard asks for credentials from three services, so create them first:

  • Supabase project – Reference ID (Project Settings > General), connection string (Connect > Direct connection > URI), the anon and service_role keys, and a Personal Access Token (Account > Access Tokens).
  • Cloudflare R2 bucket – create a bucket, enable its Public Development URL, and create an Account API token with Object Read & Write. Copy the Access Key ID and Secret Access Key (shown only once).
  • SMTP credentials – SMTP2GO works very well; required so Supabase can email the confirmation link your first admin needs to sign in.

Path 1: Clone the Monorepo

This route is ideal when you want the full Nx workspace and every internal package available locally.

You get

  • The public site, CMS app, CLI source, and shared libraries
  • Direct access to libs/ for custom block and package work
  • Workspace tools like nx graph for dependency visibility

Good fit for

  • Core contributors and maintainers
  • Teams building custom modules or premium extensions
  • Agencies that want end-to-end control over the platform
git clone https://github.com/nextblock-cms/nextblock.git
cd nextblock
npm install
npm run setup

The npm run setup wizard creates .env.local, collects your Supabase, Cloudflare R2, and SMTP details, generates local secrets (CRON_SECRET, DRAFT_MODE_SECRET, REVALIDATE_SECRET_TOKEN), links the Supabase CLI, and applies the full schema to your database with npm run db:migrate:fresh.

Then start the app:

npx nx serve nextblock

First login

The dev server runs at http://localhost:4200. Open /sign-up and create your account – the first account to register automatically becomes the admin. Confirm your email (or confirm the user in Supabase > Authentication > Users), then sign in to reach the CMS at /cms/dashboard.

Useful monorepo commands:

# Build every workspace package
npm run all-builds

# Lint the main application
npm run nx:lint:nextblock

# Regenerate database types
npm run db:types

# Inspect workspace relationships
npx nx graph

Path 2: Use the CLI Starter

If your goal is to launch quickly, the CLI gives you a standalone Next.js app with NextBlock™ already embedded.

npm create nextblock@latest my-site
cd my-site

The CLI copies a production-ready template, rewrites workspace imports to published packages, and can run the same setup flow for you. Your result is a normal Next.js app with no Nx requirement, so npm run dev serves it on http://localhost:3000.

Configure your environment in .env.local:

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
NEXT_PUBLIC_URL=http://localhost:3000

Push the schema and start developing:

npm run db:push
npm run dev

Tip

The CLI path is the fastest way to evaluate NextBlock™ with your own content model before you decide whether you need the full workspace.

Activating Premium Modules

For CLI-generated projects, the commerce package can be activated with a single command:

npx create-nextblock activate ecommerce

This injects wrappers for /cms/orders, /cms/products, /checkout, and the checkout API, all gated through verifyPackageOnline() so premium routes stay aligned with your license.

Deployment

NextBlock™ deploys like a standard Next.js app. Push to Vercel, Netlify, or any Node.js host, then make sure your server-side environment variables such as the Supabase service role, R2 credentials, SMTP, and CRON_SECRET are configured in that environment, and set NEXT_PUBLIC_URL to your production domain.