Where to set ProjectID in Sanity-Next project with .env.local file?

I can help you troubleshoot this "Project ID is not set" error! This is a common issue when setting up a Sanity-Next project, and it usually comes down to environment variable configuration and understanding the difference between Sanity Studio and Next.js environment variables.

Understanding the Two Different Systems

First, it's important to know that Sanity Studio and Next.js use different environment variable conventions:

• Sanity Studio uses the SANITY_STUDIO_ prefix for its environment variables
• Next.js uses the NEXT_PUBLIC_ prefix for client-side environment variables

These are separate systems with different requirements.

For Your Next.js Application

If you're getting the "Project ID is not set" error in your Next.js app (not in Sanity Studio), your .env.local file should be in the root of your Next.js application folder.

Create or edit .env.local in your Next.js root:

NEXT_PUBLIC_SANITY_PROJECT_ID="your-project-id-here"
NEXT_PUBLIC_SANITY_DATASET="production"

The NEXT_PUBLIC_ prefix is a Next.js requirement for exposing variables to client-side code. This has nothing to do with Sanity - it's how Next.js handles environment variables in the browser.

Then use these in your Sanity client configuration:

import { createClient } from '@sanity/client';

export const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  apiVersion: '2024-01-01',
  useCdn: true,
});

For Sanity Studio (Different Use Case)

If you need environment variables in your Sanity Studio itself, you'd use a different approach with .env.development or .env.production files in your Studio folder:

SANITY_STUDIO_API_PROJECT_ID=your-project-id
SANITY_STUDIO_API_DATASET=production

Note the SANITY_STUDIO_ prefix instead. These are only for configuring the Studio application itself, not for your Next.js frontend.

Finding Your Project ID

You can find your Project ID in:

• Your sanity.config.js or sanity.config.ts file (in the Studio folder)
• The Sanity management console
• By running sanity projects list in your terminal

The Project ID is not sensitive information - it will be visible in your frontend code and image URLs, so it's safe to commit to version control.

Common Project Structure

Many Sanity-Next projects have separate folders:

my-project/
├── studio/          (Sanity Studio - uses SANITY_STUDIO_ variables)
└── app/             (Next.js app - needs NEXT_PUBLIC_ variables in .env.local)

Make sure your .env.local is at the root of wherever your Next.js package.json is located.

Important Final Steps

1. Restart your dev server: After creating or modifying .env.local, you must restart your Next.js development server
2. Check your client configuration: Verify that your Sanity client is actually reading process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
3. No typos: Double-check spelling in both your .env.local file and where you reference the variables

The key takeaway: NEXT_PUBLIC_ is for Next.js client-side code, while SANITY_STUDIO_ is specifically for Sanity Studio configuration. For a Next.js app consuming Sanity data, you'll use NEXT_PUBLIC_ prefixed variables.