Skip to content

Commit

Permalink
[cms-sanity] Expose the project id to the browser (vercel#14941)
Browse files Browse the repository at this point in the history
Fixes vercel#14792
Closes vercel#14814

The project id is currently used by Sanity's image builder, which is used in a React component.

@maybac It was faster for me to create a new PR but the credit goes to you, thank you!.
  • Loading branch information
lfades authored and rokinsky committed Jul 11, 2020
1 parent 5c9fec2 commit 9af3ef5
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 17 deletions.
6 changes: 3 additions & 3 deletions examples/cms-sanity/.env.local.example
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
SANITY_PREVIEW_SECRET=
SANITY_PROJECT_ID=
SANITY_API_TOKEN=
NEXT_PUBLIC_SANITY_PROJECT_ID=
SANITY_API_TOKEN=
SANITY_PREVIEW_SECRET=
16 changes: 8 additions & 8 deletions examples/cms-sanity/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas

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/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-sanity&env=SANITY_PREVIEW_SECRET,SANITY_API_TOKEN,SANITY_PROJECT_ID&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/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)

### Related examples

Expand Down Expand Up @@ -78,16 +78,16 @@ cp .env.local.example .env.local

Then set each variable on `.env.local`:

- `SANITY_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
- `SANITY_PROJECT_ID`: Get the `projectId` value from the `sanity.json` file created in step 2.
- `SANITY_API_TOKEN`: Copy the API token generated in the previous step.
- `NEXT_PUBLIC_SANITY_PROJECT_ID` should be the `projectId` value from the `sanity.json` file created in step 2.
- `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).

Your `.env.local` file should look like this:

```bash
SANITY_PREVIEW_SECRET=...
SANITY_PROJECT_ID=...
NEXT_PUBLIC_SANITY_PROJECT_ID=...
SANITY_API_TOKEN=...
SANITY_PREVIEW_SECRET=...
```

### Step 5. Prepare project for previewing
Expand Down Expand Up @@ -156,7 +156,7 @@ Now, if you go to the post page on localhost, you won't see the updated title. H

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))

You should now be able to see the updated title. To exit the preview mode, you can click on _"Click here to exit preview mode"_ at the top.
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.

### Step 10. Deploy on Vercel

Expand All @@ -172,4 +172,4 @@ 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/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/cms-sanity&env=SANITY_PREVIEW_SECRET,SANITY_API_TOKEN,SANITY_PROJECT_ID&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/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)
2 changes: 1 addition & 1 deletion examples/cms-sanity/components/cover-image.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import cn from 'classnames'
import Link from 'next/link'
import { imageBuilder } from '../lib/api'
import { imageBuilder } from '../lib/sanity'

export default function CoverImage({ title, url, slug }) {
const image = (
Expand Down
3 changes: 0 additions & 3 deletions examples/cms-sanity/lib/api.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import client, { previewClient } from './sanity'
import sanityImage from '@sanity/image-url'

const getUniquePosts = (posts) => {
const slugs = new Set()
Expand All @@ -25,8 +24,6 @@ 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){
Expand Down
10 changes: 8 additions & 2 deletions examples/cms-sanity/lib/sanity.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
import sanityClient from '@sanity/client'
import sanityImage from '@sanity/image-url'

const options = {
// Find your project ID and dataset in `sanity.json` in your studio project
dataset: 'production',
projectId: process.env.SANITY_PROJECT_ID,
projectId: process.env.NEXT_PUBLIC_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
// data always (potentially slightly slower and a bit more expensive).
}

export default sanityClient(options)
const client = sanityClient(options)

export const imageBuilder = sanityImage(client)

export const previewClient = sanityClient({
...options,
useCdn: false,
token: process.env.SANITY_API_TOKEN,
})

export default client

0 comments on commit 9af3ef5

Please sign in to comment.