Add CMS example for Sanity

examples/cms-sanity/.env.example

@@ -1 +1,2 @@
-NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET=
+NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET=
+SANITY_PROJECT_ID=

examples/cms-sanity/README.md

@@ -13,9 +13,9 @@ This example showcases Next.js's [Static Generation](/docs/basic-features/pages.
 Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npm init next-app --example cms-Sanity cms-Sanity-app
+npm init next-app --example cms-sanity cms-sanity-app
 # or
-yarn create next-app --example cms-Sanity cms-Sanity-app
+yarn create next-app --example cms-sanity cms-sanity-app
 ```
 
 ### Download manually
@@ -43,15 +43,35 @@ This will be where we manage our data.
 
 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.
 
-After initializing get the `projectId` and `dataset` values from the `sanity.json` file that was generated and add them to `lib/sanity.js` in the example.
+After initializing, get the `projectId` value from the `sanity.json` file that was generated for the next step.
 
-### Step 3. Copy the schema file
+### Step 3. Set up environment variables
+
+First, copy the `.env.example` file in this directory to `.env` (which will be ignored by Git):
+
+```bash
+cp .env.example .env
+```
+
+Then set each variable on `.env`:
+
+- `NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](/docs/advanced-features/preview-mode.md).
+- `SANITY_PROJECT_ID` the `projectId` from the previous step
+
+Your `.env` file should look like this:
+
+```bash
+NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET=...
+SANITY_PROJECT_ID=...
+```
+
+### Step 4. Copy the schema file
 
 After initializing your Sanity studio project there should be a `schemas` folder.
 
 To get up and running we want to copy the schema file from [`./schemas/schema.js`](./schemas/schema.js) to the studio project to use for creating/editing content.
 
-### Step 4. Populate Content
+### Step 5. Populate Content
 
 To add some content go to your Sanity studio project where we added the schema file and run `sanity start`.
 
@@ -71,26 +91,6 @@ Next, select **Post** and create a new record.
 
 **Important:** For each post record, you need to click **Publish** after saving. If not, the post will be in the draft state.
 
-### Step 5. Set up environment variables
-
-First, create a random preview secret.
-
-Next, copy the `.env.example` file in this directory to `.env` (which will be ignored by Git):
-
-```bash
-cp .env.example .env
-```
-
-Then set each variable on `.env`:
-
-- `NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](/docs/advanced-features/preview-mode.md).
-
-Your `.env` file should look like this:
-
-```bash
-NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET=...
-```
-
 ### Step 6. Run Next.js in development mode
 
 ```bash
@@ -110,7 +110,7 @@ Your blog should be up and running on [http://localhost:3000](http://localhost:3
 On Sanity, go to one of the posts you've created and:
 
 - **Update the title**. For example, you can add `[Draft]` in front of the title.
-- Click **Save**, but **DO NOT** click **Publish**. By doing this, the post will be in the draft state.
+- 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.
 
 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](/docs/advanced-features/preview-mode.md)).
 

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

@@ -1,14 +1,22 @@
 import cn from 'classnames'
 import Link from 'next/link'
+import { imageBuilder } from '../lib/api'
 
 export default function CoverImage({ title, url, slug }) {
   const image = (
     <img
-      src={url}
+      width={2000}
+      height={1000}
       alt={`Cover Image for ${title}`}
       className={cn('shadow-small', {
         'hover:shadow-medium transition-shadow duration-200': slug,
       })}
+      style={{ maxWidth: '100%', maxHeight: '100%' }}
+      src={imageBuilder
+        .image(url)
+        .height(1000)
+        .width(2000)
+        .url()}
     />
   )
 

examples/cms-sanity/lib/api.js

@@ -1,4 +1,5 @@
 import client, { previewClient } from './sanity'
+import sanityImage from '@sanity/image-url'
 
 const postFields = `
   name,
@@ -12,6 +13,8 @@ const postFields = `
 
 const getClient = preview => (preview ? previewClient : client)
 
+export const imageBuilder = sanityImage(client)
+
 export async function getPreviewPostBySlug(slug) {
   const data = await getClient(true).fetch(
     `*[_type == "post" && slug.current == $slug] | order(date desc){

examples/cms-sanity/lib/sanity.js

@@ -2,8 +2,8 @@ import sanityClient from '@sanity/client'
 
 const options = {
   // Find your project ID and dataset in `sanity.json` in your studio project
-  projectId: 'lsd8pmjw',
   dataset: 'production',
+  projectId: process.env.SANITY_PROJECT_ID,
   useCdn: process.env.NODE_ENV === 'production',
   // useCdn == true gives fast, cheap responses using a globally distributed cache.
   // Set this to false if your application require the freshest possible

examples/cms-sanity/next.config.js

@@ -1,5 +1,7 @@
 require('dotenv').config()
 
 module.exports = {
-  env: {},
+  env: {
+    SANITY_PROJECT_ID: process.env.SANITY_PROJECT_ID,
+  },
 }

examples/cms-sanity/now.json

@@ -1,5 +1,10 @@
 {
   "env": {
-    "NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET": "@next_example_cms_datocms_preview_secret"
+    "NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET": "@next_example_cms_sanity_preview_secret"
+  },
+  "build": {
+    "env": {
+      "SANITY_PROJECT_ID": "@next_example_cms_sanity_project_id"
+    }
   }
 }

examples/cms-sanity/pages/api/preview.js

@@ -4,7 +4,7 @@ export default async (req, res) => {
   // Check the secret and next parameters
   // This secret should only be know to this API route and the CMS
   if (
-    req.query.secret !== process.env.NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET ||
+    req.query.secret !== process.env.NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET ||
     !req.query.slug
   ) {
     return res.status(401).json({ message: 'Invalid token' })