Sanity + Next.js + Cloudflare Starter

Next.js + Sanity + Cloudflare Starter

A production-ready website starter combining Next.js 16, Sanity CMS with Visual Editing, and deployment to Cloudflare Workers via OpenNext.

Note: After clicking the deploy button, you still need to configure environment variables in your Cloudflare dashboard (see Environment Variables).

Demo

https://sanity-next-cloudflare-starter.pedroduque8.workers.dev/

Features

• Next.js 16 App Router — Static site generation with incremental revalidation
• Sanity Visual Editing — Live preview with the Pages navigator and real-time Live Content API
• Cloudflare Workers — Edge deployment powered by OpenNext for Cloudflare
• Page Builder — Drag-and-drop page sections with Visual Editing support
• Pathname-based routing — Clean URL structure for pages and posts
• AI-powered alt text — Auto-generate image descriptions with Sanity AI Assist
• Unsplash integration — Seamless media management
• pnpm workspaces — Monorepo with frontend/ and studio/ packages

Stack

Quick Start

1. Clone and install

npx degit pedroduke/sanity-nextjs-cloudflare-starter my-site
cd my-site
pnpm install

2. Configure environment variables

Copy the example files and fill in your values:

cp frontend/.env.example frontend/.env.local
cp studio/.env.example studio/.env.local

See Environment Variables below for what each variable does.

3. Run locally

pnpm dev

This starts both servers in parallel:

• Frontend → http://localhost:3000
• Studio → http://localhost:3333

4. Create content

In the Studio, click + New document and create a Post or Page. Publish it and it will appear on the frontend immediately.

To import sample data:

pnpm run import-sample-data

Deployment

Deploy Sanity Studio

Before deploying the frontend, set SANITY_STUDIO_PREVIEW_URL in Sanity Manage to your Cloudflare Workers URL (e.g. https://your-project.workers.dev), then deploy the Studio:

cd studio && pnpm run deploy
# or
cd studio && npx sanity deploy

Deploy Frontend to Cloudflare Workers

From the repo root:

cd frontend && pnpm run deploy

This runs opennextjs-cloudflare build && opennextjs-cloudflare deploy and publishes your Next.js app as a Cloudflare Worker.

To preview locally using the Cloudflare runtime before deploying:

pnpm --filter frontend preview

Invite collaborators

Open Sanity Manage, select your project, and click Invite project members.

Environment Variables

Frontend (frontend/.env.local)

Studio (studio/.env.local)

Cloudflare Workers (production)

Set the same frontend variables as Secrets or Environment Variables in your Cloudflare dashboard or via wrangler secret put:

cd frontend
wrangler secret put SANITY_API_READ_TOKEN

Project Structure

.
├── frontend/               # Next.js app
│   ├── app/                # App Router routes and components
│   ├── sanity/             # Sanity client, queries, and live config
│   ├── wrangler.jsonc      # Cloudflare Workers config
│   └── open-next.config.ts # OpenNext config
└── studio/                 # Sanity Studio
    └── src/schemaTypes/    # Document and object schemas

Resources

• Sanity documentation
• Next.js documentation
• OpenNext for Cloudflare
• Cloudflare Workers docs
• GitHub repository
• Join the Sanity Community