Next.js中Sanity配置敏感信息泄露及复用与前端图片处理问题

问题1：API目录内创建配置文件复用常量完全可行，这是隐藏敏感信息+避免重复代码的最佳实践 #

Next.js 的 pages/api/（App Router 下为 app/api/）目录下的所有文件仅在服务器端运行，不会被打包到客户端代码中，所以你可以放心在这里存放包含敏感信息的配置，不用担心被前端开发者工具获取到。

具体实现步骤：

• 在 API 目录下创建专属配置文件夹（比如 pages/api/_sanity/），新建 config.js 文件：

// pages/api/_sanity/config.js
export const sanityConfig = {
  projectId: '你的项目ID',
  dataset: '你的数据集',
  apiVersion: '2024-01-01',
  token: process.env.SANITY_API_TOKEN, // 敏感信息用环境变量存储更安全
  useCdn: false // 服务器端请求关闭CDN，保证数据时效性
};

• 在其他 API 路由文件中直接导入该配置复用：

// pages/api/get-posts.js
import { sanityClient } from '@sanity/client';
import { sanityConfig } from './_sanity/config';

const client = sanityClient(sanityConfig);

export default async function handler(req, res) {
  const posts = await client.fetch('*[_type == "post"]');
  res.status(200).json(posts);
}

问题2：前端使用urlFor无需敏感配置，拆分公开配置单独存放即可 #

urlFor 本质是生成 Sanity 图片 CDN 链接，仅需要公开的项目配置（projectId、dataset、apiVersion），不需要敏感的 API token。你可以把配置拆分为「公开部分」和「敏感部分」：

1. 创建客户端可访问的公开配置文件，比如 lib/sanity/public-config.js：

// lib/sanity/public-config.js
export const publicSanityConfig = {
  projectId: '你的项目ID',
  dataset: '你的数据集',
  apiVersion: '2024-01-01',
  useCdn: true // 前端开启CDN提升图片加载速度
};

2. 前端用公开配置创建 Sanity 客户端，专门处理图片：

// components/PostImage.js
import { sanityClient } from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';
import { publicSanityConfig } from '@/lib/sanity/public-config';

const client = sanityClient(publicSanityConfig);
const builder = imageUrlBuilder(client);

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

// 使用示例
export default function PostImage({ image }) {
  return <img src={urlFor(image).width(800).url()} alt="文章封面" />;
}

3. API 端的配置可复用公开配置，再补充敏感信息：

// pages/api/_sanity/config.js
import { publicSanityConfig } from '@/lib/sanity/public-config';

export const sanityConfig = {
  ...publicSanityConfig,
  token: process.env.SANITY_API_TOKEN,
  useCdn: false // 服务器端关闭CDN
};

这种拆分方式既保证前端能正常使用 urlFor，又不会暴露敏感信息，同时还复用了公开配置代码，避免重复。

内容的提问来源于stack exchange，提问作者Caio b .