diff --git a/examples/cms-sanity/.env.local.example b/examples/cms-sanity/.env.local.example
index a246ea991e7..84f39e3cd4a 100644
--- a/examples/cms-sanity/.env.local.example
+++ b/examples/cms-sanity/.env.local.example
@@ -1,5 +1,3 @@
NEXT_PUBLIC_SANITY_PROJECT_ID=
NEXT_PUBLIC_SANITY_DATASET=
-SANITY_API_TOKEN=
-SANITY_PREVIEW_SECRET=
-SANITY_STUDIO_REVALIDATE_SECRET=
+SANITY_API_READ_TOKEN=
diff --git a/examples/cms-sanity/.gitignore b/examples/cms-sanity/.gitignore
index c87c9b392c0..4cebee738fa 100644
--- a/examples/cms-sanity/.gitignore
+++ b/examples/cms-sanity/.gitignore
@@ -2,6 +2,7 @@
# dependencies
/node_modules
+/studio/node_modules
/.pnp
.pnp.js
@@ -14,6 +15,7 @@
# production
/build
+/studio/dist
# misc
.DS_Store
@@ -34,3 +36,7 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
+
+# Env files created by scripts for working locally
+.env
+studio/.env.development
\ No newline at end of file
diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md
index c352df70547..b46c0fd2774 100644
--- a/examples/cms-sanity/README.md
+++ b/examples/cms-sanity/README.md
@@ -4,21 +4,16 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas
You'll get:
-- Sanity Studio running on localhost
+- Next.js deployed with the [Sanity Vercel Integration][integration].
+- Sanity Studio running on localhost and deployed in the [cloud](https://www.sanity.io/docs/deployment).
- Sub-second as-you-type previews in Next.js
- [On-demand revalidation of pages](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta) with [GROQ powered webhooks](https://www.sanity.io/docs/webhooks)
## Demo
-### [https://next-blog-sanity.vercel.app/](https://next-blog-sanity.vercel.app/)
+### [https://next-blog-sanity.vercel.app](https://next-blog-sanity.vercel.app)
-## Deploy your own
-
-Once you have access to [the environment variables you'll need](#step-4-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
-
-[![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,SANITY_STUDIO_REVALIDATE_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)
-
-### Related examples
+## Related examples
- [WordPress](/examples/cms-wordpress)
- [DatoCMS](/examples/cms-datocms)
@@ -37,9 +32,55 @@ Once you have access to [the environment variables you'll need](#step-4-set-up-e
- [Blog Starter](/examples/blog-starter)
- [Builder.io](/examples/cms-builder-io)
-## How to use
+# Configuration
+
+- [Step 1. Set up the environment](#step-1-set-up-the-environment)
+- [Step 2. Configure CORS for localhost](#step-2-configure-cors-for-localhost)
+- [Step 3. Run Next.js locally in development mode](#step-3-run-nextjs-locally-in-development-mode)
+- [Step 4. Populate content](#step-4-populate-content)
+- [Step 5. Deploy to production & use Preview Mode from anywhere](#step-5-deploy-to-production--use-preview-mode-from-anywhere)
+ - [If you didn't Deploy with Vercel earlier do so now](#if-you-didnt-deploy-with-vercel-earlier-do-so-now)
+ - [Configure CORS for production](#configure-cors-for-production)
+ - [Add the preview secret environment variable](#add-the-preview-secret-environment-variable)
+ - [How to test locally that the secret is setup correctly](#how-to-test-locally-that-the-secret-is-setup-correctly)
+ - [How to start Preview Mode for Next.js in production from a local Studio](#how-to-start-preview-mode-for-nextjs-in-production-from-a-local-studio)
+ - [If you regret sending a preview link to someone](#if-you-regret-sending-a-preview-link-to-someone)
+- [Step 6. Deploy your Studio and publish from anywhere](#step-6-deploy-your-studio-and-publish-from-anywhere)
+- [Step 7. Setup Revalidation Webhook](#step-7-setup-revalidation-webhook)
+ - [Testing the Webhook](#testing-the-webhook)
+- [Next steps](#next-steps)
+
+## Step 1. Set up the environment
+
+Use the Deploy Button below, you'll deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) as well as connect it to your Sanity dataset using [the Sanity Vercel Integration][integration].
+
+[![Deploy with Vercel](https://vercel.com/button)][vercel-deploy]
+
+[Clone the repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) that Vercel created for you and from the root directory of your local checkout.
+Then link your clone to Vercel:
+
+```bash
+npx vercel link
+```
+
+Download the environment variables needed to connect Next.js and Studio to your Sanity project:
+
+```bash
+npx vercel env pull
+```
+
+
+You can also set up manually
+
+- [Bootstrap the example](#bootstrap-the-example)
+- [Connect to a Sanity project](#connect-to-a-sanity-project)
+- [Set up environment variables](#set-up-environment-variables)
+
+If using the [integration] isn't an option. Or maybe you want to work locally first and deploy to Vercel later. Whatever the reason this guide shows you how to setup manually.
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+### Bootstrap the example
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io):
```bash
npx create-next-app --example cms-sanity cms-sanity-app
@@ -53,174 +94,307 @@ yarn create next-app --example cms-sanity cms-sanity-app
pnpm create next-app --example cms-sanity cms-sanity-app
```
-## Configuration
+### Connect to a Sanity project
-### Step 1. Create an account and a project on Sanity
+Run this to select from your existing Sanity projects, or create a new one:
-First, [create an account on Sanity](https://sanity.io).
+```bash
+(cd studio && npx @sanity/cli init)
+```
-After creating an account, install the Sanity cli from npm `npm i -g @sanity/cli`.
+The CLI will update [`sanity.json`] with the project ID and dataset name.
-### Step 2. Create a new Sanity project
+### Set up environment variables
-In a separate folder run `sanity init` to initialize a new studio project.
+Copy the [`.env.local.example`] file in this directory to `.env.local` (which will be ignored by Git):
-This will be where we manage our data.
+```bash
+cp .env.local.example .env.local
+```
-When going through the init phase make sure to select **Yes** to the **Use the default dataset configuration** step and select **Clean project with no predefined schemas** for the **Select project template** step.
+Then set these variables in `.env.local`:
-### Step 3. Generate an API token
+- `NEXT_PUBLIC_SANITY_PROJECT_ID` should be the `projectId` value from [`sanity.json`].
+- `NEXT_PUBLIC_SANITY_DATASET` should be the `dataset` value from [`sanity.json`].
+- `SANITY_API_READ_TOKEN` create an API token with `read-only` permissions:
+ - Run this to open your project settings or go to https://manage.sanity.io/ and open your project:
+ ```bash
+ (cd studio && npx @sanity/cli manage)
+ ```
+ - Go to **API** and the **Tokens** section at the bottom, launch its **Add API token** button.
+ - Name it `SANITY_API_READ_TOKEN`, set **Permissions** to `Viewer`.
+ - Hit **Save** and you can copy/paste the token.
-Log into https://manage.sanity.io/ and choose the project you just created. Then from **Settings**, select **API**, then click **Add New Token** and create a token with the **Read** permission.
+Your `.env.local` file should look like this:
-### Step 4. Set up environment variables
+```bash
+NEXT_PUBLIC_SANITY_PROJECT_ID=...
+NEXT_PUBLIC_SANITY_DATASET=...
+SANITY_API_READ_TOKEN=...
+```
+
+
-Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
+## Step 2. Configure CORS for localhost
+
+Needed for live previewing unpublished/draft content.
```bash
-cp .env.local.example .env.local
+npm --prefix studio run cors:add -- http://localhost:3000 --credentials
```
-Then set each variable on `.env.local`:
+## Step 3. Run Next.js locally in development mode
-- `NEXT_PUBLIC_SANITY_PROJECT_ID` should be the `projectId` value from the `sanity.json` file created in step 2.
-- `NEXT_PUBLIC_SANITY_DATASET` should be the `dataset` value from the `sanity.json` file created in step 2 - defaults to `production` if not set.
-- `SANITY_API_TOKEN` should be the API token generated in the previous step.
-- `SANITY_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
-- `SANITY_STUDIO_REVALIDATE_SECRET` should be setup the same way as `SANITY_PREVIEW_SECRET` - this is used for [on-demand revalidation](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta) with [webhooks](https://www.sanity.io/docs/webhooks).
+```bash
+npm install && npm run dev
+```
-Your `.env.local` file should look like this:
+```bash
+yarn install && yarn dev
+```
+
+Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
+
+## Step 4. Populate content
+
+In another terminal start up the studio:
```bash
-NEXT_PUBLIC_SANITY_PROJECT_ID=...
-NEXT_PUBLIC_SANITY_DATASET=...
-SANITY_API_TOKEN=...
-SANITY_PREVIEW_SECRET=...
-SANITY_STUDIO_REVALIDATE_SECRET=...
+npm run studio:dev
```
-### Step 5. Prepare the project for previewing
+Your studio should be up and running on [http://localhost:3333](http://localhost:3333)!
+
+Create content in Sanity Studio and live preview it in Next.js, side-by-side, by opening these URLs:
+
+- [`http://localhost:3333`](http://localhost:3333)
+- [`http://localhost:3000/api/preview`](http://localhost:3000/api/preview)
+
+
+View screenshot ✨
+
+![screenshot](https://user-images.githubusercontent.com/81981/182991870-7a0f6e54-b35e-4728-922b-409fcf1d6cc3.png)
+
+
+
+We're all set to do some content creation!
+
+- Click on the **"Create new document"** button top left and select **Post**
+- Type some dummy data for the **Title**
+- **Generate** a **Slug**
+
+ View screenshot ✨
+
+ ![screenshot](https://user-images.githubusercontent.com/81981/182993687-b6313086-f60a-4b36-b038-4c1c63b53c54.png)
+
+
+
+- Set the **Date**
+- Select a **Cover Image** from [Unsplash].
+
+ View screenshot ✨
+
+ ![screenshot](https://user-images.githubusercontent.com/81981/182994571-f204c41c-e1e3-44f4-82b3-99fefbd25bec.png)
+
+
-5.1. Install the `@sanity/production-preview` plugin with `sanity install @sanity/production-preview`.
+- Let's create an **Author** inline, click **Create new**.
+- Give the **Author** a **Name**.
+- After selecting a **Picture** of a **face** from [Unsplash], set a hotspot to ensure pixel-perfect cropping.
+
+ View screenshot ✨
-5.2. Create a file called `resolveProductionUrl.js` (we'll get back to that file in a bit).
+ ![screenshot](https://user-images.githubusercontent.com/81981/182995772-33d63e45-4920-48c5-aa47-ccb7ce10170c.png)
-5.3. Open your studio's sanity.json, and add the following entry to the parts-array:
+
-```diff
-{
- "plugins": [
- "@sanity/production-preview"
- ],
- "parts": [
- //...
-+ {
-+ "implements": "part:@sanity/production-preview/resolve-production-url",
-+ "path": "./resolveProductionUrl.js"
-+ }
- ]
-}
+- Create a couple more **Posts** and watch how the layout adapt to more content.
+
+**Important:** For each post record, you need to click **Publish** after saving for it to be visible outside Preview Mode.
+
+To exit Preview Mode, you can click on _"Click here to exit preview mode"_ at the top.
+
+## Step 5. Deploy to production & use Preview Mode from anywhere
+
+### If you didn't [Deploy with Vercel earlier](#step-1-set-up-the-environment) do so now
+
+To deploy your local project to Vercel, push it to [GitHub](https://docs.github.com/en/get-started/importing-your-projects-to-github/importing-source-code-to-github/adding-locally-hosted-code-to-github)/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example).
+
+**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
+
+After it's deployed link your local code to the Vercel project:
+
+```bash
+npx vercel link
```
-Now, go back to `resolveProductionUrl.js` and add a function that will receive the full document that was selected for previewing:
+### Configure CORS for production
+
+Add your `production url` to the list over CORS origins.
+
+
+Don't remember the production url? 🤔
+
+No worries, it's easy to find out. Go to your [Vercel Dashboard](https://vercel.com/) and click on your project:
+
+![screenshot](https://user-images.githubusercontent.com/81981/183002637-6aa6b1d8-e0ee-4a9b-bcc0-d49799fcc984.png)
-```js
-const previewSecret = 'MY_SECRET' // Copy the string you used for SANITY_PREVIEW_SECRET
-const projectUrl = 'http://localhost:3000'
+In the screenshot above the `production url` is `https://cms-sanity.vercel.app`.
-export default function resolveProductionUrl(document) {
- return `${projectUrl}/api/preview?secret=${previewSecret}&slug=${document.slug.current}`
-}
+
+
+```bash
+npm --prefix studio run cors:add -- [your production url] --credentials
```
-For more information on live previewing check the [full guide.](https://www.sanity.io/guides/nextjs-live-preview)
+### Add the preview secret environment variable
-### Step 6. Copy the schema file
+It's required to set a secret that makes Preview Mode activation links unique. Otherwise anyone could see your unpublished content by just opening `[your production url]/api/preview`.
+Run this and it'll prompt you for a value:
-After initializing your Sanity studio project there should be a `schemas` folder.
+```bash
+npx vercel env add SANITY_STUDIO_PREVIEW_SECRET
+```
-Replace the contents of `schema.js` in the Sanity studio project directory with [`./schemas/schema.js`](./schemas/schema.js) in this example directory. This will set up the schema we’ll use this for this example.
+The secret can be any combination of random words and letters as long as it's URL safe.
+You can generate one in your DevTools console using `copy(Math.random().toString(36).substr(2, 10))` if you don't feel like inventing one.
-### Step 7. Populate Content
+You should see something like this in your terminal afterwards:
+
+```bash
+$ npx vercel env add SANITY_STUDIO_PREVIEW_SECRET
+Vercel CLI 27.3.7
+? What’s the value of SANITY_STUDIO_PREVIEW_SECRET? 2whpu1jefs
+? Add SANITY_STUDIO_PREVIEW_SECRET to which Environments (select multiple)? Production, Preview, Development
+✅ Added Environment Variable SANITY_STUDIO_PREVIEW_SECRET to Project cms-sanity [1s]
+```
-To add some content go to your Sanity studio project directory and run `sanity start`.
+Redeploy production to apply the secret to the preview api:
-After the project has started and you have navigated to the URL given in the terminal, select **Author** and create a new record.
+```bash
+npx vercel --prod
+```
-- You just need **1 Author record**.
-- Use dummy data for the text.
-- For the image, you can download one from [Unsplash](https://unsplash.com/).
+After it deploys it should now start preview mode if you launch `[your production url]/api/preview?secret=[your preview secret]`. You can send that preview url to people you want to show the content you're working on before you publish it.
-Next, select **Post** and create a new record.
+### How to test locally that the secret is setup correctly
-- We recommend creating at least **2 Post records**.
-- Use dummy data for the text.
-- You can write markdown for the **Content** field.
-- For the images, you can download ones from [Unsplash](https://unsplash.com/).
-- Pick the **Author** you created earlier.
+In order to test that the secret will prevent unauthorized people from activating preview mode, start by updating the local `.env` with the secret you just made:
-**Important:** For each post record, you need to click **Publish** after saving. If not, the post will be in the draft state.
+```bash
+npx vercel env pull
+```
-### Step 8. Run Next.js in development mode
+Restart your Next.js and Studio processes so the secret is applied:
```bash
-npm install
npm run dev
+```
-# or
+```bash
+npm run studio:dev
+```
-yarn install
-yarn dev
+And now you'll get an error if `[secret]` is incorrect when you try to open `https://localhost:3000/api/preview?secret=[secret]`.
+
+### How to start Preview Mode for Next.js in production from a local Studio
+
+Run this to make the Studio open previews at `[your production url]/api/preview` instead of `http://localhost:3000/api/preview`
+
+```bash
+SANITY_STUDIO_PREVIEW_URL=[your production url] npm run studio:dev
```
-Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
+### If you regret sending a preview link to someone
-### Step 9. Try preview mode
+Revoke their access by creating a new secret:
-On Sanity, go to one of the posts you've created and:
+```bash
+npx vercel env rm SANITY_STUDIO_PREVIEW_SECRET
+npx vercel env add SANITY_STUDIO_PREVIEW_SECRET
+npx vercel --prod
+```
-- **Update the title**. For example, you can add `[Draft]` in front of the title.
-- As you edit the document it will be saved as a draft, but **DO NOT** click **Publish**. By doing this, the post will be in the draft state.
+## Step 6. Deploy your Studio and publish from anywhere
-Now, if you go to the post page on localhost, you won't see the updated title. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](https://nextjs.org/docs/advanced-features/preview-mode)).
+Live previewing content is fun, but collaborating on content in real-time is next-level:
-To view the preview, go to the post edit page on Sanity, click the three dots above the document and select **Open preview** ([see the instruction here](https://www.sanity.io/docs/preview-content-on-site))
+```bash
+SANITY_STUDIO_PREVIEW_URL=[your production url] npm run studio:deploy
+```
-You should now be able to see the updated title. To exit Preview Mode, you can click on _"Click here to exit preview mode"_ at the top.
+If it's successful you should see something like this in your terminal:
-### Step 10. Deploy on Vercel
+```bash
+SANITY_STUDIO_PREVIEW_URL="https://cms-sanity.vercel.app" npm run studio:deploy
+? Studio hostname (.sanity.studio): cms-sanity
-You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+Including the following environment variables as part of the JavaScript bundle:
+- SANITY_STUDIO_PREVIEW_URL
+- SANITY_STUDIO_PREVIEW_SECRET
+- SANITY_STUDIO_API_PROJECT_ID
+- SANITY_STUDIO_API_DATASET
-#### Deploy Your Local Project
+✔ Deploying to Sanity.Studio
-To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example).
+Success! Studio deployed to https://cms-sanity.sanity.studio/
+```
-**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
+This snippet is stripped from verbose information, you'll see a lot of extra stuff in your terminal.
-#### Deploy from Our Template
+## Step 7. Setup Revalidation Webhook
-Alternatively, you can deploy using our template by clicking on the Deploy button below.
+Using GROQ Webhooks Next.js can rebuild pages that have changed content. It rebuilds so fast it can almost compete with Preview Mode.
-[![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,SANITY_STUDIO_REVALIDATE_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)
+Create a secret and give it a value the same way you did for `SANITY_STUDIO_PREVIEW_SECRET` in [Step 4](#add-the-preview-secret-environment-variable). It's used to verify that webhook payloads came from Sanity infra, and set it as the value for `SANITY_REVALIDATE_SECRET`:
-### Step 11. Setup Revalidation Webhook
+```bash
+npx vercel env add SANITY_REVALIDATE_SECRET
+```
-- Open your Sanity manager, go to **API**, and **Create new webhook**.
-- Set the **URL** to use the Vercel app url from [Step 10](#step-10-deploy-on-vercel) and append `/api/revalidate`, for example: `https://cms-sanity.vercel.app/api/revalidate`
+You should see something like this in your terminal afterwards:
+
+```bash
+$ npx vercel env add SANITY_REVALIDATE_SECRET
+Vercel CLI 27.3.7
+? What’s the value of SANITY_REVALIDATE_SECRET? jwh3nr85ft
+? Add SANITY_REVALIDATE_SECRET to which Environments (select multiple)? Production, Preview, Development
+✅ Added Environment Variable SANITY_REVALIDATE_SECRET to Project cms-sanity [1s]
+```
+
+Apply the secret to production:
+
+```bash
+npx vercel --prod
+```
+
+Wormhole into the [manager](https://manage.sanity.io/) by running:
+
+```bash
+(cd studio && npx @sanity/cli hook create)
+```
+
+- **Name** it "On-demand Revalidation".
+- Set the **URL** to`[your production url]/api/revalidate`, for example: `https://cms-sanity.vercel.app/api/revalidate`
- Set the **Trigger on** field to
- Set the **Filter** to `_type == "post" || _type == "author"`
-- Set the **Secret** to the same value you gave `SANITY_STUDIO_REVALIDATE_SECRET` earlier.
+- Set the **Secret** to the same value you gave `SANITY_REVALIDATE_SECRET` earlier.
- Hit **Save**!
-#### Testing the Webhook
+### Testing the Webhook
- Open the Deployment function log. (**Vercel Dashboard > Deployment > Functions** and filter by `api/revalidate`)
- Edit a Post in your Sanity Studio and publish.
- The log should start showing calls.
- And the published changes show up on the site after you reload.
-### Next steps
+## Next steps
- Mount your preview inside the Sanity Studio for comfortable side-by-side editing
- [Join the Sanity community](https://slack.sanity.io/)
+
+[vercel-deploy]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-sanity&repository-name=cms-sanity&project-name=cms-sanity&demo-title=Blog%20using%20Next.js%20%26%20Sanity&demo-description=On-demand%20ISR%2C%20sub-second%20as-you-type%20previews&demo-url=https%3A%2F%2Fnext-blog-sanity.vercel.app%2F&demo-image=https%3A%2F%2Fuser-images.githubusercontent.com%2F110497645%2F182727236-75c02b1b-faed-4ae2-99ce-baa089f7f363.png&integration-ids=oac_hb2LITYajhRQ0i4QznmKH7gx
+[integration]: https://www.sanity.io/docs/vercel-integration
+[`sanity.json`]: studio/sanity.json
+[`.env.local.example`]: .env.local.example
+[unsplash]: https://unsplash.com
diff --git a/examples/cms-sanity/components/avatar.js b/examples/cms-sanity/components/avatar.js
index bbf42982378..a7df741c533 100644
--- a/examples/cms-sanity/components/avatar.js
+++ b/examples/cms-sanity/components/avatar.js
@@ -1,14 +1,19 @@
-import Image from 'next/image'
+import Image from 'next/future/image'
import { urlForImage } from '../lib/sanity'
export default function Avatar({ name, picture }) {
return (
-
+
diff --git a/examples/cms-sanity/components/cover-image.js b/examples/cms-sanity/components/cover-image.js
index 818e8eef5e4..a53c7b91711 100644
--- a/examples/cms-sanity/components/cover-image.js
+++ b/examples/cms-sanity/components/cover-image.js
@@ -1,21 +1,24 @@
import cn from 'classnames'
-import Image from 'next/image'
+import Image from 'next/future/image'
import Link from 'next/link'
import { urlForImage } from '../lib/sanity'
-export default function CoverImage({ title, slug, image: source }) {
- const image = source ? (
+export default function CoverImage({ title, slug, image: source, priority }) {
+ const image = source?.asset?._ref ? (
) : (
diff --git a/examples/cms-sanity/components/date.js b/examples/cms-sanity/components/date.js
index eac5681378b..882b66e59eb 100644
--- a/examples/cms-sanity/components/date.js
+++ b/examples/cms-sanity/components/date.js
@@ -1,6 +1,8 @@
import { parseISO, format } from 'date-fns'
export default function Date({ dateString }) {
+ if (!dateString) return null
+
const date = parseISO(dateString)
return
}
diff --git a/examples/cms-sanity/components/hero-post.js b/examples/cms-sanity/components/hero-post.js
index 4d81ed0850a..9b0c0c4311e 100644
--- a/examples/cms-sanity/components/hero-post.js
+++ b/examples/cms-sanity/components/hero-post.js
@@ -14,22 +14,22 @@ export default function HeroPost({
return (