Sanity Presentation with GraphQL

Important

This is the App Router version, there's also a version for Pages Router.

Note

This demo is setup with GraphQL, there's also a simpler version that uses GROQ.

Features

• Uses URQL to query the GraphQL API
• Demonstrates how to use sanity/presentation and Visual Editing without GROQ.
• Out of the box support for Vercel Visual Editing.

Demo

https://demo-graphql-presentation-nextjs.sanity.build/

Deploy your own

Use the Deploy Button below, you'll deploy the example using Vercel.

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example https://github.com/sanity-io/demo-graphql-presentation-nextjs sanity-graphql-presentation

yarn create next-app --example https://github.com/sanity-io/demo-graphql-presentation-nextjs sanity-graphql-presentation

pnpm create next-app --example https://github.com/sanity-io/demo-graphql-presentation-nextjs sanity-graphql-presentation

Configuration

• Step 1. Set up the environment
  • Reuse remote envionment variables
  • Using the Sanity CLI
    • Creating a read token
• Step 2. Run Next.js locally in development mode
• Step 3. Populate content
• Step 4. Deploy to production
• Next steps

Step 1. Set up the environment

Reuse remote envionment variables

If you started with deploying your own then you can run this to reuse the environment variables from the Vercel project and skip to the next step:

npx vercel link
npx vercel pull

Using the Sanity CLI

Copy the .env.local.example file to .env.local to get started:

cp -i .env.local.example .env.local

Run the setup command to get setup with a Sanity project, dataset and their relevant environment variables:

npm run setup

yarn setup

pnpm setup

You'll be asked multiple questions, here's a sample output of what you can expect:

Need to install the following packages:
[email protected]
Ok to proceed? (y) y
You're setting up a new project!
We'll make sure you have an account with Sanity.io.
Press ctrl + C at any time to quit.

Prefer web interfaces to terminals?
You can also set up best practice Sanity projects with
your favorite frontends on https://www.sanity.io/templates

Looks like you already have a Sanity-account. Sweet!

✔ Fetching existing projects
? Select project to use Templates [r0z1eifg]
? Select dataset to use graphql
? Would you like to add configuration files for a Sanity project in this Next.js folder? No

Detected framework Next.js, using prefix 'NEXT_PUBLIC_'
Found existing NEXT_PUBLIC_SANITY_PROJECT_ID, replacing value.
Found existing NEXT_PUBLIC_SANITY_DATASET, replacing value.

It's important that when you're asked Would you like to add configuration files for a Sanity project in this Next.js folder? that you answer No as this example is alredy setup with the required configuration files.

Creating a read token

This far your .env.local file should have values for NEXT_PUBLIC_SANITY_PROJECT_ID and NEXT_PUBLIC_SANITY_DATASET. Before you can run the project you need to setup a read token (SANITY_API_READ_TOKEN), it's used for authentication when Sanity Studio is live previewing your application.

1. Go to manage.sanity.io and select your project.
2. Click on the 🔌 API tab.
3. Click on + Add API token.
4. Name it "next blog live preview read token" and set Permissions to Viewer and hit Save.
5. Copy the token and add it to your .env.local file.

SANITY_API_READ_TOKEN="<paste your token here>"

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

NEXT_PUBLIC_SANITY_PROJECT_ID="r0z1eifg"
NEXT_PUBLIC_SANITY_DATASET="graphql"
SANITY_API_READ_TOKEN="sk..."
NEXT_PUBLIC_SANITY_GRAPHQL_TAG="default"

Caution

Make sure to add .env.local to your .gitignore file so you don't accidentally commit it to your repository.

Deploy the GraphQL API

Run this command to deploy the GraphQL API:

npm run graphql:deploy

yarn graphql:deploy

pnpm graphql:deploy

Step 2. Run Next.js locally in development mode

npm install && npm run dev

yarn install && yarn dev

pnpm install && pnpm dev

Your blog should be up and running on http://localhost:3000! If it doesn't work, post on the Slack community.

Step 3. Populate content

Open your Sanity Studio that should be running on http://localhost:3000/studio.

By default you're taken to the Presentation tool, which has a preview of the blog on the left hand side, and a list of documents on the right hand side.

View screenshot ✨

We're all set to do some content creation!

• Click on the "+ Create" button top left and select Post

• Type some dummy data for the Title

• Generate a Slug

  Now that you have a slug you should see the post show up in the preview on the left hand side ✨

  

• Fill in Content with some dummy text

  Or generate it with AI Assist ✨

  If you've enabled AI Assist you click on the sparkles ✨ button and generate a draft based on your title and then on Generate sample content.

  

• Summarize the Content in the Excerpt field

  Or have AI Assist summarize it for you ✨

  If you've enabled AI Assist you click on the sparkles ✨ button and then on Generate sample content.

  

• Select a Cover Image from Unsplash.

  Unsplash is available in the **Select** dropdown ✨

  

  Click the "Crop image" button to adjust hotspots and cropping ✨

  

  You can preview the results live on the left side, and additional formats on the right side ✨

  

• Customize the blog name, description and more.

  Click "Structure" at the top center, then on "Settings" on the left hand side ✨

  

  Once you have a "Settings" document, you can customize it inside "Presentation" ✨

  

Important

For each post record, you need to click Publish after saving for it to be visible outside Draft Mode. In production new content is using Time-based Revalidation, which means it may take up to 1 minute before changes show up. Since a stale-while-revalidate pattern is used you may need to refresh a couple of times to see the changes.

Step 4. Deploy to production

Note

If you already deployed with Vercel earlier you can skip this step.

To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.

Important

When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.

After it's deployed link your local code to the Vercel project:

npx vercel link

Tip

In production you can exit Draft Mode by clicking on "Back to published" at the top. On Preview deployments you can toggle Draft Mode in the Vercel Toolbar.

Next steps

• Join the Sanity community