Sanity Configuration – Stackbit Docs

Stackbit has a tight integration to support Sanity as a content source. This guide covers what you need to know about configuring Stackbit to provide a two-way data sync between your Sanity project(s).

Here is an example configuration that uses Next.js as the site framework and uses a page content type to represent pages:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { defineStackbitConfig } from '@stackbit/types'
import { SanityContentSource } from '@stackbit/cms-sanity'

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  ssgName: 'nextjs',
  nodeVersion: '16',
  contentSources: [
    new SanityContentSource({
      rootPath: __dirname,
      studioPath: path.join(__dirname, 'studio'),
      studioUrl: '',
      projectId: process.env.SANITY_PROJECT_ID!,
      token: process.env.SANITY_ACCESS_TOKEN!,
      dataset: process.env.SANITY_DATASET || 'production',
    }),
  ],
  mapModels: ({ models }) => {
    return models.map((model) => {
      if (model.name === 'page') {
        return { ...model, type: 'page', urlPath: '/{slug}' }
      }
      return model
    })
  },
})

Notice the following:

SanityContentSource is being loaded from the @stackbit/cms-sanity which must be installed first. This package is not needed in your production site.
Sanity is being configured using local environment variables. Stackbit automatically loads a .env in the root of your project.
There is a content type with an ID of page that is being used to store page data in Sanity. That content type has a field with name slug that determines the URL path at which the page is made available.

Prerequisites#

To be able to work with Sanity, you must first have the following:

A Sanity project with content in a dataset.
The proper API keys and related environment variables that can access your content. (See options below.)
Installed @stackbit/cms-sanity package as a development dependency. (We also recommend @stackbit/types to help with configuration.)
1
npm install -D @stackbit/types @stackbit/cms-sanity

Usage#

1
2
3
4
5
6
7
8
9
10

import { SanityContentSource } from '@stackbit/cms-sanity'

new SanityContentSource({
  rootPath: '...',
  studioPath: '...',
  studioUrl: '...',
  projectId: '...',
  token: '...',
  dataset: '...',
})

Options#

dataset

Name of the dataset to be used when editing the content. This is often set as production.

Required: Yes

projectId

Unique ID value assigned to your Sanity project.

Required: Yes

rootPath

Absolute path to the front-end project. This is note the path to the studio, which is covered by studioPath.

Required: Yes

studioPath

Absolute path to the studio project, which is often contained within the rootPath project directory.

Required: No (default: ${rootPath}/studio)

studioUrl

URL to the deployed Sanity Studio instance.

Required: No

token

API access token.

Required: Yes

Storing Sensitive Values#

Sensitive values can be stored in a .env file, which will then be available when the Stackbit configuration file is loaded.

SANITY_PROJECT_ID="..."
SANITY_ACCESS_TOKEN="..."
SANITY_DATASET="..."

Model Type Inference#

The Sanity CSI module makes the following inferences:

Object models in Sanity are automatically inferred as Stackbit object models.
Document models are inferred as Stackbit data models.

Therefore, page models must be defined using the modelExtensions property.