From 56d205bd05fcf9f9d90b90c88730e68a42707a89 Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Wed, 23 Feb 2022 13:21:37 +0100 Subject: [PATCH 01/12] docs: improve step 5 --- examples/cms-sanity/README.md | 29 +++++++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md index 7dfcb0a530ea..4b3e1dc5901c 100644 --- a/examples/cms-sanity/README.md +++ b/examples/cms-sanity/README.md @@ -85,11 +85,30 @@ SANITY_API_TOKEN=... SANITY_PREVIEW_SECRET=... ``` -### Step 5. Prepare project for previewing - -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. +### Step 5. Prepare the project for previewing + +1. Install the `@sanity/production-preview` plugin with `sanity install @sanity/production-preview`. + +2. Create a file called `resolveProductionUrl.js` (we'll get back to that file in a bit). + +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" <-- point to the path of the resolveProductionUrl.js you created in step 2 ++ } + ] +} +``` -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 +119,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. From 2468025dbe6e6735167a4b492ffb37bcc972033f Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Mon, 28 Feb 2022 11:06:43 +0100 Subject: [PATCH 02/12] docs: upgrade next-sanity --- examples/cms-sanity/components/cover-image.js | 16 ++++++++++------ examples/cms-sanity/lib/sanity.js | 6 ++---- examples/cms-sanity/package.json | 3 ++- 3 files changed, 14 insertions(+), 11 deletions(-) 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 ? ( - {`Cover + > + {`Cover + ) : (
) diff --git a/examples/cms-sanity/lib/sanity.js b/examples/cms-sanity/lib/sanity.js index 76cedf4cb57d..1936305c132c 100644 --- a/examples/cms-sanity/lib/sanity.js +++ b/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) diff --git a/examples/cms-sanity/package.json b/examples/cms-sanity/package.json index 494c94ac75ff..26474a1bacbf 100644 --- a/examples/cms-sanity/package.json +++ b/examples/cms-sanity/package.json @@ -7,10 +7,11 @@ }, "dependencies": { "@sanity/block-content-to-react": "2.0.7", + "@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" }, From 8af76f53535feb6650ffc9a14123ba2eb3dfb132 Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Mon, 28 Feb 2022 11:07:21 +0100 Subject: [PATCH 03/12] docs: upgrade tailwind --- examples/cms-sanity/components/more-stories.js | 2 +- examples/cms-sanity/package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/cms-sanity/components/more-stories.js b/examples/cms-sanity/components/more-stories.js index dcdd9b4e6ae7..57fdbb6c4659 100644 --- a/examples/cms-sanity/components/more-stories.js +++ b/examples/cms-sanity/components/more-stories.js @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {

More Stories

-
+
{posts.map((post) => ( Date: Mon, 28 Feb 2022 11:09:03 +0100 Subject: [PATCH 04/12] docs: replace `@sanity/block-content-to-react` with `@portabletext/react` --- examples/cms-sanity/README.md | 2 +- examples/cms-sanity/components/post-body.js | 6 +++--- examples/cms-sanity/package.json | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md index 4b3e1dc5901c..73eafcbddad4 100644 --- a/examples/cms-sanity/README.md +++ b/examples/cms-sanity/README.md @@ -102,7 +102,7 @@ SANITY_PREVIEW_SECRET=... //... + { + "implements": "part:@sanity/production-preview/resolve-production-url", -+ "path": "./resolveProductionUrl.js" <-- point to the path of the resolveProductionUrl.js you created in step 2 ++ "path": "./resolveProductionUrl.js" + } ] } diff --git a/examples/cms-sanity/components/post-body.js b/examples/cms-sanity/components/post-body.js index 98a958318f08..2e0cb68a48dc 100644 --- a/examples/cms-sanity/components/post-body.js +++ b/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 ( -
- +
+
) } diff --git a/examples/cms-sanity/package.json b/examples/cms-sanity/package.json index 83eed8988d07..8b576f61ae8c 100644 --- a/examples/cms-sanity/package.json +++ b/examples/cms-sanity/package.json @@ -6,7 +6,7 @@ "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", From 30df66993968479ffddd118e573f3f513bce6df8 Mon Sep 17 00:00:00 2001 From: even westvang Date: Mon, 28 Feb 2022 23:32:00 +0100 Subject: [PATCH 05/12] WIP copy changes (#1) --- examples/cms-sanity/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md index 73eafcbddad4..58568994e3bf 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/) @@ -189,3 +194,9 @@ 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 with GROQ powered webhooks +- Mount your preview inside the Sanity Studio for comfortable side-by-side editing + From 625219d9ea749264b5135c272f8daa633c891bb3 Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Wed, 23 Feb 2022 13:21:37 +0100 Subject: [PATCH 06/12] docs: improve step 5 --- examples/cms-sanity/README.md | 29 +++++++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md index 7dfcb0a530ea..4b3e1dc5901c 100644 --- a/examples/cms-sanity/README.md +++ b/examples/cms-sanity/README.md @@ -85,11 +85,30 @@ SANITY_API_TOKEN=... SANITY_PREVIEW_SECRET=... ``` -### Step 5. Prepare project for previewing - -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. +### Step 5. Prepare the project for previewing + +1. Install the `@sanity/production-preview` plugin with `sanity install @sanity/production-preview`. + +2. Create a file called `resolveProductionUrl.js` (we'll get back to that file in a bit). + +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" <-- point to the path of the resolveProductionUrl.js you created in step 2 ++ } + ] +} +``` -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 +119,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. From d3e6e79edad556ebd71001ff00ca89f6d4eda282 Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Mon, 28 Feb 2022 11:06:43 +0100 Subject: [PATCH 07/12] docs: upgrade next-sanity --- examples/cms-sanity/components/cover-image.js | 16 ++++++++++------ examples/cms-sanity/lib/sanity.js | 6 ++---- examples/cms-sanity/package.json | 3 ++- 3 files changed, 14 insertions(+), 11 deletions(-) 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 ? ( - {`Cover + > + {`Cover +
) : (
) diff --git a/examples/cms-sanity/lib/sanity.js b/examples/cms-sanity/lib/sanity.js index 76cedf4cb57d..1936305c132c 100644 --- a/examples/cms-sanity/lib/sanity.js +++ b/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) diff --git a/examples/cms-sanity/package.json b/examples/cms-sanity/package.json index 494c94ac75ff..26474a1bacbf 100644 --- a/examples/cms-sanity/package.json +++ b/examples/cms-sanity/package.json @@ -7,10 +7,11 @@ }, "dependencies": { "@sanity/block-content-to-react": "2.0.7", + "@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" }, From 123551eb17e490270e8d3e659c9677e985bcb077 Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Mon, 28 Feb 2022 11:07:21 +0100 Subject: [PATCH 08/12] docs: upgrade tailwind --- examples/cms-sanity/components/more-stories.js | 2 +- examples/cms-sanity/package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/cms-sanity/components/more-stories.js b/examples/cms-sanity/components/more-stories.js index dcdd9b4e6ae7..57fdbb6c4659 100644 --- a/examples/cms-sanity/components/more-stories.js +++ b/examples/cms-sanity/components/more-stories.js @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {

More Stories

-
+
{posts.map((post) => ( Date: Mon, 28 Feb 2022 11:09:03 +0100 Subject: [PATCH 09/12] docs: replace `@sanity/block-content-to-react` with `@portabletext/react` --- examples/cms-sanity/README.md | 2 +- examples/cms-sanity/components/post-body.js | 6 +++--- examples/cms-sanity/package.json | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md index 4b3e1dc5901c..73eafcbddad4 100644 --- a/examples/cms-sanity/README.md +++ b/examples/cms-sanity/README.md @@ -102,7 +102,7 @@ SANITY_PREVIEW_SECRET=... //... + { + "implements": "part:@sanity/production-preview/resolve-production-url", -+ "path": "./resolveProductionUrl.js" <-- point to the path of the resolveProductionUrl.js you created in step 2 ++ "path": "./resolveProductionUrl.js" + } ] } diff --git a/examples/cms-sanity/components/post-body.js b/examples/cms-sanity/components/post-body.js index 98a958318f08..2e0cb68a48dc 100644 --- a/examples/cms-sanity/components/post-body.js +++ b/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 ( -
- +
+
) } diff --git a/examples/cms-sanity/package.json b/examples/cms-sanity/package.json index 83eed8988d07..8b576f61ae8c 100644 --- a/examples/cms-sanity/package.json +++ b/examples/cms-sanity/package.json @@ -6,7 +6,7 @@ "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", From 75a02876f0215a2371cf2ac8ab86e849618f03c5 Mon Sep 17 00:00:00 2001 From: even westvang Date: Mon, 28 Feb 2022 23:32:00 +0100 Subject: [PATCH 10/12] WIP copy changes (#1) --- examples/cms-sanity/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md index 73eafcbddad4..58568994e3bf 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/) @@ -189,3 +194,9 @@ 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 with GROQ powered webhooks +- Mount your preview inside the Sanity Studio for comfortable side-by-side editing + From 8a8ab0481333db5874ed08f9c152b8c3d425267d Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Tue, 1 Mar 2022 12:55:59 +0100 Subject: [PATCH 11/12] docs: tweaks to the readme --- examples/cms-sanity/README.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md index 58568994e3bf..bb8252cac0c9 100644 --- a/examples/cms-sanity/README.md +++ b/examples/cms-sanity/README.md @@ -3,10 +3,10 @@ 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/) @@ -92,11 +92,11 @@ SANITY_PREVIEW_SECRET=... ### Step 5. Prepare the project for previewing -1. Install the `@sanity/production-preview` plugin with `sanity install @sanity/production-preview`. +5.1. Install the `@sanity/production-preview` plugin with `sanity install @sanity/production-preview`. -2. Create a file called `resolveProductionUrl.js` (we'll get back to that file in a bit). +5.2. Create a file called `resolveProductionUrl.js` (we'll get back to that file in a bit). -3. Open your studio's sanity.json, and add the following entry to the parts-array: +5.3. Open your studio's sanity.json, and add the following entry to the parts-array: ```diff { @@ -199,4 +199,3 @@ Alternatively, you can deploy using our template by clicking on the Deploy butto - Invalidate your routes in production on-demand with GROQ powered webhooks - Mount your preview inside the Sanity Studio for comfortable side-by-side editing - From 49103ec0335eb79b1327427b5b1371b4062091b7 Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Tue, 1 Mar 2022 23:49:42 +0100 Subject: [PATCH 12/12] Update examples/cms-sanity/README.md Co-authored-by: Lee Robinson --- examples/cms-sanity/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md index bb8252cac0c9..e7b5d268d7f9 100644 --- a/examples/cms-sanity/README.md +++ b/examples/cms-sanity/README.md @@ -197,5 +197,5 @@ Alternatively, you can deploy using our template by clicking on the Deploy butto #### Next steps -- Invalidate your routes in production on-demand with GROQ powered webhooks +- 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