Sanity Studio无法读取环境变量问题求助

Next.js 默认限制不带 NEXT_PUBLIC_ 前缀的环境变量仅在服务器端代码中可用，无法在客户端（浏览器）环境读取。你在客户端运行的 Sanity Studio（或客户端渲染组件）尝试读取 SANITY_STUDIO_PROJECT_ID 这个非公开变量，导致变量值为空，进而抛出「Configuration must contain projectId」的错误。

1. 纠正认知：projectId并非敏感信息 #

Sanity 的 projectId 是公开可查的（比如官方 Studio 地址格式为 https://<projectId>.sanity.studio），不需要刻意隐藏。真正需要保护的是Sanity API 令牌（token），这类令牌绝不能加 NEXT_PUBLIC_ 前缀，仅能在服务器端使用。如果只是客户端需要初始化 Sanity Client，直接使用 NEXT_PUBLIC_SANITY_STUDIO_PROJECT_ID 前缀的变量完全安全。

2. 用 Next.js API 路由代理 Sanity 请求 #

如果确实不想在客户端暴露任何 Sanity 标识，可以通过 API 路由将所有 Sanity 请求转到服务器端处理：

服务器端 API 路由示例（pages/api/sanity/[...path].ts） #

import { createClient } from '@sanity/client';
import type { NextApiRequest, NextApiResponse } from 'next';

const sanityClient = createClient({
  dataset: process.env.SANITY_STUDIO_DATASET || 'production',
  projectId: process.env.SANITY_STUDIO_PROJECT_ID as string,
  apiVersion: '2022-03-07',
  useCdn: false,
  // 若需访问私有数据集，在此添加私有令牌（无NEXT_PUBLIC_前缀）
  // token: process.env.SANITY_API_TOKEN
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { path } = req.query;
  try {
    const data = await sanityClient.fetch(path.join('/'), req.body);
    res.status(200).json(data);
  } catch (err) {
    res.status(500).json({ error: 'Sanity 请求失败' });
  }
}

客户端请求示例 #

async function fetchSanityData(query: string) {
  const res = await fetch('/api/sanity', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(query)
  });
  return res.json();
}

3. 单独部署 Sanity Studio #

将 Sanity Studio 从 Next.js 项目中分离，使用 sanity deploy 命令部署到 Sanity 官方托管平台。这样 Studio 的配置直接使用 Sanity 项目自身的环境变量，Next.js 仅在服务器端用私有变量处理数据请求，两者完全隔离，从根源避免客户端读取变量的问题。

内容的提问来源于stack exchange，提问作者StudioTime