Installation

This template is a pnpm workspace monorepo: frontend/ is the Next.js app and studio/ is Sanity Studio. Run install and dev commands from the repository root unless noted. Schemas and sanity CLI commands live under studio/; the site lives under frontend/.

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:

• Create a new Sanity project
• Add API Read Token
• Configure CORS origin for http://localhost:3000
• Set up environment variables
• Clone the repository
• Install dependencies

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 below).

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

• Open the Next.js app at http://localhost:3000
• Open the Studio at http://localhost:3333. In this monorepo, Studio runs on port 3333 when you use pnpm dev from the root (not at /studio inside Next.js). Use the same service (Google, GitHub, or email) that you used when you logged in to the CLI.

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. 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. 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. From the studio directory:

cd studio
sanity deploy

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

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.

Environment variables

All environment variables and their descriptions:

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

• NEXT_PUBLIC_SITE_URL - your website url. For example, https://yourwebsite.com without trailing slash. Used for sitemap, robots, and client configuration.
• NEXT_PUBLIC_SITE_ENV - specifies the environment type (development/production) and affects metadata configuration. Setting this to "development" prevents search engine indexing, which is useful for staging environments (e.g., staging.yourwebsite.com).
• NEXT_PUBLIC_STUDIO_URL - your Sanity Studio url. For example, https://your-sanity-hostname.sanity.studio or http://localhost:3333 locally, without trailing slash. Used for Draft Mode (Open in Studio URL).
• NEXT_PUBLIC_SANITY_API_VERSION - your Sanity API version. You don't have to use specific dates, any past or present date is valid, and today's date will always give you the latest version - no need to check release history. For example: YYYY-MM-DD.
• NEXT_PUBLIC_SANITY_PROJECT_ID - your Sanity project ID. For example, abc12345.
• NEXT_PUBLIC_SANITY_DATASET - your Sanity dataset name. For example, production.
• SANITY_API_READ_TOKEN - your Sanity read token for Next.js to fetch data.
• RESEND_API_KEY - your RESEND api key for the newsletter form.
• RESEND_AUDIENCE_ID - your RESEND audience id for the newsletter form to store contacts.

Studio (studio/.env.local):

• SANITY_STUDIO_PREVIEW_URL - your Next.js site url for preview. For example, https://yourwebsite.com or http://localhost:3000 locally, without trailing slash. Used for Draft Mode in Presentation Tool or iframe preview.
• SANITY_STUDIO_PROJECT_ID - your Sanity project ID. For example, abc12345.
• SANITY_STUDIO_DATASET - your Sanity dataset name. For example, production.
• SANITY_STUDIO_HOSTNAME - your Sanity Studio hostname for sanity deploy (unique on .sanity.studio).
• SANITY_STUDIO_API_VERSION - your Sanity API version (same guidance as above). For example: YYYY-MM-DD.
• SANITY_AUTH_TOKEN - your Sanity auth token for Studio deploy via GitHub Actions. Generate in Sanity Manage → API → Tokens with deploy permission.
• SANITY_STUDIO_APP_ID - your Sanity Studio app ID from the first sanity deploy; avoids repeated hostname prompts.