Skip to content

nuotsu/sanitypress-with-typegen

Repository files navigation

♣️ SanityPress with TypeGen

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

Key Features

  • 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

Getting Started

1. Initialize the project

Click the Sanity template link -- OR -- install with the Sanity CLI:

npm create sanity@latest -- --template=nuotsu/sanitypress-with-typegen

2. Set environment variables

If 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" permissions

⚠️ Required: Set NEXT_PUBLIC_BASE_URL to your production domain.

3. Install and start local server

Install required packages and dependencies with your desired package manager (e.g. npm, pnpm, deno, bun, etc.).

npm install

Once installed, run the development script:

npm run dev

Then open:

4. Add content in your Sanity Studio

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.gz

5. Set up deployments

Add a Vercel (default) or Netlify widget to enable deployments from the Studio.

6. Customize

Adjust frontend styles to your liking, edit or add new schema and modules, etc.

Roadmap / To-do

  • featured post
    • reference to blog.post on blog-index, blog-post-list
    • OR as featured: true on blog.post
  • read time for blog posts
  • Modules
    • Announcement bar
  • Improved error handling
  • rename global-module to module.global

*Not included

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