Get help on Discord

Accessing Sanity environment variables from Next.js outside studio

1 replies
Last updated: Apr 13, 2021
Hi, is there a clean way to access the environment variables in sanity.json from next.js? I'm going off of the Next.js blog tutorial: https://www.sanity.io/blog/build-your-own-blog-with-sanity-and-next-js and would like to configure the client to use environment variables in sanity.json.
The tutorial says to copy what's in sanity.json (below). But I'd like the deployed version in production to know to use the production data set. I'm outside of the studio dir and therefore am not running sanity start or sanity build. I'm deploying using Netlify


// client.js
import sanityClient from '@sanity/client'

export default sanityClient({
  projectId: 'your-project-id', // you can find this in sanity.json
  dataset: 'production', // or the name you chose in step 1
  useCdn: true // `false` if you want to ensure fresh data
})
AI Update

The modern approach is to use environment variables with Next.js, and you don't need to access sanity.json from your Next.js code at all. Here's how to set this up properly:

Using Environment Variables in Next.js

Create a .env.local file in your Next.js project root (not in the Studio directory):

NEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id
NEXT_PUBLIC_SANITY_DATASET=production

The NEXT_PUBLIC_ prefix is important - it tells Next.js to expose these variables to the browser.

Then update your client configuration:

// lib/sanity.js or client.js
import { createClient } from '@sanity/client'
// or if using next-sanity:
// import { createClient } from 'next-sanity'

export const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  apiVersion: '2024-01-01', // use current date
  useCdn: true, // set to false if you need fresh data
})

For Production (Netlify)

In your Netlify dashboard, add the same environment variables:

  1. Go to Site Settings → Environment Variables
  2. Add NEXT_PUBLIC_SANITY_PROJECT_ID with your project ID
  3. Add NEXT_PUBLIC_SANITY_DATASET with production (or your production dataset name)

This way, your local development uses the values from .env.local, while your Netlify deployment uses the values from Netlify's environment settings. You can even set different values for different Netlify deploy contexts (production, preview, etc.).

Modern Approach with next-sanity

If you're starting fresh or can update, I'd recommend using the next-sanity package, which is the official toolkit for Next.js integration. When you run sanity init in a Next.js project, it automatically sets up environment variables and creates a properly configured client for you.

The key insight is that sanity.json is a Studio v2 configuration file that's separate from your Next.js app - you don't need to access it from Next.js. Environment variables are the clean, standard way to configure your Sanity client for different environments.

Show original thread
1 reply
your 
client.js
file
import sanityClient from '@sanity/client'
const client = sanityClient({
        projectId: process.env.SANITY_PROJECT_ID,
        dataset: process.env.SANITY_DATASET,
        token: '', // or leave blank for unauthenticated usage
        useCdn: false, // `true` or `false` if you want to ensure fresh data
    })

.env.local
file at the project root level
SANITY_PROJECT_ID=here
SANITY_DATASET=here
no quotes
Next JS supports .env files

https://nextjs.org/docs/basic-features/environment-variables I hope that helps

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?