sanity-io/sanity-template-nextjs-clean

A clean Next.js template with a native authoring experience

A minimal Next.js site with Sanity Studio

This starter is a statically generated site that uses Next.js for the frontend and Sanity to handle its content. It comes with a native Sanity Studio that offers features like real-time collaboration, instant side-by-side content previews, and intuitive editing.

The Studio connects to Sanity Content Lake, which gives you hosted content APIs with a flexible query language, on-demand image transformations, powerful patching, and more. You can use this starter to kick-start a clean slate site or learn these technologies.

Note

This starter uses the /pages directory for Next.js routing.

The template will be migrated to the currently experimental /app directory when Vercel announce that it is production ready.

Table of Contents

• Features
• Table of Contents
• Project Overview
  • Important files and folders
• Configuration
  • Step 1. Set up the environment
  • Step 2. Set up the project locally
  • Step 3. Run Next.js locally in development mode
  • Step 4. Deploy to production
• Questions and Answers
  • It doesn't work! Where can I get help?
  • How can I remove the "Next steps" block from my app?
  • How can I set up Incremental Static Revalidation?
• Next steps

Project Overview

Example Studio with preview

Important files and folders

File(s)	Description
sanity.config.ts	Config file for Sanity Studio
sanity.cli.ts	Config file for Sanity CLI
/pages/index.tsx	Landing page for /.
/pages/studio/[[...index]].tsx	Where Sanity Studio is mounted
/pages/api/draft.ts	Serverless route for triggering Draft mode
/sanity/schemas.ts	Where Sanity Studio gets its content types from
/sanity/env.ts	Configuration for the Sanity project and dataset
/sanity/schemas.ts	Where Sanity Studio gets its content types from
/sanity/lib/client.ts	Sanity client configured based on env.ts
/sanity/lib/image.ts	Sanity image builder - unused in this template, but is needed to render Sanity images
tailwind.config.js	Tailwind config. Only applies to files listed under content

All pages are wrapped in pages/_document.tsx and pages/_app.tsx.

Configuration

Step 1. Set up the environment

Use the Deploy Button below. It will let you deploy the starter using Vercel as well as connect it to your Sanity Content Lake using the Sanity Vercel Integration.

Step 2. Set up the project locally

Clone the repository that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:

npx vercel link

Download the environment variables needed to connect Next.js and the Studio to your Sanity project:

npx vercel env pull

This will create a git-ignored .env file with environment variables that will be used for local development.

Step 3. Run Next.js locally in development mode

npm install && npm run dev

When you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.

Your blog should be up and running on http://localhost:3000! You can create and edit content on http://localhost:3000/studio.

Step 4. Deploy to production

To deploy your changes to production you use git:

git add .
git commit
git push

Alternatively, you can deploy without a git hosting provider using the Vercel CLI:

npx vercel --prod

Questions and Answers

It doesn't work! Where can I get help?

In case of any issues or questions, you can post:

• GitHub Discussions for Next.js
• Sanity's GitHub Discussions
• Sanity's Community Slack

How can I remove the "Next steps" block from my app?

You can remove it by deleting intro-template, and removing IntroTemplate usage from pages/index.tsx

Next steps

• Setup live preview
• Join our Slack community to ask questions and get help
• How to edit my content structure?
• How to query content?
• What is content modelling?

sanity-template-nextjs-clean's Issues

Setup Live Preview link broken

In the next steps the link to setup the live preview is broken.

From this page - https://github.com/sanity-io/sanity-template-nextjs-clean#next-steps linking to https://github.com/sanity-io/sanity-template-nextjs-clean/blob/main/docs/studio-preview.md

App dir

Now that app dir is out of beta, are there any plans to update this template? Thanks!

app directory is missing

I see this repo hasn't been updated in 4 months. I trying to learn Sanity, like to know some of the basics before go any further with it. Unfortunately, the YT tutorials are already out of date unless I set the API for the date of tutorials.

sanity deploy command error

Hi, I tried to run sanity deploy but have this error

Error: [vite]: Rollup failed to resolve import "~/lib/sanity.api" from "D:/Projects/renz.dev/reminder/sanity.config.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external

Stuck on the new project - vercel configuration

Hi,

I'm trying to use the link "deploy" from the guide on the read.me page of this repo. Unfortunately, I'm stuck at adding integrations where I think there is something wrong with Sanity. I've been trying several times and I'm able to create a repo on github and create a project in sanity, but it doesn't go past the following:

Also, I can see that it creates an instance in vercel.

Is there anything I've to do extra to have this set up?

How to run sanity deploy?

I want to deploy the studio to its own url, but
there is no deploy in the package.json

"scripts": {
    "build": "next build",
    "dev": "next",
    "format": "npx prettier --write . --ignore-path .gitignore",
    "lint": "next lint -- --ignore-path .gitignore",
    "lint:fix": "npm run format && npm run lint -- --fix",
    "start": "next start",
    "type-check": "tsc --noEmit"
  },

If I run sanity deploy in the root folder
I get an error

Error: [vite]: Rollup failed to resolve import "~/lib/sanity.api" from "/folder".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

What's the way to do that with this setup?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

---

Using a curated preset maintained by

Sanity: The Composable Content Cloud

---

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
github-actions	tibdex/github-app-token

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• chore(deps): update non-major (@portabletext/react, @sanity/client, @sanity/vision, @tailwindcss/typography, @types/react, autoprefixer, eslint, eslint-config-next, peter-evans/create-pull-request, postcss, prettier, prettier-plugin-packagejson, prettier-plugin-tailwindcss, react, react-dom, sanity, styled-components, tailwindcss, tibdex/github-app-token, typescript)
• chore(deps): update actions/cache action to v4
• chore(deps): update dependency @sanity/demo to v2
• chore(deps): update dependency eslint-plugin-simple-import-sort to v12
• chore(deps): update dependency next-sanity to v8
• chore(deps): update dependency next-sanity to v9
• chore(deps): lock file maintenance
• 🔐 Create all pending approval PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency next to v14.1.1 [security]
• chore(deps): update dependency next-sanity to v6
• chore(deps): update dependency next-sanity to v7
• chore(deps): update dependency sanity-plugin-iframe-pane to v3
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v4
• actions/setup-node v4

.github/workflows/lock.yml

• dessant/lock-threads v5@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771

.github/workflows/prettier.yml

• actions/checkout v4
• actions/setup-node v4
• actions/cache v3
• tibdex/github-app-token v2@3beb63f4bd073e61482598c45c71c1019b59b73a
• peter-evans/create-pull-request v6@b1ddad2c994a25fbc81a28b3ec0e368bb2021c50

npm

package.json

• @portabletext/react 3.0.11
• @sanity/client 6.12.3
• @sanity/demo 1.0.2
• @sanity/vision 3.28.0
• @tailwindcss/typography 0.5.10
• next 14.1.0
• next-sanity 5.5.11
• react 18.2.0
• react-dom 18.2.0
• sanity 3.28.0
• sanity-plugin-iframe-pane 2.6.1
• styled-components 6.1.8
• @types/react 18.2.55
• autoprefixer 10.4.17
• eslint 8.56.0
• eslint-config-next 14.1.0
• eslint-plugin-simple-import-sort 10.0.0
• postcss 8.4.35
• prettier 3.2.5
• prettier-plugin-packagejson 2.4.10
• prettier-plugin-tailwindcss 0.5.11
• tailwindcss 3.4.1
• typescript 5.3.3
• node >=16

---

• Check this box to trigger a request for Renovate to run again on this repository