Sanity Template Nextjs

Sanity Template Nextjs is a boilerplate that combines the Next.js React framework with the Sanity headless CMS, placing a customized Sanity Studio directly at the /studio route.

What is Sanity Template Nextjs?

Sanity Template Nextjs is a GitHub starting point for a Next.js application with embedded Sanity integration. It is authored by Marius Lundgård, uses TypeScript throughout, and ships with a customized Sanity Desk Tool preconfigured. The template expects a Sanity project ID and dataset as input, which you provide via the sanity init command, and it produces a working Next.js app with live previews and a Studio route. It deliberately avoids Next.js's experimental appDir feature because of known stability issues, instead using the stable pages router.

Key Features

• Live previews — Instant content previews are implemented with next-sanity, allowing editors to see changes in real time.
• Customized Sanity Desk Tool — The Studio's desk tool is preconfigured, reducing setup work for content schemas.
• TypeScript only — The entire template is written in TypeScript, giving type safety out of the box.
• ESLint configuration — A linting setup is included to keep code consistent.
• Environment variables — Ready-to-use environment variable handling for connecting to Sanity.
• Tailwind CSS — Utility-first styling is wired in, so you can start building the UI immediately.
• Vercel deployment — A one-click Deploy with Vercel button is included via the repository's README, with a preconfigured demo project.

Who should use Sanity Template Nextjs?

Developers who want a quick, opinionated setup for a Next.js site backed by Sanity can use this template to skip configuration. It is especially useful for those who need live previews, because the preview plumbing is already installed. Teams that want a customized Sanity Studio without building the desk tool from scratch will also benefit. The template suits projects that prefer the stable pages router over experimental features.

What can you do with Sanity Template Nextjs?

• Next.js developers: scaffold a content-rich site with Sanity CMS in minutes, then add pages and components.
• Content editors: use the embedded /studio route to manage content with a tailored desk tool.
• Prototype builders: deploy a demo to Vercel immediately to test Sanity integration and preview behavior.

How does Sanity Template Nextjs work?

The README documents three setup steps. First, install dependencies with pnpm install. Second, run pnpm exec sanity init --env .env.local to create a Sanity project and dataset, writing credentials to a local env file. Third, run pnpm dev to launch the development server and access the Studio at /studio.

FAQ

Does Sanity Template Nextjs use the Next.js app directory?

No. The template intentionally does not use Next.js's experimental appDir feature due to known issues. It relies on the stable pages router instead.

Is Sanity Template Nextjs free?

The template is open source and available on GitHub, so it is free to use. Sanity itself has a free tier, and a Vercel deployment also has a free tier for hobby projects.

What package manager does it use?

The setup instructions assume pnpm. You run pnpm install, pnpm exec sanity init, and pnpm dev.