Zero setup stress. 100% type-safe.
An improved successor to the acclaimed Next.js + Sanity.io starter template—now with auto-generated TypeScript types from your Sanity schema and GROQ queries.
Get started | Read more about TypeGen | View on Sanity.io
- Next.js 16 (App Router, Server Components, TypeScript) with Tailwind 4
- Improved successor to the acclaimed SanityPress starter template (over 350 stars)
- GROQ TypeGen for your Sanity Schema types
- Perfect PageSpeed Insight scores
- Live Content API with Visual Editing
- Optimized images with Next Image component and Sanity CDN
- Auto-generated sitemap.xml and blog RSS feed
Click the Sanity template link -- OR -- install with the Sanity CLI:
npm create sanity@latest -- --template=nuotsu/sanitypress-with-typegenIf initialized via the Sanity template link, the .env.local file should be created automatically.
If initialized via the CLI, duplicate the .env.example file as .env.local and assign the variables to your project:
# .env.local
NEXT_PUBLIC_BASE_URL="https://example.com" # your website's domain
NEXT_PUBLIC_SANITY_PROJECT_ID="abcd1234" # Sanity project id
NEXT_PUBLIC_SANITY_DATASET="production" # Sanity dataset name
SANITY_API_READ_TOKEN="..." # API token with "Viewer" permissionsNEXT_PUBLIC_BASE_URL to your production domain.
Install required packages and dependencies with your desired package manager (e.g. npm, pnpm, deno, bun, etc.).
npm installOnce installed, run the development script:
npm run devThen open:
- Next.js frontend: http://localhost:3000
- Sanity Studio: http://localhost:3000/admin
Publish the required documents: site and page (with the slug "index"). Otherwise, you’ll just see a blank page on the Next.js frontend.
What you'll need:
| Document | Slug or Path | Usage | Required? | Notes |
|---|---|---|---|---|
site |
Global settings | Yes | ||
page |
index |
Homepage route | Yes | |
page |
404 |
Not found route | ||
page |
blog |
Blog listing route | Add the Blog index module | |
global-module |
blog/ |
Blog post template | Add the Blog post content module |
Alternatively, you can run the following command to import a demo dataset with the required documents:
sanity dataset import demo.tar.gzAdd a Vercel (default) or Netlify widget to enable deployments from the Studio.
Adjust frontend styles to your liking, edit or add new schema and modules, etc.
- featured post
- reference to blog.post on blog-index, blog-post-list
- OR as
featured: trueon blog.post
- read time for blog posts
- Modules
- Announcement bar
- Improved error handling
- rename
global-moduletomodule.global
- Internationalization (i18n) and multi-lingual support
- Turbopack support (pending issue with lightningcss)
- Next.js 16 Cache Components (not suitable for Sanity Live Content API's real-time updates)
