Vercel部署Next.js应用时Cloudinary环境变量配置报错求助

1. 重点检查Vercel控制台的环境变量配置 #

Vercel部署时不会读取本地.env文件，所有环境变量必须手动添加到Vercel项目的「Settings → Environment Variables」中：

• 确保添加NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME、NEXT_PUBLIC_CLOUDINARY_API_KEY、CLOUDINARY_API_SECRET这几个核心变量
• 变量值不要加引号（直接填my-cloud-name，而非"my-cloud-name"）
• 添加完成后点击「Save」，并手动触发一次重新部署（Vercel不会自动用新变量重启部署）

2. 移除冗余的dotenv配置 #

Next.js 9.4及以上版本自带环境变量处理能力，无需手动引入dotenv：

• 删除代码中的import dotenv from "dotenv"和dotenv.config()语句
• 卸载dotenv依赖：执行npm uninstall dotenv

3. 修正本地.env文件的格式问题 #

本地.env文件的变量值不能带引号，否则会导致读取的变量值包含引号，引发异常：

# 错误写法
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME= "*********"

# 正确写法
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=*********

4. 确认客户端/服务端变量的前缀规则 #

• 带NEXT_PUBLIC_前缀的变量会暴露给客户端代码，适合cloud_name、api_key这类非敏感字段
• CLOUDINARY_API_SECRET是敏感密钥，禁止添加NEXT_PUBLIC_前缀，仅在服务端代码中使用（你的代码已遵循此规则，无需调整）

5. 验证变量是否正确加载 #

可在API路由中临时添加日志，确认变量是否被正确读取：

export const POST = async(request: Request) => {
  // 临时日志，部署验证后可删除
  console.log("Cloud name:", process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME);
  console.log("API secret:", process.env.CLOUDINARY_API_SECRET);

  const body = (await request.json()) as {paramsToSign: Record<string, string>};
  const {paramsToSign} = body;
  const signature = cloudinary.utils.api_sign_request(
      paramsToSign,
      process.env.CLOUDINARY_API_SECRET as string
  );
  return Response.json({signature});
}

部署后在Vercel的「Functions → Logs」中查看输出，确认变量是否正常加载。

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