Next.js+Sanity中useState切换时环境变量不可访问的安全解决方案

1. 转换环境变量为客户端可访问格式 #

Next.js 中仅前缀为 NEXT_PUBLIC_ 的环境变量会暴露给客户端组件。修改你的 .env 文件：

NEXT_PUBLIC_SANITY_PROJECT_ID=你的项目ID
NEXT_PUBLIC_SANITY_DATASET=你的数据集名称

2. 更新 Sanity 客户端配置 #

修改 sanity.js 文件，使用新的公开环境变量：

// sanity.js
import { createClient } from '@sanity/client'
import imageUrlBuilder from '@sanity/image-url';

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

const builder = imageUrlBuilder(client);

export function urlFor(source) {
  return builder.image(source);
}

export default client;

3. 重启开发服务器 #

修改 .env 文件后必须重启 Next.js 开发服务器，确保新环境变量被正确加载。

安全性说明 #

Sanity 的项目 ID 和数据集名称本身属于公开信息——它们会直接出现在 CDN 图片的 URL 中（例如 https://cdn.sanity.io/images/{项目ID}/{数据集}/...），任何人通过浏览器开发者工具都能查看。因此将这些变量设为 NEXT_PUBLIC_ 不会带来额外安全风险，同时能保证客户端组件在状态更新后仍可正常访问配置。

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