Creating a Sanity project template with Next.js and Vercel

4 replies
Last updated: May 24, 2023
Hey, I’ve just created a new Sanity project. I create a really simple studio with 2 documents (works and tags) and a singleton (home). I also created a custom body field using portable text.I connected this studio to a Next 13 brand new project that fetch data from my studio. My main folder is name
next-sanity-starter
and it includes a
studio
and a
web
folder that correspond to the sanity studio and my next.js application. Also, I want to use Vercel to host my
web
folder.
Is there a way to turn this project into a template I can re-use for any future project? Thanks!
AI Update

Absolutely! You can definitely turn your project into a reusable template. Here's how to create a template that you (and others) can use for future projects:

Creating a GitHub Template Repository

The simplest approach is to turn your repository into a GitHub template repository:

  1. Go to your repository on GitHub
  2. Click Settings
  3. Check the box that says "Template repository"

Now anyone (including you) can click "Use this template" to create a new project based on your setup. This is great for personal reuse and sharing with others.

Adding a Vercel Deploy Button

To make deployment even easier, you can add a Vercel Deploy Button to your repository's README. This allows one-click deployment to Vercel with environment variable prompts.

Add this to your README.md:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/YOUR_USERNAME/YOUR_REPO&project-name=my-sanity-project&repository-name=my-sanity-project&env=NEXT_PUBLIC_SANITY_PROJECT_ID,NEXT_PUBLIC_SANITY_DATASET,SANITY_API_TOKEN&envDescription=Required%20Sanity%20environment%20variables&envLink=https://www.sanity.io/docs/api-versioning)

Key parameters you can customize in the Deploy Button URL:

  • repository-url: Your GitHub repository URL
  • project-name: Default project name in Vercel
  • env: Comma-separated list of required environment variables (like your Sanity project ID, dataset name, and API tokens)
  • envDescription: Help text shown to users about what these variables are for
  • envLink: Link to documentation explaining how to get these values

When someone clicks the Deploy Button, Vercel will:

  1. Clone your repository
  2. Prompt them to enter the required environment variables
  3. Deploy both your web folder to Vercel
  4. Set up the project with all the necessary configuration

Creating an Official Sanity Template

If you want to share your template with the broader Sanity community, you can submit it as an official template. According to the Sanity documentation on creating templates, here's the process:

  1. Use the Template Kit: Start with the official Sanity Template Kit or adapt your existing project to match its structure

  2. Validate Your Template: The template kit includes a validation script to ensure it meets Sanity's requirements:

    npm run validate
  3. Submit for Review: Once validated, submit your template through the Community Studio

The validator checks for:

  • Properly configured Sanity Studio
  • Valid frontend setup with TypeScript support
  • A README.md with a "Getting Started" section with clear setup instructions
  • Proper environment variable configuration (.env.example or .env.template files)

Project Structure Best Practices

For your monorepo structure with studio and web folders, make sure to:

  1. Add .env.example files in both folders showing what environment variables are needed:
# studio/.env.example
SANITY_STUDIO_PROJECT_ID=your-project-id
SANITY_STUDIO_DATASET=production

# web/.env.example
NEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_READ_TOKEN=your-read-token
  1. Create a comprehensive README.md at the root with:

    • Project description
    • Prerequisites
    • Setup instructions (clone, install, configure)
    • How to run locally
    • How to deploy
    • Your schema structure (documents: works, tags, singleton: home)
  2. Add a root package.json with helpful scripts:

{
  "name": "next-sanity-starter",
  "private": true,
  "scripts": {
    "dev": "concurrently \"npm run dev --prefix studio\" \"npm run dev --prefix web\"",
    "install:all": "npm install --prefix studio && npm install --prefix web"
  },
  "devDependencies": {
    "concurrently": "^8.0.0"
  }
}

Quick Personal Setup

For quick personal reuse, you could also create a simple setup script:

#!/bin/bash
# setup.sh - Run this after cloning

echo "Setting up your new Sanity + Next.js project..."

# Install dependencies
cd studio && npm install && cd ..
cd web && npm install && cd ..

# Copy environment templates
cp studio/.env.example studio/.env.local
cp web/.env.example web/.env.local

echo "✅ Setup complete! Next steps:"
echo "1. Add your Sanity project credentials to studio/.env.local and web/.env.local"
echo "2. Run 'npm run dev' to start both studio and web"

For your use case, I'd recommend:

  1. Make it a GitHub template repository (easiest for creating new projects)
  2. Add a Vercel Deploy Button to your README (makes deployment super easy)
  3. Include clear .env.example files and setup documentation
  4. Optionally, submit it as an official Sanity template if you want to share it with the community

The GitHub template + Vercel Deploy Button combination is the most user-friendly approach and exactly what you're looking for. When you want to start a new project, just click "Use this template" on GitHub, then click the Deploy Button to get it live on Vercel in minutes!

We don’t currently have any published resources on how to make a template, but you create a template from your repo on Github in the mean time.
Thanks! Is there a way to clone a github repo of a sanity project to create another quick sanity projet based on this one?
You’re in luck! This guide was literally published today and can help you create a template!
Nice! Thanks for keeping me updated. I’ll check that asap! :saluting_face:

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?