Next.js + Sanity.io Starter Template

An opinionated and minimally styled starter template with Tailwind CSS and pre-built schema for rapid website development.

🖋️ Published on Sanity.io

🚀 Checkout the demo site and the docs page.

⏱️ For the latest updates, view the changelog.

Table of Contents

• Key Features
• Getting Started
• Live Previews
• Helpful Resources
• External References

Key Features

• Modern Frontend Development with Next.js (App Router, RSC, Typescript) and Tailwind CSS.
• Pre-configured Sanity schema for rapid website and blog development.
• Pre-built common website components (next/src/ui).
• Auto-generated sitemap.xml and blog rss.xml.
• Live previews when set up with a git branch.

Getting Started

1. Create a new repo with the GitHub template

2. Grab a new Sanity project ID

npm -y create sanity@latest

Note

The CLI will ask to create new directory with the Sanity files, but you can remove once the project ID is retrieved.

3. Update environment variables

.env.local

• For the Next.js frontend:

NEXT_PUBLIC_SANITY_PROJECT_ID = ...
NEXT_PUBLIC_SANITY_TOKEN = ... # Retrieve from https://sanity.io/manage

• For the Sanity Studio:

SANITY_STUDIO_PROJECT_ID = ...

Sanity Project ID (projectId)

• sanity/sanity.cli.ts
• sanity/sanity.config.ts
• next/.env.local (duplicate .env.example)
  • retrieve a token from Sanity to allow for live previews

Production URL / Domain (BASE_URL)

• next/src/lib/processUrl.ts

4. Populate the Sanity project

• Site settings (sanity/schemas/documents/site.ts)
• Pages (sanity/schemas/documents/page.ts)

Important

Required: Add a page with the slug index for the Homepage
Optional: Add a page with the slug 404 for the 404 page

• Blog posts (sanity/schemas/documents/blog.post.ts)

5. Set up the Sanity Dashboard with your deployment service

For Vercel:

npm i sanity-plugin-dashboard-widget-vercel

For Netlify:

npm i sanity-plugin-dashboard-widget-netlify

6. Customize the frontend

Feel free to adjust styles and add more modules.

Live Previews

1. Create a new git branch (call it anything—e.g. staging or preview) and set an environment variable specific to that branch in your deployment service (Vercel or Netlify):

git checkout -b staging

Set in next/src/lib/env.ts:

ENABLE_PREVIEW = true

2. In sanity/src/defaultDocumentNode.ts, set previewUrl to your branch deployment URL

// e.g. Vercel
const previewUrl = "https://your-site-git-staging.vercel.app";

// e.g. Netlify
const previewUrl = "https://staging--your-site.netlify.app";

Helpful Resources

• Global Types in Next.js
  • Sanity types
• <Img> component for Sanity CDN images

External References

• Official Next.js + Sanity setup documentation article
• sanity-io/next-sanity README