Get access.

A Next.js app with Sanity Studio, an open-source React application that connects to your Sanity project’s hosted dataset. The Studio is configured locally and can then be deployed for content collaboration.

Features

Next.js 16 for performance. App Router, fast pages, and SEO-friendly static sites.
Real-time visual editing. Edit content live with Sanity’s Presentation Tool and see updates as they happen.
Live content. The Live Content API delivers live, dynamic experiences without the usual complexity of building real-time functionality.
Pages you can rearrange. A page builder with dynamic components and drag-and-drop visual editing.
Content management. Collaborate in real time, with fine-grained revision history.
AI-powered media. Auto-generate alt text with Sanity AI Assist.
On-demand publishing. New content is live without waiting for a rebuild, using Incremental Static Revalidation.
Media. Integrated Unsplash support for picking images.

Demo

template-nextjs-clean.sanity.dev

Install with the CLI

If you already deployed with the Sanity + Vercel integration, skip to the Vercel section below and set up the local environment from there.

1. Initialize

Run this in your terminal. It creates the app on your computer and walks you through a Sanity login if you need one.

npm create sanity@latest -- --template sanity-io/sanity-template-nextjs-clean

If the CLI fails, the error list is in the Sanity CLI help.

2. Run the app and the Studio

Go into the folder that was just created, then start both dev servers.

cd <your app name>
npm run dev

3. Open them and sign in

Next.js app: http://localhost:3000
Sanity Studio: http://localhost:3333

The Studio asks you to log in. Use the same Google, GitHub, or email account you used in the CLI.

Add content

1. Publish your first document

The schema already includes Page, Post, Person, and Settings.

In the Studio, click “+ Create” and choose Post. Write it and publish. The post shows up on the Next.js app and on the Presentation tab in the Studio.

2. Import sample data

Optional. From the project root, this loads the included dataset into your Sanity project.

npm run import-sample-data

3. Extend the schema

The Post type lives in studio/src/schemaTypes/post.ts. Add more document types the same way. The schema reference is in the Sanity schema docs.

Deploy and invite editors

1. Deploy Sanity Studio

The Next.js app is in /frontend and the Studio is in /studio. Both start out only on your machine.

From the Studio directory:

cd studio
npx sanity deploy

You pick a hostname, for example your-project.sanity.studio.

2. Deploy the Next.js app

Host the frontend wherever you like. With Vercel and GitHub, the path is:

Create a GitHub repository from this project. GitHub’s own guide for adding local code is here.
Create a Vercel project and connect that repository.
Set the root directory to the Next.js app (frontend).
Add the environment variables.

3. Invite a collaborator

Open Sanity Manage, select the project, and click “Invite project members”. They can use the deployed Studio and edit with you.

If you started from a Vercel deploy

Use this when the project was created through the Sanity + Vercel integration and you now want it running locally.

Clone the repository that deploy created in your own GitHub account, then install:
```
git clone <your-new-repo-url>
cd <your-repo-name>
npm install
```
Pull environment variables from Vercel:
```
cd frontend && npx vercel link && npx vercel env pull .env.local && cd ..
cp frontend/.env.local studio/.env.local
```
The frontend reads NEXT_PUBLIC_SANITY_PROJECT_ID, NEXT_PUBLIC_SANITY_DATASET, SANITY_API_READ_TOKEN, and related values. The Studio reads SANITY_STUDIO_PROJECT_ID and SANITY_STUDIO_DATASET. The same .env.local works for both, because each app only reads what it needs.
From the project root, npm run dev. Next.js is on localhost:3000, Studio on localhost:3333. Sign in with the account you used during setup.
Optional sample content: npm run import-sample-data.
Deploy the Studio for the team:
```
cd studio && npx sanity deploy
```
Then set NEXT_PUBLIC_SANITY_STUDIO_URL in the Vercel project to that Studio URL, such as https://your-project.sanity.studio.
Invite people from Sanity Manage.