Sanity Configuration

Configuring Sanity as one or more of a site's content sources using the @stackbit/cms-sanity module.

Netlify Create has a tight integration to support Sanity as a content source. This guide covers what you need to know about configuring Netlify Create 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. Netlify Create 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
  • 11
import { SanityContentSource } from '@stackbit/cms-sanity'

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

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)

studioInstallCommand

Custom command to run when installing Sanity studio in a cloud project. This can be ignored if using the typical studio installation pattern.

To skip install the installation process entirely, set to an unobtrusive command such as echo 'skipping install'.

Required: No

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 Netlify Create configuration file is loaded.

  • 1
  • 2
  • 3
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 Netlify Create object models.
  • Document models are inferred as Netlify Create data models.

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

Custom Studio Installation

If needing to run a custom command when installing Sanity Studio in a cloud project, using the studioInstallCommand option.

  • 1
  • 2
  • 3
  • 4
new SanityContentSource({
  studioInstallCommand: '...',
  // ...
})

Skipping Studio Installation

To skip the studio installation process entirely, specify an arbitrary and unobtrusive command. For example, to simply print "skipping install" to the console, do this:

  • 1
  • 2
  • 3
  • 4
new SanityContentSource({
  studioInstallCommand: `echo 'skipping install'`,
  // ...
})