next-sanity

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.

Similar packages

Other packages similar to next-sanity

sanity

The sanity package is the official JavaScript client for Sanity.io. It provides a more general-purpose API for interacting with Sanity, suitable for use in various JavaScript environments, not just Next.js. Compared to next-sanity, it requires more setup for Next.js-specific features like server-side rendering.

groq-js

groq-js is a JavaScript implementation of GROQ, the query language used by Sanity. It allows you to run GROQ queries directly in JavaScript. While it doesn't provide direct integration with Next.js, it can be used alongside other tools to query Sanity data in a more flexible way compared to next-sanity.