Next.js + Sanity.io Starter Template

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

🖋️ Published on Sanity.io

⚡ Perfect Lighthouse scores on desktop and 98/100 on mobile.

🚀 Checkout the demo site, playground and docs page.

Table of Contents

• Key Features
• Getting Started
• Time-based revalidation
• Visual Editing
• Staging
• 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 content structuring.
• Pre-built frontend components for rapid website development.
• Visual editing in Presentation mode inside the Sanity Studio.
• Auto-generated sitemap.xml and blog rss.xml.

Getting Started

1. Start a new repo with the GitHub template

2. Retrieve a new Sanity project ID

npm -y create sanity@latest

Note

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

3. Update environment variables

# /next/.env.local
NEXT_PUBLIC_SANITY_PROJECT_ID = ...
NEXT_PUBLIC_SANITY_TOKEN = ... # retrieve from https://sanity.io/manage
NEXT_PUBLIC_REVALIDATE = ... # number in seconds; leave empty for `revalidate: false`

# /sanity/.env.local
SANITY_STUDIO_PROJECT_ID = ...
SANITY_STUDIO_PREVIEW_URL = ... # your live or staging site URL

4. Populate the Sanity project with content

• Site settings (sanity/schemas/documents/site.ts)
• Pages (sanity/schemas/documents/page.ts)
• Blog posts (sanity/schemas/documents/blog.post.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

5. Set up the Sanity Dashboard with your deployment service

# Vercel — https://www.sanity.io/plugins/vercel-dashboard-widget
npm i sanity-plugin-dashboard-widget-vercel

# Netlify — https://www.sanity.io/plugins/sanity-plugin-dashboard-widget-netlify
npm i sanity-plugin-dashboard-widget-netlify

6. Customize the frontend

Feel free to adjust styles, add more schema and modules, and more.

Time-based Revalidation

Set NEXT_PUBLIC_REVALIDATE (optional) environment variable to allow time-based revalidation for published Sanity documents.

Leave blank to disable revalidation ({ next: { revalidate: false } }).

# /next/.env.local
NEXT_PUBLIC_REVALIDATE = 3600	# every hour

When empty (revalidate: false), published Sanity documents will only be pushed to the live site when a new deployment is triggered.

Visual Editing

Note

Currently in beta; Currently only works on the local development environment of the Sanity Studio.

Content can be edited and previewed live from the Sanity Presentation mode by navigating to the Editor tab in the Studio.

Staging

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):

# Environment variable for the staging branch (in Vercel, Netlify, etc.)
ENABLE_PREVIEW = true

Now you can use the preview deployment URL to share staged content (unpublished changes) with your team or clients.

Other Helpful Resources

• Global TypeScripts types useable in the Next.js frontend
  • Sanity types
• <Img> and <Source> components to display Sanity images
• Helper functions to:
  • structure the Sanity Studio
  • prepare the preview for PortableText content

External References

• The official Sanity toolkit for Next.js
• Visual Editing with Next.js App Router and Sanity Studio
• sanity-io/next-sanity README