sanity-io / next-sanity
★ 950A skill package that teaches your agent 9 capabilities — every one documented and browsable below, no GitHub required · by sanity-io.
Each skill below is one capability this package teaches your agent. Install the whole package, or open a skill to install just that one.
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express…
1 file — installable on its own
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization,…
20 files — installable on its own
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
1 file — installable on its own
Node.js package manager with strict dependency resolution. Use when running pnpm specific commands, configuring workspaces, or managing dependencies with…
16 files — installable on its own
Migrate next-sanity apps to cacheComponents - strict mode, three-layer component pattern, explicit perspective/stega/includeDrafts, prop-drilling conventions
6 files — installable on its own
Bundle TypeScript and JavaScript libraries with blazing-fast speed powered by Rolldown. Use when building libraries, generating type declarations, bundling for…
43 files — installable on its own
Build system for JavaScript/TypeScript monorepos. Turborepo caches task outputs and runs tasks in parallel based on dependency graph.
37 files — installable on its own
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
50 files — installable on its own
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test…
19 files — installable on its own
next-sanity<!-- omit in toc -->
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-sanityoverview: Explore everything thenext-sanitypackage 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-sanityAPI reference for detailed type signatures and configuration options.
Quicklinks: Sanity docs | Next.js docs | Clean starter template | Fully-featured starter template
Table of contents<!-- omit in toc -->
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 initIf 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@latestThis 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-urlyarn add next-sanity @sanity/image-urlpnpm install next-sanity @sanity/image-urlbun install next-sanity @sanity/image-urlThis 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-sanityMigration guides
- From
v12tov13 - From
v11tov12 - From
v10tov11 - From
v9tov10 - From
v8tov9 - From
v7tov8 - From
v6tov7 - From
v5tov6 - From
v4tov5 - From
<0.4tov4
License
MIT-licensed. See LICENSE.
Install the whole package (9 skills):
npx skills add https://github.com/sanity-io/next-sanityOr install a single skill:
npx skills add https://github.com/sanity-io/next-sanity --skill <name>Pick the skill name from the Skills tab — each entry there installs independently.