Updates cms-sanity example to use Sanity v3 (#45662

examples/cms-sanity/README.md

@@ -37,18 +37,17 @@ You'll get:
 # 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)
+- [Step 2. Run Next.js locally in development mode](#step-3-run-nextjs-locally-in-development-mode)
+- [Step 3. Populate content](#step-3-populate-content)
+- [Step 4. Deploy to production & use Preview Mode from anywhere](#step-4-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)
+- [Step 5. Deploy your Studio and publish from anywhere](#step-5-deploy-your-studio-and-publish-from-anywhere)
+- [Step 6. Setup Revalidation Webhook](#step-6-setup-revalidation-webhook)
   - [Testing the Webhook](#testing-the-webhook)
 - [Next steps](#next-steps)
 
@@ -71,81 +70,7 @@ Download the environment variables needed to connect Next.js and Studio to your
 npx vercel env pull
 ```
 
-<details>
-<summary>You can also set up manually</summary>
-
-- [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.
-
-### 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
-```
-
-```bash
-yarn create next-app --example cms-sanity cms-sanity-app
-```
-
-```bash
-pnpm create next-app --example cms-sanity cms-sanity-app
-```
-
-### Connect to a Sanity project
-
-Run this to select from your existing Sanity projects, or create a new one:
-
-```bash
-(cd studio && npx @sanity/cli init)
-```
-
-The CLI will update [`sanity.json`] with the project ID and dataset name.
-
-### Set up environment variables
-
-Copy the [`.env.local.example`] file in this directory to `.env.local` (which will be ignored by Git):
-
-```bash
-cp .env.local.example .env.local
-```
-
-Then set these variables in `.env.local`:
-
-- `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.
-
-Your `.env.local` file should look like this:
-
-```bash
-NEXT_PUBLIC_SANITY_PROJECT_ID=...
-NEXT_PUBLIC_SANITY_DATASET=...
-SANITY_API_READ_TOKEN=...
-```
-
-</details>
-
-## Step 2. Configure CORS for localhost
-
-Needed for live previewing unpublished/draft content.
-
-```bash
-npm --prefix studio run cors:add -- http://localhost:3000 --credentials
-```
-
-## Step 3. Run Next.js locally in development mode
+## Step 2. Run Next.js locally in development mode
 
 ```bash
 npm install && npm run dev
@@ -157,6 +82,8 @@ 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).
 
+Note: This also installs dependencies for Sanity Studio as a post-install step.
+
 ## Step 4. Populate content
 
 In another terminal start up the studio:
@@ -167,6 +94,8 @@ npm run studio:dev
 
 Your studio should be up and running on [http://localhost:3333](http://localhost:3333)!
 
+### Create content
+
 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)
@@ -216,7 +145,7 @@ We're all set to do some content creation!
 
 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
+## Step 4. 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
 
@@ -317,7 +246,7 @@ npx vercel env add SANITY_STUDIO_PREVIEW_SECRET
 npx vercel --prod
 ```
 
-## Step 6. Deploy your Studio and publish from anywhere
+## Step 5. Deploy your Studio and publish from anywhere
 
 Live previewing content is fun, but collaborating on content in real-time is next-level:
 
@@ -344,7 +273,7 @@ Success! Studio deployed to https://cms-sanity.sanity.studio/
 
 This snippet is stripped from verbose information, you'll see a lot of extra stuff in your terminal.
 
-## Step 7. Setup Revalidation Webhook
+## Step 6. Setup Revalidation Webhook
 
 Using GROQ Webhooks Next.js can rebuild pages that have changed content. It rebuilds so fast it can almost compete with Preview Mode.
 
@@ -373,7 +302,7 @@ npx vercel --prod
 Wormhole into the [manager](https://manage.sanity.io/) by running:
 
 ```bash
-(cd studio && npx @sanity/cli hook create)
+(cd studio && npx sanity hook create)
 ```
 
 - **Name** it "On-demand Revalidation".

examples/cms-sanity/components/cover-image.js

@@ -12,7 +12,6 @@ export default function CoverImage({ title, slug, image: source, priority }) {
     >
       <Image
         className="w-full h-auto"
-        layout="responsive"
         width={2000}
         height={1000}
         alt={`Cover Image for ${title}`}

examples/cms-sanity/components/landing-preview.js

@@ -0,0 +1,8 @@
+import { usePreview } from '../lib/sanity'
+import { indexQuery } from '../lib/queries'
+import Landing from './landing'
+
+export default function LandingPreview({ allPosts }) {
+  const previewAllPosts = usePreview(null, indexQuery)
+  return <Landing data={previewAllPosts ?? allPosts} preview />
+}

examples/cms-sanity/components/landing.js

@@ -0,0 +1,34 @@
+import Layout from './layout'
+import Head from 'next/head'
+import { CMS_NAME } from '../lib/constants'
+import Container from './container'
+import Intro from './intro'
+import HeroPost from './hero-post'
+import MoreStories from './more-stories'
+
+export default function Landing({ allPosts, preview }) {
+  const [heroPost, ...morePosts] = allPosts || []
+  return (
+    <>
+      <Layout preview={preview}>
+        <Head>
+          <title>{`Next.js Blog Example with ${CMS_NAME}`}</title>
+        </Head>
+        <Container>
+          <Intro />
+          {heroPost && (
+            <HeroPost
+              title={heroPost.title}
+              coverImage={heroPost.coverImage}
+              date={heroPost.date}
+              author={heroPost.author}
+              slug={heroPost.slug}
+              excerpt={heroPost.excerpt}
+            />
+          )}
+          {morePosts.length > 0 && <MoreStories posts={morePosts} />}
+        </Container>
+      </Layout>
+    </>
+  )
+}

examples/cms-sanity/components/more-stories.js

@@ -1,4 +1,4 @@
-import PostPreview from '../components/post-preview'
+import PostPlug from './post-plug'
 
 export default function MoreStories({ posts }) {
   return (
@@ -8,7 +8,7 @@ export default function MoreStories({ posts }) {
       </h2>
       <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
-          <PostPreview
+          <PostPlug
             key={post.slug}
             title={post.title}
             coverImage={post.coverImage}

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

@@ -0,0 +1,31 @@
+import Avatar from '../components/avatar'
+import Date from '../components/date'
+import CoverImage from './cover-image'
+import Link from 'next/link'
+
+export default function PostPlug({
+  title,
+  coverImage,
+  date,
+  excerpt,
+  author,
+  slug,
+}) {
+  return (
+    <div>
+      <div className="mb-5">
+        <CoverImage slug={slug} title={title} image={coverImage} />
+      </div>
+      <h3 className="mb-3 text-3xl leading-snug">
+        <Link href={`/posts/${slug}`} className="hover:underline">
+          {title}
+        </Link>
+      </h3>
+      <div className="mb-4 text-lg">
+        <Date dateString={date} />
+      </div>
+      <p className="mb-4 text-lg leading-relaxed">{excerpt}</p>
+      {author && <Avatar name={author.name} picture={author.picture} />}
+    </div>
+  )
+}

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

@@ -1,31 +1,9 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import { usePreview } from '../lib/sanity'
+import { postQuery } from '../lib/queries'
+import Post from './post'
 
-export default function PostPreview({
-  title,
-  coverImage,
-  date,
-  excerpt,
-  author,
-  slug,
-}) {
-  return (
-    <div>
-      <div className="mb-5">
-        <CoverImage slug={slug} title={title} image={coverImage} />
-      </div>
-      <h3 className="mb-3 text-3xl leading-snug">
-        <Link href={`/posts/${slug}`} className="hover:underline">
-          {title}
-        </Link>
-      </h3>
-      <div className="mb-4 text-lg">
-        <Date dateString={date} />
-      </div>
-      <p className="mb-4 text-lg leading-relaxed">{excerpt}</p>
-      {author && <Avatar name={author.name} picture={author.picture} />}
-    </div>
-  )
+export default function PostPreview({ data }) {
+  const slug = data?.post?.slug
+  const previewData = usePreview(null, postQuery, { slug })
+  return <Post data={previewData ?? data} preview />
 }

examples/cms-sanity/components/post.js

@@ -0,0 +1,65 @@
+import { useRouter } from 'next/router'
+import { urlForImage } from '../lib/sanity'
+import ErrorPage from 'next/error'
+import Layout from './layout'
+import Container from './container'
+import Header from './header'
+import PostTitle from './post-title'
+import Head from 'next/head'
+import { CMS_NAME } from '../lib/constants'
+import PostHeader from './post-header'
+import PostBody from './post-body'
+import SectionSeparator from './section-separator'
+import MoreStories from './more-stories'
+
+export default function Post({ data = {}, preview = false }) {
+  const router = useRouter()
+
+  const { post, morePosts } = data
+  const slug = post?.slug
+
+  if (!router.isFallback && !slug) {
+    return <ErrorPage statusCode={404} />
+  }
+
+  return (
+    <Layout preview={preview}>
+      <Container>
+        <Header />
+        {router.isFallback ? (
+          <PostTitle>Loading…</PostTitle>
+        ) : (
+          <>
+            <article>
+              <Head>
+                <title>
+                  {post.title ?? `Next.js Blog Example with ${CMS_NAME}`}
+                </title>
+                {post.coverImage?.asset?._ref && (
+                  <meta
+                    key="ogImage"
+                    property="og:image"
+                    content={urlForImage(post.coverImage)
+                      .width(1200)
+                      .height(627)
+                      .fit('crop')
+                      .url()}
+                  />
+                )}
+              </Head>
+              <PostHeader
+                title={post.title}
+                coverImage={post.coverImage}
+                date={post.date}
+                author={post.author}
+              />
+              <PostBody content={post.content} />
+            </article>
+            <SectionSeparator />
+            {morePosts.length > 0 && <MoreStories posts={morePosts} />}
+          </>
+        )}
+      </Container>
+    </Layout>
+  )
+}

examples/cms-sanity/lib/sanity.js

@@ -1,11 +1,14 @@
 import createImageUrlBuilder from '@sanity/image-url'
-import { createPreviewSubscriptionHook } from 'next-sanity'
+import { definePreview } from 'next-sanity/preview'
 import { sanityConfig } from './config'
 
 export const imageBuilder = createImageUrlBuilder(sanityConfig)
 
 export const urlForImage = (source) =>
   imageBuilder.image(source).auto('format').fit('max')
 
-export const usePreviewSubscription =
-  createPreviewSubscriptionHook(sanityConfig)
+export const usePreview = definePreview({
+  projectId: sanityConfig.projectId,
+  dataset: sanityConfig.dataset,
+  onPublicAccessOnly: () => console.log('lol'),
+})