diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md
index 7dfcb0a530ea..e7b5d268d7f9 100644
--- a/examples/cms-sanity/README.md
+++ b/examples/cms-sanity/README.md
@@ -2,6 +2,11 @@
This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Sanity](https://www.sanity.io/) as the data source.
+You'll get:
+
+- Sanity Studio running on localhost
+- Sub-second as-you-type previews in Next.js
+
## Demo
### [https://next-blog-sanity.vercel.app/](https://next-blog-sanity.vercel.app/)
@@ -85,11 +90,30 @@ SANITY_API_TOKEN=...
SANITY_PREVIEW_SECRET=...
```
-### Step 5. Prepare project for previewing
+### Step 5. Prepare the project for previewing
+
+5.1. Install the `@sanity/production-preview` plugin with `sanity install @sanity/production-preview`.
+
+5.2. Create a file called `resolveProductionUrl.js` (we'll get back to that file in a bit).
+
+5.3. Open your studio's sanity.json, and add the following entry to the parts-array:
-Go to https://www.sanity.io/docs/preview-content-on-site and follow the three steps on that page. It should be done inside the studio project generated in Step 2.
+```diff
+{
+ "plugins": [
+ "@sanity/production-preview"
+ ],
+ "parts": [
+ //...
++ {
++ "implements": "part:@sanity/production-preview/resolve-production-url",
++ "path": "./resolveProductionUrl.js"
++ }
+ ]
+}
+```
-When you get to the second step about creating a file called `resolveProductionUrl.js`, copy the following instead:
+Now, go back to `resolveProductionUrl.js` and add a function that will receive the full document that was selected for previewing:
```js
const previewSecret = 'MY_SECRET' // Copy the string you used for SANITY_PREVIEW_SECRET
@@ -100,6 +124,8 @@ export default function resolveProductionUrl(document) {
}
```
+For more information on live previewing check the [full guide.](https://www.sanity.io/guides/nextjs-live-preview)
+
### Step 6. Copy the schema file
After initializing your Sanity studio project there should be a `schemas` folder.
@@ -168,3 +194,8 @@ To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [
Alternatively, you can deploy using our template by clicking on the Deploy button below.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-sanity&project-name=cms-sanity&repository-name=cms-sanity&env=NEXT_PUBLIC_SANITY_PROJECT_ID,SANITY_API_TOKEN,SANITY_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)
+
+#### Next steps
+
+- Invalidate your routes in production [on-demand](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta) with GROQ powered webhooks
+- Mount your preview inside the Sanity Studio for comfortable side-by-side editing
diff --git a/examples/cms-sanity/components/cover-image.js b/examples/cms-sanity/components/cover-image.js
index 60bf2e8847a3..818e8eef5e47 100644
--- a/examples/cms-sanity/components/cover-image.js
+++ b/examples/cms-sanity/components/cover-image.js
@@ -5,15 +5,19 @@ import { urlForImage } from '../lib/sanity'
export default function CoverImage({ title, slug, image: source }) {
const image = source ? (
-