docs: update cms-sanity example (#34898)

Upgrades `next-sanity` to the latest version and applies breaking changes.
Improves the docs for the Sanity example.

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`



Co-authored-by: even westvang <172952+evenwestvang@users.noreply.github.com>

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

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 ? (
-    <Image
-      width={2000}
-      height={1000}
-      alt={`Cover Image for ${title}`}
-      src={urlForImage(source).height(1000).width(2000).url()}
+    <div
       className={cn('shadow-small', {
         'hover:shadow-medium transition-shadow duration-200': slug,
       })}
-    />
+    >
+      <Image
+        layout="responsive"
+        width={2000}
+        height={1000}
+        alt={`Cover Image for ${title}`}
+        src={urlForImage(source).height(1000).width(2000).url()}
+      />
+    </div>
   ) : (
     <div style={{ paddingTop: '50%', backgroundColor: '#ddd' }} />
   )

examples/cms-sanity/components/post-body.js

@@ -1,10 +1,10 @@
 import markdownStyles from './markdown-styles.module.css'
-import BlockContent from '@sanity/block-content-to-react'
+import { PortableText } from '@portabletext/react'
 
 export default function PostBody({ content }) {
   return (
-    <div className="max-w-2xl mx-auto">
-      <BlockContent blocks={content} className={markdownStyles.markdown} />
+    <div className={`max-w-2xl mx-auto ${markdownStyles.markdown}`}>
+      <PortableText value={content} />
     </div>
   )
 }

examples/cms-sanity/lib/sanity.js

@@ -1,7 +1,5 @@
-import {
-  createImageUrlBuilder,
-  createPreviewSubscriptionHook,
-} from 'next-sanity'
+import createImageUrlBuilder from '@sanity/image-url'
+import { createPreviewSubscriptionHook } from 'next-sanity'
 import { sanityConfig } from './config'
 
 export const imageBuilder = createImageUrlBuilder(sanityConfig)

examples/cms-sanity/package.json

@@ -6,17 +6,18 @@
     "start": "next start"
   },
   "dependencies": {
-    "@sanity/block-content-to-react": "2.0.7",
+    "@portabletext/react": "^1.0.3",
+    "@sanity/image-url": "^1.0.1",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
     "next": "latest",
-    "next-sanity": "0.3.0",
+    "next-sanity": "0.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "autoprefixer": "10.4.2",
-    "postcss": "8.4.5",
-    "tailwindcss": "^3.0.15"
+    "postcss": "8.4.7",
+    "tailwindcss": "^3.0.23"
   }
 }