如何解决Sanity中缺失NEXT_PUBLIC_SANITY_DATASET环境变量的错误？

你遇到的是Next.js + Sanity集成时的环境变量配置问题，以下是针对性的修复步骤：

1. 检查本地环境变量文件 #

确保项目根目录下存在.env.local文件（文件名必须完全一致，Next.js默认加载这个文件的本地环境变量），并添加正确的变量配置：

NEXT_PUBLIC_SANITY_DATASET=你的Sanity数据集名称（比如production、development）

注意：变量名大小写完全不能错，NEXT_PUBLIC_前缀必须保留——这是Next.js标识「可在客户端代码中访问」的环境变量的规则。

2. 重启开发服务器 #

Next.js不会自动重载环境变量的修改，改完.env.local后，必须关掉当前运行的npm run dev/yarn dev命令，重新启动服务器才能生效。

3. 验证Sanity配置文件的引用 #

检查你的Sanity配置文件（通常是lib/sanity.ts或sanity.config.ts），确认代码里正确引用了这个变量，比如：

export const sanityConfig = {
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production", // 可加默认值兜底
  apiVersion: "2024-01-01",
  // 其他配置项...
};

4. 部署环境的额外检查 #

如果是在Vercel等平台部署，需要在平台的项目「环境变量」设置面板中添加NEXT_PUBLIC_SANITY_DATASET，并且勾选「Expose to Client Components」选项，否则客户端代码无法读取该变量。

你提供的错误信息： #

Uncaught error: Missing environment variable: NEXT_PUBLIC_SANITY_DATASET
http://localhost:3333/static/sanity-5377bc10.js:4605:43956
Error: Missing environment variable: NEXT_PUBLIC_SANITY_DATASET
at Wke (http://localhost:3333/static/sanity-5377bc10.js:4605:43956)
at http://localhost:3333/static/sanity-5377bc10.js:4605:43720

错误截图：

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