← Về thư mục
📄 / / projects / blog / vwg-blog-v2 / README.md

Schema UI - Next.js Sanity Starter Template

This starter is a part of Schema UI project, a comprehensive page builder that provides production-ready React components with pre-built Sanity schemas and GROQ queries, enabling rapid development of content-driven websites with Sanity CMS and Next.js. Content Agent & MCP ready.

Monorepo: The template now uses a pnpm workspace with a frontend/ (Next.js) app and a studio/ (Sanity Studio) app in one repository. Older guides referred to a single app folder; here, schemas and sanity CLI commands live under studio/, and the site lives under frontend/. Root scripts run both together (pnpm dev).

Screenshot of Sanity Studio using Content Agent

Next.js Sanity React Typescript Tailwind Shadcn

Docs | Components | Demo | i18n - multilingual starter

Deploy with Vercel

For this monorepo, set the Vercel project Root Directory to frontend and add NEXT_PUBLIC_STUDIO_URL (and other vars from frontend/.env.local.example) in the project settings.

Monorepo layout

Path Role
frontend/ Next.js app (pages, API routes, sanity.types.ts from TypeGen)
studio/ Sanity Studio (sanity dev, sanity deploy, schema.json extract)

Install and dev commands are meant to be run from the repository root unless noted.

Getting Started

Installing the template

1. Initialize template with Sanity CLI

Run the command in your Terminal to initialize this template on your local computer:

npm create sanity@latest -- --template serge-0v/next-js-sanity-starter

See the documentation if you are having issues with the CLI.

This command will:

Alternative: clone the monorepo

If you prefer not to use the CLI bootstrap:

git clone https://github.com/serge-0v/next-js-sanity-starter.git
cd next-js-sanity-starter
pnpm install

Then create a project in Sanity Manage, add CORS origins for http://localhost:3000 and http://localhost:3333, and copy frontend/.env.local.example → frontend/.env.local and studio/.env.local.example → studio/.env.local, filling in project ID, dataset, and tokens (see Environment variables).

This project uses pnpm. To install pnpm globally:

npm install -g pnpm

For dataset import and Studio deploy, log in to the CLI:

pnpm install --global sanity@latest
sanity login

2. Run the template locally

From the repository root:

pnpm dev

This starts the Next.js app and Studio together. To run only one workspace:

pnpm dev:frontend    # frontend only
pnpm dev:studio  # studio only

3. Open the app and sign in to the Studio

Set NEXT_PUBLIC_STUDIO_URL in frontend/.env.local to http://localhost:3333 locally, and SANITY_STUDIO_PREVIEW_URL in studio/.env.local to http://localhost:3000, so draft mode and Presentation previews resolve correctly.

Adding content with Sanity

1. Import Sample Data (Optional)

Import the demo dataset to get started with sample content. In the monorepo the archive is studio/sample-data.tar.gz. From the studio directory:

cd studio
sanity dataset import sample-data.tar.gz production --replace

Be careful with the --replace flag: it replaces existing data in the dataset.

2. Publish your first document

The template comes pre-defined with a schema containing Author, Category, FAQ, Page, Post, and Testimonial document types (and additional types such as Navigation and Settings in the Studio).

From the Studio, click "+ Create" and select the Page document type. Go ahead and create and publish the document.

Your content should now appear in your Next.js app (http://localhost:3000)

3. Extending the Sanity schema

The schema for the Page document type lives at studio/schemas/documents/page.ts (legacy single-repo path: sanity/schemas/document/page.ts). You can add more document types to the schema to suit your needs.

4. Adding new components

This template includes components aligned with the Schema UI library. Visit Schema UI Docs to learn how to add new components.

Deploying your application

1. Configure CORS settings

Add your production URL to the CORS Origins in your Sanity project settings to allow your deployed site to communicate with Sanity. Also add your deployed Studio origin (for example https://your-hostname.sanity.studio) if you host Studio separately.

2. Deploy to Vercel

Deploy your website to Vercel:

  1. Create a new repository on GitHub.
  2. Push your code to GitHub
  3. Create a new Vercel project
  4. Connect your GitHub repository and import the project. For this monorepo, set Root Directory to frontend.
  5. Copy the environment variables from frontend/.env.local and paste them to your Vercel project settings. Vercel supports pasting all variables at once. Include NEXT_PUBLIC_STUDIO_URL pointing at your hosted Studio URL (no trailing slash).
  6. Deploy

3. Deploy Sanity Studio (sanity deploy)

Recommended: host Studio on *.sanity.studio.

  1. Set production values in studio/.env.local (or in CI — see below).
  2. From studio:
cd studio
sanity deploy

After the first deploy, set SANITY_STUDIO_APP_ID from the CLI output so later deploys skip the hostname prompt.

4. GitHub Actions (Studio)

The repo includes .github/workflows/deploy-studio.yml: it deploys Studio when studio/** changes on master or develop.

Configure GitHub Environments (Production for master, development for develop):

See the workflow file for the exact names checked during deploy.

5. Deploy Studio to Vercel (optional)

Create a separate Vercel project with Root Directory studio and the same studio environment variables as in studio/.env.local.

Inviting collaborators

Now that you've deployed your Next.js application and Sanity Studio, you can optionally invite a collaborator to your Studio. Open up Manage, select your project and click "Invite project members"

They will be able to access the deployed Studio, where you can collaborate together on creating content.

Configuring Resend (optional)

To use the newsletter form, you need to configure Resend.

  1. Create a new Resend account
  2. Create a new API key
  3. Copy the audience id
  4. Set the API key and audience ID in frontend/.env.local as RESEND_API_KEY and RESEND_AUDIENCE_ID (or in Vercel project settings)

Sanity TypeGen

To generate the types, run the following commands from the studio folder (where sanity.cli.ts lives):

cd studio
npx sanity schema extract

This generates schema.json in the studio folder.

npx sanity typegen generate

This generates frontend/sanity.types.ts (output paths are set in studio/sanity.cli.ts).

From the repository root you can use the workspace shortcut:

pnpm typegen

Run TypeGen whenever you change schemas or queries so the frontend stays in sync.

Workspace commands

Installing packages

Frontend:

pnpm add <package-name> --filter frontend

Studio:

pnpm add <package-name> --filter studio

Root:

pnpm add -w <package-name>

Updating dependencies

Update all packages in all workspaces:

pnpm up --latest --recursive

Update specific workspace:

pnpm up --latest --filter frontend
pnpm up --latest --filter studio

Environment variables

All environment variables and their descriptions:

Next.js (frontend/.env.local):

Studio (studio/.env.local):