Ready, Set, Impress.
An opinionated, fully customizable Next.js (App Router) and Sanity starter template with Tailwind CSS and pre-built schema for rapid website development.
Demo | Docs | Blog | Studio screenshots | Sanity.io
- ✨ Next.js 15 (App Router, RSC, Typescript) with Tailwind CSS
- 📕 Pre-configured Sanity schema & frontend components
- ✏️ Visual editing in an embedded Sanity Studio
- ⌨️ Auto-generated sitemap + Blog RSS feed
- ⚡ Perfect Lighthouse scores on desktop and 99/100 on mobile.
Full instructions on the docs.
- New repo: Clone or fork the GitHub template.
- Get Sanity project ID: Create a new project on Sanity.io from scratch (blank schema) with CLI and retrieve the
projectId. - Update environment variables:
# .env.local
PUBLIC_BASE_URL = ... # https://sanitypress.dev
NEXT_PUBLIC_SANITY_PROJECT_ID = ... # abcdefgh
NEXT_PUBLIC_SANITY_DATASET = ... # production
SANITY_API_READ_TOKEN = ... # "Viewer" token from https://sanity.io/manage
NEXT_PUBLIC_GITHUB_TOKEN = # used for Reputation blocks- Add content: Publish the required
siteandpagedocuments.
| Document | Slug | Use | Required? | Notes |
|---|---|---|---|---|
site |
Global settings | ✅ | ||
page |
index |
Homepage | ✅ | |
page |
404 |
Page not found | ||
page |
blog |
Blog listing | Add the Blog frontpage module | |
page |
blog/* |
Blog post | Add the Blog post content module |
Alternatively, you can import the demo site dataset:
sanity dataset import src/sanity/demo.tar.gz-
Set up deployments: Add a Vercel or Netlify widget to enable deployments from the Studio.
-
Customize: Adjust frontend styles, edit/add Sanity schema and modules, and more.
- The SanityPress Blog
- Visual Editing with Next.js and Sanity
next-sanity— Sanity toolkit for Next.js- nuqs — Type-safe search params state manager for React
- zustand — State management for React