next-sanity 9.4.2 → 9.4.4

package/README.md

@@ -1,147 +1,225 @@
 # next-sanity<!-- omit in toc -->
 
-The official [Sanity.io][sanity] toolkit for Next.js apps.
-
-> [!IMPORTANT]
-> You're looking at the README for v9, the README for [v8 is available here](https://github.com/sanity-io/next-sanity/tree/v8?tab=readme-ov-file#next-sanity) as well as an [migration guide][migrate-v8-to-v9].
+The all-in-one [Sanity][sanity] toolkit for production-grade content-editable Next.js applications.
 
 **Features:**
 
-- The [Sanity Client][sanity-client] fully compatible with [Next.js’ caching features][next-cache]
-- [Live Preview mode][preview-kit]
-- [Visual Editing](#visual-editing-with-content-source-maps)
-- [GROQ syntax highlighting][groq-syntax-highlighting]
-- Embedded Sanity Studio
-- Block content with [Portable Text][portable-text]
+- [Sanity Client][sanity-client] for queries and mutations, fully compatible with the [Next.js cache][next-cache]
+- [Visual Editing][visual-editing] for interactive live preview of draft content
+- [Embedded Sanity Studio][sanity-studio], a deeply-configurable content editing dashboard
+- [GROQ][groq-syntax-highlighting] for powerful content querying with type generation and syntax highlighting
+- [Portable Text][portable-text] for rendering rich text and block content
+
+**Quicklinks**: [Sanity docs][sanity-docs] | [Next.js docs][next-docs] | [Clean starter template][sanity-next-clean-starter] | [Fully-featured starter template][sanity-next-featured-starter]
 
-## Table of contents
+## Table of contents<!-- omit in toc -->
 
-- [Table of contents](#table-of-contents)
 - [Installation](#installation)
-  - [Common dependencies](#common-dependencies)
-  - [Peer dependencies for embedded Sanity Studio](#peer-dependencies-for-embedded-sanity-studio)
-- [Usage](#usage)
-  - [Quick start](#quick-start)
-  - [App Router Components](#app-router-components)
-  - [Page Router Components](#page-router-components)
+- [Quick Start](#quick-start)
+- [Manual installation](#manual-installation)
+  - [Install `next-sanity`](#install-next-sanity)
+  - [Optional: peer dependencies for embedded Sanity Studio](#optional-peer-dependencies-for-embedded-sanity-studio)
+  - [Manual configuration](#manual-configuration)
+  - [Write GROQ queries](#write-groq-queries)
+  - [Generate TypeScript Types](#generate-typescript-types)
+- [Query content from Sanity Content Lake](#query-content-from-sanity-content-lake)
+  - [Configuring Sanity Client](#configuring-sanity-client)
+  - [Fetching in App Router Components](#fetching-in-app-router-components)
+  - [Fetching in Page Router Components](#fetching-in-page-router-components)
   - [Should `useCdn` be `true` or `false`?](#should-usecdn-be-true-or-false)
   - [How does `apiVersion` work?](#how-does-apiversionwork)
-- [Cache revalidation](#cache-revalidation)
+- [Caching and revalidation](#caching-and-revalidation)
+  - [`sanityFetch()` helper function](#sanityfetch-helper-function)
   - [Time-based revalidation](#time-based-revalidation)
-  - [Tag-based revalidation webhook](#tag-based-revalidation-webhook)
-  - [Slug-based revalidation webhook](#slug-based-revalidation-webhook)
-  - [Working example implementation](#working-example-implementation)
+  - [Path-based revalidation](#path-based-revalidation)
+  - [Tag-based revalidation](#tag-based-revalidation)
   - [Debugging caching and revalidation](#debugging-caching-and-revalidation)
-- [Preview](#preview)
-  - [Using Perspectives](#using-perspectives)
-  - [Live Preview](#live-preview)
-  - [Using `draftMode()` to de/activate previews](#using-draftmode-to-deactivate-previews)
-    - [Using `cache` and `revalidation` at the same time](#using-cache-and-revalidation-at-the-same-time)
-- [Visual Editing with Content Source Maps](#visual-editing-with-content-source-maps)
+  - [Example implementation](#example-implementation)
+- [Visual Editing](#visual-editing)
 - [Embedded Sanity Studio](#embedded-sanity-studio)
-  - [Configuring Sanity Studio on a route](#configuring-sanity-studio-on-a-route)
-  - [Manual installation](#manual-installation)
+  - [Creating a Studio route](#creating-a-studio-route)
+  - [Automatic installation of embedded Studio](#automatic-installation-of-embedded-studio)
+  - [Manual installation of embedded Studio](#manual-installation-of-embedded-studio)
   - [Studio route with App Router](#studio-route-with-app-router)
-  - [Lower level control with `StudioProvider` and `StudioLayout`](#lower-level-control-with-studioprovider-and-studiolayout)
+  - [Lower-level control with `StudioProvider` and `StudioLayout`](#lower-level-control-with-studioprovider-and-studiolayout)
 - [Migration guides](#migration-guides)
 - [License](#license)
 
 ## Installation
 
-For basic functionality, run the following command in the package manager of your choice:
+## 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_:
 
 ```bash
-npm install next-sanity
+npx sanity@latest init
 ```
 
+If you do not yet have a Sanity account you will be prompted to create one. This command will create 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](#embedded-sanity-studio) section.
+
+## Manual installation
+
+If you do not yet have a Next.js application, you can create one with the following command:
+
 ```bash
-yarn add next-sanity
+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:
+
 ```bash
-pnpm install next-sanity
+npm install next-sanity @sanity/image-url
 ```
 
 ```bash
-bun install next-sanity
+yarn add next-sanity @sanity/image-url
 ```
 
-### Common dependencies
-
-Building with Sanity and Next.js, you‘re likely to want libraries to handle [On-Demand Image Transformations][image-url] and [Visual Editing](https://www.sanity.io/docs/loaders-and-overlays):
-
 ```bash
-npm install @sanity/image-url @sanity/react-loader
+pnpm install next-sanity @sanity/image-url
 ```
 
 ```bash
-yarn add @sanity/image-url @sanity/react-loader
+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`:
+
 ```bash
-pnpm install @sanity/image-url @sanity/react-loader
+npx install-peerdeps --yarn next-sanity
 ```
 
+### Manual configuration
+
+The `npx sanity@latest init` command offers to write some configuration files for your Next.js application. Most importantly is one that writes your chosen Sanity project ID and dataset name to your local environment variables. Note that unlike access tokens, the project ID and dataset name are **not** considered sensitive information.
+
+**Create** this file at the root of your Next.js application if it does not already exist.
+
 ```bash
-bun install @sanity/image-url @sanity/react-loader
+# .env.local
+
+NEXT_PUBLIC_SANITY_PROJECT_ID=<your-project-id>
+NEXT_PUBLIC_SANITY_DATASET=<your-dataset-name>
+```
+
+**Create** a file to access and export these values
+
+```ts
+// ./src/sanity/env.ts
+
+export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!
+export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!
+
+// Values you may additionally want to configure globally
+export const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2024-07-11'
+```
+
+Remember to add these environment variables to your hosting provider's environment as well.
+
+### Write GROQ queries
+
+`next-sanity` exports the `groq` template literal which will give you syntax highlighting in [VS Code with the Sanity extension installed][vs-code-extension]. It’s also required for GROQ query result type generation with [Sanity TypeGen][sanity-typegen].
+
+```ts
+// ./src/sanity/lib/queries.ts
+
+import {groq} from 'next-sanity'
+
+export const POSTS_QUERY = groq`*[_type == "post" && defined(slug.current)][0...12]{
+  _id, title, slug
+}`
+
+export const POST_QUERY = groq`*[_type == "post" && slug.current == $slug][0]{
+  title, body, mainImage
+}`
 ```
 
-### Peer dependencies for embedded Sanity Studio
+### Generate TypeScript Types
 
-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 `npm install next-sanity`. It also works in `yarn` `v1` using `install-peerdeps`:
+You can use [Sanity TypeGen to generate TypeScript types][sanity-typegen] for your schema types and GROQ query results in your Next.js application. It should be readily available if you have used `sanity init` and chosen the embedded Studio.
+
+> [!TIP]
+> Sanity TypeGen will [create Types for queries][sanity-typegen-queries] that are assigned to a variable and use the `groq` template literal.
+
+If your Sanity Studio schema types are in a different project or repository, you can [configure Sanity TypeGen to write types to your Next.js project][sanity-typegen-monorepo].
+
+**Run** the following command in your terminal to create a `schema.json` file at the root of your project.
 
 ```bash
-npx install-peerdeps --yarn next-sanity
+# Run this each time your schema types change
+npx sanity@latest schema extract
 ```
 
-## Usage
+**Run** the following command in your terminal to generate TypeScript types and create a `sanity.types.ts` file at the root of your project.
 
-There are different ways to integrate Sanity with Next.js depending on your usage and needs for features like Live Preview, tag-based revalidation, and so on. It's possible to start simple and add more functionality as your project progresses.
+```bash
+# Run this each time your schema types or GROQ queries change
+npx sanity@latest typegen generate
+```
 
-### Quick start
+You can also allocate these commands to an npm script in your Next.js project's `package.json`:
+
+```json
+  "scripts": {
+    "predev": "npm run typegen",
+    "dev": "next",
+    "prebuild": "npm run typegen",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "typegen": "sanity schema extract && sanity typegen generate"
+  },
+```
+
+## Query content from Sanity Content Lake
+
+Sanity content is typically queried with GROQ queries from a configured Sanity Client. [Sanity also supports GraphQL][sanity-graphql].
+
+### Configuring Sanity Client
 
-To start running GROQ queries with `next-sanity`, we recommend creating a `client.ts` file:
+To interact with Sanity content in a Next.js application, we recommend creating a `client.ts` file:
 
 ```ts
-// ./src/utils/sanity/client.ts
+// ./src/sanity/lib/client.ts
 import {createClient} from 'next-sanity'
 
-const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID // "pv8y60vp"
-const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET // "production"
-const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-05-03'
+import {apiVersion, dataset, projectId} from '../env'
 
 export const client = createClient({
   projectId,
   dataset,
   apiVersion, // https://www.sanity.io/docs/api-versioning
-  useCdn: true, // if you're using ISR or only static generation at build time then you can set this to `false` to guarantee no stale content
+  useCdn: true, // Set to false if statically generating pages, using ISR or tag-based revalidation
 })
 ```
 
-### App Router Components
+### Fetching in App Router Components
 
-To fetch data in a React Server Component using the [App Router][app-router]:
+To fetch data in a React Server Component using the [App Router][app-router] you can await results from the Sanity Client inside a server component:
 
 ```tsx
 // ./src/app/page.tsx
-import {client} from '@/src/utils/sanity/client'
 
-type Post = {
-  _id: string
-  title?: string
-  slug?: {
-    current: string
-  }
-}
+import {client} from '@/sanity/lib/client'
+import {POSTS_QUERY} from '@/sanity/lib/queries'
+import {POSTS_QUERYResult} from '../../sanity.types'
 
-export async function PostIndex() {
-  const posts = await client.fetch<Post[]>(`*[_type == "post"]`)
+export default async function PostIndex() {
+  const posts = await client.fetch<POSTS_QUERYResult>(POSTS_QUERY)
 
   return (
     <ul>
       {posts.map((post) => (
         <li key={post._id}>
-          <a href={post?.slug.current}>{post?.title}</a>
+          <a href={`/posts/${post?.slug.current}`}>{post?.title}</a>
         </li>
       ))}
     </ul>
@@ -149,34 +227,29 @@ export async function PostIndex() {
 }
 ```
 
-### Page Router Components
+### Fetching in Page Router Components
 
-If you're using the [Pages Router][pages-router], then you can do the following from a page component:
+If you're using the [Pages Router][pages-router] you can await results from Sanity Client inside a `getStaticProps` function:
 
 ```tsx
 // ./src/pages/index.tsx
-import {client} from '@/src/utils/sanity/client'
 
-type Post = {
-  _id: string
-  title?: string
-  slug?: {
-    current: string
-  }
-}
+import {client} from '@/sanity/lib/client'
+import {POSTS_QUERY} from '@/sanity/lib/queries'
+import {POSTS_QUERYResult} from '../../sanity.types'
 
 export async function getStaticProps() {
-  return await client.fetch<Post[]>(`*[_type == "post"]`)
-}
+  const posts = await client.fetch<POSTS_QUERYResult>(POSTS_QUERY)
 
-export async function HomePage(props) {
-  const {posts} = props
+  return {posts}
+}
 
+export default async function PostIndex({posts}) {
   return (
     <ul>
       {posts.map((post) => (
         <li key={post._id}>
-          <a href={post?.slug.current}>{post?.title}</a>
+          <a href={`/posts/${post?.slug.current}`}>{post?.title}</a>
         </li>
       ))}
     </ul>
@@ -186,14 +259,14 @@ export async function HomePage(props) {
 
 ### Should `useCdn` be `true` or `false`?
 
-You might notice that you have to set the `useCdn` to `true` or `false` in the client configuration. Sanity offers [caching on a CDN for content queries][cdn]. Since Next.js often comes with its own caching, it might not be necessary, but there are some exceptions.
+You might notice that you have to set the `useCdn` to `true` or `false` in the client configuration. Sanity offers [caching on a CDN for queries][cdn]. Since Next.js has its own caching, using the Sanity CDN might not be necessary, but there are some exceptions.
 
-The general rule is that `useCdn` should be `true` when:
+In general, set `useCdn` to `true` when:
 
 - Data fetching happens client-side, for example, in a `useEffect` hook or in response to a user interaction where the `client.fetch` call is made in the browser.
-- Server-Side Rendered (SSR) data fetching is dynamic and has a high number of unique requests per visitor, for example, a "For You" feed.
+- Server-side rendered (SSR) data fetching is dynamic and has a high number of unique requests per visitor, for example, a "For You" feed.
 
-And it makes sense to set `useCdn` to `false` when:
+Set `useCdn` to `false` when:
 
 - Used in a static site generation context, for example, `getStaticProps` or `getStaticPaths`.
 - Used in an ISR on-demand webhook responder.
@@ -202,152 +275,126 @@ And it makes sense to set `useCdn` to `false` when:
 
 ### How does `apiVersion` work?
 
-Sanity uses [date-based API versioning][api-versioning]. The tl;dr is that you can send the implementation date in a YYYY-MM-DD format, and it will automatically fall back on the latest API version of that time. Then, if a breaking change is introduced later, it won't break your application and give you time to test before upgrading (by setting the value to a date past the breaking change).
+Sanity uses [date-based API versioning][api-versioning]. You can configure the date in a `YYYY-MM-DD` format, and it will automatically fall back on the latest API version of that time. Then, if a breaking change is introduced later, it won't break your application and give you time to test before upgrading.
 
-## Cache revalidation
+## Caching and revalidation
 
-This toolkit includes the [`@sanity/client`][sanity-client] that fully supports Next.js’ `fetch` based features, [including the `revalidateTag` API][revalidate-tag]. It‘s _not necessary_ to use the `React.cache` method like with many other third-party SDKs. This gives you tools to ensure great performance while preventing stale content in a way that's native to Next.js.
+This toolkit includes the [`@sanity/client`][sanity-client] which fully supports Next.js `fetch` based features for caching and revalidation. This ensures great performance while preventing stale content in a way that's native to Next.js.
 
-> **Note**
->
-> Some hosts (like Vercel) will keep the content cache in a dedicated data layer and not part of the static app bundle, which means that it might not be revalidated from re-deploying the app like it has done earlier. We recommend reading up on [caching behavior in the Next.js docs][next-cache].
+> [!NOTE]
+> Some hosts (like Vercel) will keep the content cache in a dedicated data layer and not part of the static app bundle, which means re-deploying the app will not purge the cache. We recommend reading up on [caching behavior in the Next.js docs][next-cache].
 
-### Time-based revalidation
+### `sanityFetch()` helper function
 
-Time-based revalidation is best for less complex cases and where content updates don't need to be immediately available.
+It can be beneficial to set revalidation defaults for all queries. In all of the following examples, a `sanityFetch()` helper function is used for this purpose.
 
-```tsx
-// ./src/app/home/layout.tsx
-import { client } from '@/src/utils/sanity/client'
-import { PageProps } from '@/src/app/(page)/Page.tsx'
-
-type HomePageProps = {
-  _id: string
-  title?: string
-  navItems: PageProps[]
-}
+While this function is written to accept _both_ Next.js caching options `revalidate` and `tags`, your application should only rely on one. For this reason, if `tags` are supplied, the `revalidate` setting will be set to `false` (cache indefinitely) and you will need to bust the cache for these pages using [`revalidateTag()`](#tag-based-revalidation).
 
-export async function HomeLayout({children}) {
-  const home = await client.fetch<HomePageProps>(`*[_id == "home"][0]{...,navItems[]->}`,
-    {},
-    {next: {
-      revalidate: 3600 // look for updates to revalidate cache every hour
-    }}
-  })
+In short:
 
-  return (
-    <main>
-      <nav>
-        <span>{home?.title}</span>
-        <ul>
-        {home?.navItems.map(navItem => ({
-          <li key={navItem._id}><a href={navItem?.slug?.current}>{navItem?.title}</a></li>
-        }))}
-        </ul>
-      </nav>
-      {children}
-    </main>
-  )
-}
-```
-
-### Tag-based revalidation webhook
-
-Tag-based or on-demand revalidation gives you more fine-grained and precise control for when to revalidate content. This is great for pulling content from the same source across components and when content freshness is important.
-
-Below is an example configuration that ensures the client is only bundled server-side and comes with some defaults. It‘s also easier to adapt for Live Preview functionality (see below).
-
-If you're planning to use `revalidateTag`, then remember to set up the webhook (see code below) as well.
+- Time-based `revalidate` is good enough for most applications.
+  - Any page can be automatically purged from the cache using [`revalidatePath()`](#path-based-revalidation).
+- Content-based `tags` will give you more fine-grained control for complex applications.
+  - Pages cached by tags must be purged using [`revalidateTag()`](#tag-based-revalidation).
 
 ```ts
-// ./src/utils/sanity/client.ts
-import 'server-only'
+// ./src/sanity/lib/client.ts
 
 import {createClient, type QueryParams} from 'next-sanity'
 
-const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID // "pv8y60vp"
-const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET // "production"
-const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-05-03'
+import {apiVersion, dataset, projectId} from '../env'
 
-const client = createClient({
+export const client = createClient({
   projectId,
   dataset,
   apiVersion, // https://www.sanity.io/docs/api-versioning
-  useCdn: false,
+  useCdn: true, // Set to false if statically generating pages, using ISR or tag-based revalidation
 })
 
 export async function sanityFetch<QueryResponse>({
   query,
   params = {},
-  tags,
+  revalidate = 60, // default revalidation time in seconds
+  tags = [],
 }: {
   query: string
   params?: QueryParams
+  revalidate?: number | false
   tags?: string[]
 }) {
   return client.fetch<QueryResponse>(query, params, {
     next: {
-      //revalidate: 30, // for simple, time-based revalidation
+      revalidate: tags.length ? false : revalidate, // for simple, time-based revalidation
       tags, // for tag-based revalidation
     },
   })
 }
 ```
 
-Now you can import the `sanityFetch()` function in any component within the `app` folder, and specify for which document types you want it to revalidate:
+Be aware that you can get errors if you use `cache` and `revalidate` configurations for Next.js together. See the [Next.js documentation on revalidation][next-revalidate-docs].
+
+### Time-based revalidation
+
+Time-based revalidation is often good enough for the majority of applications.
+
+Increase the `revalidate` setting for longer-lived and less frequently modified content.
 
 ```tsx
-// ./src/app/home/layout.tsx
-import { sanityFetch } from '@/src/utils/sanity/client'
-import { PageProps } from '@/src/app/(page)/Page.tsx'
-
-type HomePageProps = {
-  _id: string
-  title?: string
-  navItems: PageProps[]
-}
+// ./src/app/pages/index.tsx
 
-export async function HomeLayout({children}) {
-  // revalidate if there are changes to either the home document or to a page document (since they're referenced to in navItems)
-  const home = await sanityFetch<HomePageProps>({
-    query: `*[_id == "home"][0]{...,navItems[]->}`,
-    tags: ['home', 'page']
-    })
+import {sanityFetch} from '@/sanity/lib/client'
+import {POSTS_QUERY} from '@/sanity/lib/queries'
+import {POSTS_QUERYResult} from '../../sanity.types'
+
+export default async function PostIndex() {
+  const posts = await sanityFetch<POSTS_QUERYResult>({
+    query: POSTS_QUERY,
+    revalidate: 3600, // update cache at most once every hour
+  })
 
   return (
-    <main>
-      <nav>
-        <span>{home?.title}</span>
-        <ul>
-        {home?.navItems.map(navItem => ({
-          <li key={navItem._id}><a href={navItem?.slug?.current}>{navItem?.title}</a></li>
-        }))}
-        </ul>
-      </nav>
-      {children}
-    </main>
+    <ul>
+      {posts.map((post) => (
+        <li key={post._id}>
+          <a href={`/posts/${post?.slug.current}`}>{post?.title}</a>
+        </li>
+      ))}
+    </ul>
   )
 }
 ```
 
-In order to get `revalidateTag` to work you need to set up an API route in your Next.js app that handles an incoming request, typically made by [a GROQ-Powered Webhook][groq-webhook].
+### Path-based revalidation
 
-You can use this [template][webhook-template] to quickly configure the webhook for your Sanity project.
+For on-demand revalidation of individual pages, Next.js has a `revalidatePath()` function. You can create an API route in your Next.js application to execute it, and [a GROQ-powered webhook][groq-webhook] in your Sanity Project to instantly request it when content is created, updated or deleted.
 
-The code example below uses the built-in `parseBody` function to validate that the request comes from your Sanity project (using a shared secret + looking at the request headers). Then it looks at the document type information in the webhook payload and matches that against the revalidation tags in your app:
+**Create** a new environment variable `SANITY_REVALIDATE_SECRET` with a random string that is shared between your Sanity project and your Next.js application. This is considered sensitive and should not be committed to your repository.
+
+```bash
+# .env.local
+
+SANITY_REVALIDATE_SECRET=<some-random-string>
+```
+
+**Create** a new API route in your Next.js application
+
+The code example below uses the built-in `parseBody` function to validate that the request comes from your Sanity project (using a shared secret and looking at the request headers). Then it looks at the document type information in the webhook payload and matches that against the revalidation tags in your application
 
 ```ts
-// ./src/app/api/revalidate/route.ts
-import {revalidateTag} from 'next/cache'
+// ./src/app/api/revalidate-path/route.ts
+
+import {revalidatePath} from 'next/cache'
 import {type NextRequest, NextResponse} from 'next/server'
 import {parseBody} from 'next-sanity/webhook'
 
-type WebhookPayload = {
-  _type: string
-}
+type WebhookPayload = {path?: string}
 
 export async function POST(req: NextRequest) {
   try {
+    if (!process.env.SANITY_REVALIDATE_SECRET) {
+      return new Response('Missing environment variable SANITY_REVALIDATE_SECRET', {status: 500})
+    }
+
     const {isValidSignature, body} = await parseBody<WebhookPayload>(
       req,
       process.env.SANITY_REVALIDATE_SECRET,
@@ -356,18 +403,14 @@ export async function POST(req: NextRequest) {
     if (!isValidSignature) {
       const message = 'Invalid signature'
       return new Response(JSON.stringify({message, isValidSignature, body}), {status: 401})
-    }
-
-    if (!body?._type) {
+    } else if (!body?.path) {
       const message = 'Bad Request'
       return new Response(JSON.stringify({message, body}), {status: 400})
     }
 
-    // If the `_type` is `page`, then all `client.fetch` calls with
-    // `{next: {tags: ['page']}}` will be revalidated
-    revalidateTag(body._type)
-
-    return NextResponse.json({body})
+    revalidatePath(body.path)
+    const message = `Updated route: ${body.path}`
+    return NextResponse.json({body, message})
   } catch (err) {
     console.error(err)
     return new Response(err.message, {status: 500})
@@ -375,27 +418,84 @@ export async function POST(req: NextRequest) {
 }
 ```
 
-You can choose to match tags based on any field or expression since GROQ-Powered Webhooks allow you to freely define the payload.
+**Create** a new GROQ-powered webhook in your Sanity project.
+
+You can [copy this template][webhook-template-revalidate-path] to quickly add the webhook to your Sanity project.
+
+The Projection uses [GROQ's `select()` function][groq-functions] to dynamically create paths for nested routes like `/posts/[slug]`, you can extend this example your routes and other document types.
+
+```groq
+{
+  "path": select(
+    _type == "post" => "/posts/" + slug.current,
+    "/" + slug.current
+  )
+}
+```
+
+> [!TIP]
+> If you wish to revalidate _all routes_ on demand, create an API route that calls `revalidatePath('/', 'layout')`
+
+### Tag-based revalidation
 
-### Slug-based revalidation webhook
+Tag-based revalidation is preferable for instances where many pages are affected by a single document being created, updated or deleted.
 
-If you want on-demand revalidation, without using tags, you'll have to do this by targeting the URLs/slugs for the pages you want to revalidate. If you have nested routes, you will need to adopt the logic to accommodate for that. For example, using `_type` to determine the first segment: `/${body?._type}/${body?.slug.current}`.
+For on-demand revalidation of many pages, Next.js has a `revalidateTag()` function. You can create an API route in your Next.js application to execute it, and [a GROQ-powered webhook][groq-webhook] in your Sanity Project to instantly request it when content is created, updated or deleted.
+
+```tsx
+// ./src/app/pages/index.tsx
+
+import {sanityFetch} from '@/sanity/lib/client'
+import {POSTS_QUERY} from '@/sanity/lib/queries'
+import {POSTS_QUERYResult} from '../../sanity.types'
+
+export default async function PostIndex() {
+  const posts = await sanityFetch<POSTS_QUERYResult>({
+    query: POSTS_QUERY,
+    tags: ['post', 'author'], // revalidate all pages with the tags 'post' and 'author'
+  })
+
+  return (
+    <ul>
+      {posts.map((post) => (
+        <li key={post._id}>
+          <a href={`/posts/${post?.slug.current}`}>{post?.title}</a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+**Create** a new environment variable `SANITY_REVALIDATE_SECRET` with a random string that is shared between your Sanity project and your Next.js application. This is considered sensitive and should not be committed to your repository.
+
+```bash
+# .env.local
+
+SANITY_REVALIDATE_SECRET=<some-random-string>
+```
+
+**Create** a new API route in your Next.js application
+
+The code example below uses the built-in `parseBody` function to validate that the request comes from your Sanity project (using a shared secret and looking at the request headers). Then it looks at the document type information in the webhook payload and matches that against the revalidation tags in your application
 
 ```ts
-// ./src/app/api/revalidate/route.ts
-import {revalidatePath} from 'next/cache'
+// ./src/app/api/revalidate-tag/route.ts
+
+import {revalidateTag} from 'next/cache'
 import {type NextRequest, NextResponse} from 'next/server'
 import {parseBody} from 'next-sanity/webhook'
 
 type WebhookPayload = {
   _type: string
-  slug?: {
-    current?: string
-  }
 }
 
 export async function POST(req: NextRequest) {
   try {
+    if (!process.env.SANITY_REVALIDATE_SECRET) {
+      return new Response('Missing environment variable SANITY_REVALIDATE_SECRET', {status: 500})
+    }
+
     const {isValidSignature, body} = await parseBody<WebhookPayload>(
       req,
       process.env.SANITY_REVALIDATE_SECRET,
@@ -404,17 +504,16 @@ export async function POST(req: NextRequest) {
     if (!isValidSignature) {
       const message = 'Invalid signature'
       return new Response(JSON.stringify({message, isValidSignature, body}), {status: 401})
-    }
-
-    if (!body?._type || !body?.slug?.current) {
+    } else if (!body?._type) {
       const message = 'Bad Request'
       return new Response(JSON.stringify({message, body}), {status: 400})
     }
 
-    const staleRoute = `/${body.slug.current}`
-    revalidatePath(staleRoute)
-    const message = `Updated route: ${staleRoute}`
-    return NextResponse.json({body, message})
+    // If the `_type` is `post`, then all `client.fetch` calls with
+    // `{next: {tags: ['post']}}` will be revalidated
+    revalidateTag(body._type)
+
+    return NextResponse.json({body})
   } catch (err) {
     console.error(err)
     return new Response(err.message, {status: 500})
@@ -422,9 +521,9 @@ export async function POST(req: NextRequest) {
 }
 ```
 
-### Working example implementation
+**Create** a new GROQ-powered webhook in your Sanity project.
 
-Check out our [Personal website template][personal-website-template] to see a feature-complete example of how `revalidateTag` is used together with Live Previews.
+You can [copy this template][webhook-template-revalidate-tag] to quickly add the webhook to your Sanity project.
 
 ### Debugging caching and revalidation
 
@@ -441,198 +540,74 @@ module.exports = {
 }
 ```
 
-## Preview
-
-There are different ways to set up content previews with Sanity and Next.js.
-
-### Using Perspectives
-
-[Perspectives][perspectives-docs] is a feature for Sanity Content Lake that lets you run the same queries but pull the right content variations for any given experience. The default value is `raw`, which means no special filtering is applied, while `published` and `previewDrafts` can be used to optimize for preview and ensure that no draft data leaks into production for authenticated requests.
-
-```ts
-// ./src/utils/sanity/client.ts
-import {createClient} from 'next-sanity'
-
-const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID // "pv8y60vp"
-const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET // "production"
-const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-05-03'
-const token = process.env.SECRET_SANITY_VIEW_TOKEN
-
-const client = createClient({
-  projectId,
-  dataset,
-  apiVersion, // https://www.sanity.io/docs/api-versioning
-  useCdn: true, // if you're using ISR or only static generation at build time then you can set this to `false` to guarantee no stale content
-  token,
-  perspective: 'published', // prevent drafts from leaking through even though requests are authenticated
-})
-```
-
-### Live Preview
-
-Live Preview gives you real-time preview across your whole app for your Sanity project members. The Live Preview can be set up to give the preview experience across the whole app. Live Preview works on the data layer and doesn't require specialized components or data attributes. However, it needs a thin component wrapper to load server-side components into client-side, in order to rehydrate on changes.
-
-Router-specific setup guides for Live Preview:
-
-- [`app-router`][preivew-app-router]
-- [`pages-router`][preview-pages-router]
-
-Since `next-sanity/preview` is simply re-exporting `LiveQueryProvider` and `useLiveQuery` from [`@sanity/preview-kit`, you'll find advanced usage and comprehensive docs in its README][preview-kit-documentation].
-The [same is true][preview-kit-livequery] for `next-sanity/preview/live-query`.
-
-### Using `draftMode()` to de/activate previews
-
-Next.js gives you [a built-in `draftMode` variable][draft-mode] that can activate features like Visual Edit or any preview implementation.
-
-```ts
-// ./src/utils/sanity/client.ts
-import 'server-only'
-
-import {draftMode} from 'next/headers'
-import {createClient, type QueryOptions, type QueryParams} from 'next-sanity'
-
-const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID // "pv8y60vp"
-const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET // "production"
-const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-05-03'
-
-const client = createClient({
-  projectId,
-  dataset,
-  apiVersion, // https://www.sanity.io/docs/api-versioning
-  useCdn: false,
-})
-
-// Used by `PreviewProvider`
-export const token = process.env.SANITY_API_READ_TOKEN
-
-export async function sanityFetch<QueryResponse>({
-  query,
-  params = {},
-  tags,
-}: {
-  query: string
-  params?: QueryParams
-  tags: string[]
-}) {
-  const isDraftMode = draftMode().isEnabled
-  if (isDraftMode && !token) {
-    throw new Error('The `SANITY_API_READ_TOKEN` environment variable is required.')
-  }
-
-  const REVALIDATE_SKIP_CACHE = 0
-  const REVALIDATE_CACHE_FOREVER = false
-
-  return client.fetch<QueryResponse>(query, params, {
-    ...(isDraftMode &&
-      ({
-        token: token,
-        perspective: 'previewDrafts',
-      } satisfies QueryOptions)),
-    next: {
-      revalidate: isDraftMode ? REVALIDATE_SKIP_CACHE : REVALIDATE_CACHE_FOREVER,
-      tags,
-    },
-  })
-}
-```
-
-#### Using `cache` and `revalidation` at the same time
+### Example implementation
 
-Be aware that you can get errors if you use the `cache` and the `revalidate` configurations for Next.js cache at the same time. Go to [the Next.js docs][next-revalidate-docs] to learn more.
+Check out the [Personal website template][personal-website-template] to see a feature-complete example of how `revalidateTag` is used together with Visual Editing.
 
-## Visual Editing with Content Source Maps
+## Visual Editing
 
-> **Note**
->
-> [Vercel Visual Editing][visual-editing] is available on [Vercel's Pro and Enterprise plans][vercel-enterprise] and on all Sanity plans.
-
-The `createClient` method in `next-sanity` supports [visual editing][visual-editing-intro], it supports all the same options as [`@sanity/preview-kit/client`][preview-kit-client]. Add `studioUrl` to your client configuration and it'll automatically show up on Vercel Preview Deployments:
-
-```tsx
-import {createClient, groq} from 'next-sanity'
+Interactive live previews of draft content are the best way for authors to find and edit content with the least amount of effort and the most confidence to press publish.
 
-const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID // "pv8y60vp"
-const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET // "production"
-const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION // "2023-05-03"
+> [!TIP]
+> Visual Editing is available on all Sanity plans and can be enabled on all hosting environments.
 
-const client = createClient({
-  projectId,
-  dataset,
-  apiVersion, // https://www.sanity.io/docs/api-versioning
-  useCdn: true, // if you're using ISR or only static generation at build time, then you can set this to `false` to guarantee no stale content
-  stega: {
-    enabled: NEXT_PUBLIC_VERCEL_ENV === 'preview', // this can also be controlled in `client.fetch(query, params, {stega: boolean})`
-    studioUrl: '/studio', // Or: 'https://my-cool-project.sanity.studio'
-  },
-})
-```
+> [!NOTE]
+> Vercel ["Content Link"][vercel-content-link] adds an "edit" button to the Vercel toolbar on preview builds and is available on Vercel Pro and Enterprise plans.
 
-Go to our [setup guide][visual-editing] for a walkthrough on how to customize the experience.
+An end-to-end tutorial of [how to configure Sanity and Next.js for Visual Editing](https://www.sanity.io/guides/nextjs-app-router-live-preview) using the same patterns demonstrated in this README is available on the Sanity Exchange.
 
 ## Embedded Sanity Studio
 
-Sanity Studio allows you to embed a near-infinitely configurable content editing interface into any React application. For Next.js, you can embed the Studio on a route (like `/admin`). The Studio will still require authentication and be available only for members of your Sanity project.
+Sanity Studio is a near-infinitely configurable content editing interface that can be embedded into any React application. For Next.js, you can embed the Studio on a route (like `/studio`). The Studio will still require authentication and be available only for members of your Sanity project.
 
-This opens up many possibilities:
+This opens up many possibilities including dynamic configuration of your Sanity Studio based on a network request or user input.
 
-- Any service that hosts Next.js apps can now host your Studio.
-- Building previews for your content is easier as your Studio lives in the same environment.
-- Use [Data Fetching][next-data-fetching] to configure your Studio.
-- Easy setup of [Preview Mode][next-preview-mode].
+> [!WARNING]
+> The convenience of co-locating the Studio with your Next.js application is appealing, but it can also influence your content model to be too website-centric, and potentially make collaboration with other developers more difficult. Consider a standalone or monorepo Studio repository for larger projects and teams.
 
-> [See it live][embedded-studio-demo]
+### Creating a Studio route
 
-### Configuring Sanity Studio on a route
+`next-sanity` exports a `<NextStudio />` component to load Sanity's `<Studio />` component wrapped in a Next.js friendly layout. `metadata` specifies the necessary `<meta>` tags for making the Studio adapt to mobile devices and prevents the route from being indexed by search engines.
 
-The `NextStudio` component loads up the `import {Studio} from 'sanity'` component for you and wraps it in a Next-friendly layout. `metadata` specifies the necessary `<meta>` tags for making the Studio adapt to mobile devices, and prevents the route from being indexed by search engines.
+### Automatic installation of embedded Studio
 
-To quickly scaffold the embedded studio and a Sanity project, you can run the following command in your project folder:
+To quickly connect an existing - or create a new - Sanity project to your Next.js application, run the following command in your terminal. You will be prompted to create a route for the Studio during setup.
 
 ```bash
 npx sanity@latest init
 ```
 
-### Manual installation
+### Manual installation of embedded Studio
 
-Make a file called `sanity.config.ts` (or `.js` for non-TypeScript projects) in the project's root (same place as `next.config.ts`) and copy the example below:
+**Create** a file `sanity.config.ts` in the project's root and copy the example below:
 
 ```ts
 // ./sanity.config.ts
+
 import {defineConfig} from 'sanity'
 import {structureTool} from 'sanity/structure'
 
-import {schemaTypes} from './src/schema'
-
 const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!
 const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!
 
 export default defineConfig({
-  basePath: '/admin', // <-- important that `basePath` matches the route you're mounting your studio from
-
+  basePath: '/studio', // `basePath` must match the route of your Studio
   projectId,
   dataset,
   plugins: [structureTool()],
-  schema: {
-    types: schemaTypes,
-  },
+  schema: {types: []},
 })
 ```
 
-This example assumes that there is a `src/schema/index.ts` file that exports the schema definitions for Sanity Studio. However, you are free to structure Studio files as you see fit.
-
-To run Sanity CLI commands, add a `sanity.cli.ts` with the same `projectId` and `dataset` as your `sanity.config.ts` to the project root:
+Optionally, **create** a `sanity.cli.ts` with the same `projectId` and `dataset` as your `sanity.config.ts` to the project root so that you can run `npx sanity <command>` from the terminal inside your Next.js application:
 
 ```ts
 // ./sanity.cli.ts
-/* eslint-disable no-process-env */
-import {loadEnvConfig} from '@next/env'
-import {defineCliConfig} from 'sanity/cli'
 
-const dev = process.env.NODE_ENV !== 'production'
-loadEnvConfig(__dirname, dev, {info: () => null, error: console.error})
+import {defineCliConfig} from 'sanity/cli'
 
-const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
-const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
+const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!
+const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!
 
 export default defineCliConfig({api: {projectId, dataset}})
 ```
@@ -641,51 +616,38 @@ Now you can run commands like `npx sanity cors add`. Run `npx sanity help` for a
 
 ### Studio route with App Router
 
-Even if the rest of your app is using Pages Router, you should still mount the Studio on an App Router route. [Next supports both routers in the same app.](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app)
+Even if the rest of your app is using Pages Router, you can and should mount the Studio on an App Router route. [Next.js supports both routers in the same app.](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app)
+
+**Create** a new route to render the Studio, with the default metadata and viewport configuration:
 
 ```tsx
-// ./src/app/studio/[[...index]]/page.tsx
-import {Studio} from './Studio'
+// ./src/app/studio/[[...tool]]/page.tsx
+
+import {NextStudio} from 'next-sanity/studio'
+import config from '../../../../sanity.config'
 
-// Ensures the Studio route is statically generated
 export const dynamic = 'force-static'
 
-// Set the right `viewport`, `robots` and `referer` meta tags
 export {metadata, viewport} from 'next-sanity/studio'
 
 export default function StudioPage() {
-  return <Studio />
-}
-```
-
-```tsx
-// ./src/app/studio/[[...index]]/Studio.tsx
-'use client'
-
-import {NextStudio} from 'next-sanity/studio'
-
-import config from '../../../sanity.config'
-
-export function Studio() {
-  //  Supports the same props as `import {Studio} from 'sanity'`, `config` is required
   return <NextStudio config={config} />
 }
 ```
 
-How to customize meta tags:
+The default meta tags exported by `next-sanity` can be customized if necessary:
 
 ```tsx
-// ./src/app/studio/[[...index]]/page.tsx
+// ./src/app/studio/[[...tool]]/page.tsx
+
 import type {Metadata, Viewport} from 'next'
 import {metadata as studioMetadata, viewport as studioViewport} from 'next-sanity/studio'
 
-import {Studio} from './Studio'
-
-// Set the right `viewport`, `robots` and `referer` meta tags
+// Set the correct `viewport`, `robots` and `referrer` meta tags
 export const metadata: Metadata = {
   ...studioMetadata,
   // Overrides the title until the Studio is loaded
-  title: 'Loading Studio…',
+  title: 'Loading Studio...',
 }
 
 export const viewport: Viewport = {
@@ -695,15 +657,17 @@ export const viewport: Viewport = {
 }
 
 export default function StudioPage() {
-  return <Studio />
+  return <NextStudio config={config} />
 }
 ```
 
-### Lower level control with `StudioProvider` and `StudioLayout`
+### Lower-level control with `StudioProvider` and `StudioLayout`
 
-If you want to go to a lower level and have more control over the Studio, you can pass `StudioProvider` and `StudioLayout` from `sanity` as `children`:
+If you need even more control over the Studio, you can pass `StudioProvider` and `StudioLayout` from `sanity` as `children`:
 
 ```tsx
+// ./src/app/studio/[[...tool]]/page.tsx
+
 'use client'
 
 import {NextStudio} from 'next-sanity/studio'
@@ -725,6 +689,9 @@ function StudioPage() {
 
 ## Migration guides
 
+> [!IMPORTANT]
+> You're looking at the README for v9, the README for [v8 is available here](https://github.com/sanity-io/next-sanity/tree/v8?tab=readme-ov-file#next-sanity) as well as an [migration guide][migrate-v8-to-v9].
+
 - [From `v8` to `v9`][migrate-v8-to-v9]
 - [From `v7` to `v8`][migrate-v7-to-v8]
 - [From `v6` to `v7`][migrate-v6-to-v7]
@@ -741,12 +708,6 @@ MIT-licensed. See [LICENSE][LICENSE].
 [api-versioning]: https://www.sanity.io/docs/api-versioning?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
 [app-router]: https://nextjs.org/docs/app/building-your-application/routing
 [cdn]: https://www.sanity.io/docs/asset-cdn?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
-[ci-workflow]: https://github.com/sanity-io/next-sanity/actions/workflows/ci.yml
-[content-source-maps-intro]: https://www.sanity.io/blog/content-source-maps-announce?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
-[content-source-maps]: https://www.sanity.io/docs/content-source-maps?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
-[draft-mode]: https://nextjs.org/docs/app/building-your-application/configuring/draft-mode
-[embedded-studio-demo]: https://next.sanity.build/studio
-[enterprise-cta]: https://www.sanity.io/enterprise?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
 [groq-syntax-highlighting]: https://marketplace.visualstudio.com/items?itemName=sanity-io.vscode-sanity
 [groq-webhook]: https://www.sanity.io/docs/webhooks?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
 [image-url]: https://www.sanity.io/docs/presenting-images?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
@@ -759,24 +720,24 @@ MIT-licensed. See [LICENSE][LICENSE].
 [migrate-v7-to-v8]: https://github.com/sanity-io/next-sanity/blob/main/packages/next-sanity/MIGRATE-v7-to-v8.md
 [migrate-v8-to-v9]: https://github.com/sanity-io/next-sanity/blob/main/packages/next-sanity/MIGRATE-v8-to-v9.md
 [next-cache]: https://nextjs.org/docs/app/building-your-application/caching
-[next-data-fetching]: https://nextjs.org/docs/basic-features/data-fetching/overview
-[next-preview-mode]: https://nextjs.org/docs/advanced-features/preview-mode
+[next-docs]: https://nextjs.org/docs
 [next-revalidate-docs]: https://nextjs.org/docs/app/api-reference/functions/fetch#optionsnextrevalidate
 [pages-router]: https://nextjs.org/docs/pages/building-your-application/routing
 [personal-website-template]: https://github.com/sanity-io/template-nextjs-personal-website
-[perspectives-docs]: https://www.sanity.io/docs/perspectives?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
 [portable-text]: https://portabletext.org
-[preivew-app-router]: https://github.com/sanity-io/next-sanity/blob/main/packages/next-sanity/PREVIEW-app-router.md
-[preview-kit-client]: https://github.com/sanity-io/preview-kit#sanitypreview-kitclient
-[preview-kit-documentation]: https://github.com/sanity-io/preview-kit#sanitypreview-kit-1
-[preview-kit-livequery]: https://github.com/sanity-io/preview-kit#using-the-livequery-wrapper-component-instead-of-the-uselivequery-hook
-[preview-kit]: https://github.com/sanity-io/preview-kit
-[preview-pages-router]: https://github.com/sanity-io/next-sanity/blob/main/packages/next-sanity/PREVIEW-pages-router.md
-[revalidate-tag]: https://nextjs.org/docs/app/api-reference/functions/revalidateTag
-[sales-cta]: https://www.sanity.io/contact/sales?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
 [sanity-client]: https://www.sanity.io/docs/js-client?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
 [sanity]: https://www.sanity.io?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
-[visual-editing-intro]: https://www.sanity.io/blog/visual-editing-sanity-vercel?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
-[visual-editing]: https://www.sanity.io/docs/vercel-visual-editing?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
-[webhook-template]: https://www.sanity.io/manage/webhooks/share?name=Tag-based+Revalidation+Hook+for+Next.js+13%2B&description=%5B%C2%A0%5D+Replace+URL+with+the+production*+URL+for+your+revalidation+handler+in+your+Next.js+app%0A%5B+%5D%C2%A0Insert%2Freplace+the+document+types+you+want+to+be+able+to+make+tags+for+in+the+Filter+array%0A%5B+%5D%C2%A0Make+a+Secret+that+you+also+add+to+your+app%27s+environment+variables+%28SANITY_REVALIDATE_SECRET%29%0A%0A*Or+preview+URL+for+preliminary+testing%0A%0AFor+complete+instructions%2C+see+the+README+on%3A%0Ahttps%3A%2F%2Fgithub.com%2Fsanity-io%2Fnext-sanity&url=https%3A%2F%2FYOUR-PRODUCTION-URL.TLD%2Fapi%2Frevalidate&on=create&on=update&on=delete&filter=_type+in+%5B%22post%22%2C+%22home%22%2C+%22OTHER_DOCUMENT_TYPE%22%5D&projection=%7B_type%7D&httpMethod=POST&apiVersion=v2021-03-25&includeDrafts=&headers=%7B%7D
-[vercel-enterprise]: https://vercel.com/docs/accounts/plans/enterprise
+[visual-editing]: https://www.sanity.io/docs/visual-editing?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
+[webhook-template-revalidate-tag]: https://www.sanity.io/manage/webhooks/share?name=Tag-based+Revalidation+Hook+for+Next.js+13+&description=1.+Replace+URL+with+the+preview+or+production+URL+for+your+revalidation+handler+in+your+Next.js+app%0A2.%C2%A0Insert%2Freplace+the+document+types+you+want+to+be+able+to+make+tags+for+in+the+Filter+array%0A3.%C2%A0Make+a+Secret+that+you+also+add+to+your+app%27s+environment+variables+%28SANITY_REVALIDATE_SECRET%29%0A%0AFor+complete+instructions%2C+see+the+README+on%3A%0Ahttps%3A%2F%2Fgithub.com%2Fsanity-io%2Fnext-sanity&url=https%3A%2F%2FYOUR-PRODUCTION-URL.TLD%2Fapi%2Frevalidate-tag&on=create&on=update&on=delete&filter=_type+in+%5B%22post%22%2C+%22home%22%2C+%22OTHER_DOCUMENT_TYPE%22%5D&projection=%7B_type%7D&httpMethod=POST&apiVersion=v2021-03-25&includeDrafts=&headers=%7B%7D
+[webhook-template-revalidate-path]: https://www.sanity.io/manage/webhooks/share?name=Path-based+Revalidation+Hook+for+Next.js&description=1.+Replace+URL+with+the+preview+or+production+URL+for+your+revalidation+handler+in+your+Next.js+app%0A2.%C2%A0Insert%2Freplace+the+document+types+you+want+to+be+able+to+make+tags+for+in+the+Filter+array%0A3.%C2%A0Make+a+Secret+that+you+also+add+to+your+app%27s+environment+variables+%28SANITY_REVALIDATE_SECRET%29%0A%0AFor+complete+instructions%2C+see+the+README+on%3A%0Ahttps%3A%2F%2Fgithub.com%2Fsanity-io%2Fnext-sanity&url=https%3A%2F%2FYOUR-PRODUCTION-URL.TLD%2Fapi%2Frevalidate-path&on=create&on=update&on=delete&filter=_type+in+%5B%22post%22%2C+%22home%22%2C+%22OTHER_DOCUMENT_TYPES%22%5D&projection=%7B%0A++%22path%22%3A+select%28%0A++++_type+%3D%3D+%22post%22+%3D%3E+%22%2Fposts%2F%22+%2B+slug.current%2C%0A++++slug.current%0A++%29%0A%7D&httpMethod=POST&apiVersion=v2021-03-25&includeDrafts=&headers=%7B%7D
+[sanity-typegen]: https://www.sanity.io/docs/sanity-typegen?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
+[sanity-typegen-monorepo]: https://www.sanity.io/docs/sanity-typegen#1a6a147d6737?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
+[sanity-typegen-queries]: https://www.sanity.io/docs/sanity-typegen#c3ef15d8ad39?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
+[sanity-docs]: https://www.sanity.io/docs
+[sanity-graphql]: https://www.sanity.io/docs/graphql?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
+[vs-code-extension]: https://marketplace.visualstudio.com/items?itemName=sanity-io.vscode-sanity
+[sanity-studio]: https://www.sanity.io/docs/sanity-studio?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
+[groq-functions]: https://www.sanity.io/docs/groq-functions?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
+[vercel-content-link]: https://vercel.com/docs/workflow-collaboration/edit-mode#content-link?utm_source=github&utm_medium=readme&utm_campaign=next-sanity
+[sanity-next-clean-starter]: https://www.sanity.io/templates/nextjs-sanity-clean
+[sanity-next-featured-starter]: https://www.sanity.io/templates/personal-website-with-built-in-content-editing