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.

⏱️ For the latest updates, view the changelog.

Key Features

• Modern Frontend Development with Next.js (App Router, RSC, Typescript) and Tailwind CSS.
• Pre-configured Sanity schema for rapid webpage 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 template

👉 Check out on GitHub nuotsu/next-sanity-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. Replace projectId with the new project ID

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

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

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

ENABLE_PREVIEW = true

# also set in next/src/lib/env.ts

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