The official Sanity toolkit for Next.js

next-sanity

The all-in-one Sanity toolkit for production-grade content-editable Next.js applications.

• Next.js + Sanity quick start: Get a working Next.js + Sanity project running in minutes, from creating a Sanity project to querying your first content.
• next-sanity overview: Explore everything the next-sanity package has to offer.
• Configure the next-sanity client: Set up the Sanity client with environment variables, CDN caching, and per-request overrides for different fetching contexts.
• Query with GROQ: Make type safe queries with GROQ using the included Sanity client.
• Visual editing and live preview: Enable click-to-edit overlays and real-time content updates in the Presentation Tool using Draft Mode, defineLive, and the <VisualEditing /> component.
• Caching and revalidation: Control content freshness with time-based, tag-based, and path-based revalidation strategies for applications that need fine-grained cache management.
• Reference documentation: Browse the full next-sanity API reference for detailed type signatures and configuration options.

Quicklinks: Sanity docs | Next.js docs | Clean starter template | Fully-featured starter template

Table of contents

• Quick Start
• Manual installation
  • Install next-sanity
  • Optional: peer dependencies for embedded Sanity Studio
• Migration guides
• License

Quick Start

Instantly create a new free Sanity project – or link to an existing one – from the command line and connect it to your Next.js application by the following terminal command in your Next.js project folder:

npx sanity@latest init

If you do not yet have a Sanity account you will be prompted to create one. This command will create the basic utilities required to query content from Sanity, and optionally embed Sanity Studio — a configurable content management system — at a route in your Next.js application. See the Embedded Sanity Studio guide.

Manual installation

If you do not yet have a Next.js application, you can create one with the following command:

npx create-next-app@latest

This README assumes you have chosen all of the default options, but should be fairly similar for most bootstrapped Next.js projects.

Install next-sanity

Inside your Next.js application, run the following command in the package manager of your choice to install the next-sanity toolkit:

npm install next-sanity @sanity/image-url

yarn add next-sanity @sanity/image-url

pnpm install next-sanity @sanity/image-url

bun install next-sanity @sanity/image-url

This also installs @sanity/image-url for [On-Demand Image Transformations][image-url] to render images from Sanity's CDN.

Optional: peer dependencies for embedded Sanity Studio

When using npm newer than v7, or pnpm newer than v8, you should end up with needed dependencies like sanity and styled-components when you installed next-sanity. In yarn v1 you can use install-peerdeps:

npx install-peerdeps --yarn next-sanity

Migration guides

[!IMPORTANT] You're looking at the README for v12, the README for v11 is available here as well as a migration guide.

• From v11 to v12
• From v10 to v11
• From v9 to v10
• From v8 to v9
• From v7 to v8
• From v6 to v7
• From v5 to v6
• From v4 to v5
  • app-router
  • pages-router
• From <0.4 to v4

License

MIT-licensed. See LICENSE.