Next.js API本地环境正常但Vercel生产环境无法运行

我用Next.js做了个博客项目，发布新文章时通过axios调用API路由把文章存入MongoDB。本地环境一切正常，但部署到Vercel后功能失效，确定和环境变量有关，但目前卡壳。提交表单后页面加载几秒，直接重定向到/articles页面。

提交逻辑代码：

const handleSubmit = async (formData: FormData) => {
  "use server";

  try {
    const response = await axios.post(
      `${process.env.URL}/api/articles`,
      formData,
      {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      },
    );
  } catch (error: unknown) {
    if (error instanceof Error) {
      console.log(error.message);
    } else {
      console.log({ message: "Unknown error" });
    }
  }
  redirect("/articles");
};

Vercel日志仅显示：

JUL 16 12:41:31.70 - POST - 303 - next-blog-af.vercel.app - /articles/new

已尝试多种环境变量组合，问题仍未解决。

1. 修正Server Action的API调用路径 #

在带"use server"的Server Action中，调用同项目的API路由无需外部完整URL，直接用相对路径/api/articles即可。当前用${process.env.URL}/api/articles，若process.env.URL在Vercel上配置错误（比如末尾带斜杠、协议不匹配），会直接导致请求失败。修改后代码：

const response = await axios.post('/api/articles', formData);

Server Action运行在服务器端，直接调用内部API路由可彻底规避环境变量URL的配置问题。

2. 检查Vercel环境变量配置 #

• 确保MongoDB相关变量（如MONGODB_URI）在Vercel项目设置→环境变量中正确填写，且勾选"Preview Deployment"和"Production Deployment"，保证部署时变量能被加载。
• 变量值不要加引号，比如MONGODB_URI直接填mongodb+srv://xxx:xxx@cluster0.mongodb.net/xxx，避免解析错误。
• 可在API路由中添加日志，确认变量是否正常加载：

  // app/api/articles/route.ts
  console.log('MONGODB_URI:', process.env.MONGODB_URI);
  

  然后去Vercel函数日志查看输出，验证变量是否存在且正确。

3. 优化错误处理逻辑 #

当前代码无论请求成功与否都会直接重定向，导致无法捕获错误信息。修改为仅请求成功时重定向，失败时抛出错误留页提示：

const handleSubmit = async (formData: FormData) => {
  "use server";

  try {
    const response = await axios.post('/api/articles', formData);
    // 仅请求成功时重定向
    redirect("/articles");
  } catch (error: unknown) {
    let errorMsg = '提交失败，请稍后重试';
    if (error instanceof Error) {
      errorMsg = error.message;
      console.error('提交错误:', errorMsg);
    }
    // 抛出错误，让Next.js展示错误信息（可结合useFormState使用）
    throw new Error(errorMsg);
  }
};

这样请求失败时页面会显示错误，同时Vercel函数日志会记录详细错误，方便排查根源。

4. 检查API路由的请求处理 #

• 确保API路由正确解析multipart/form-data，Next.js的API路由需用formData()方法解析：

  // app/api/articles/route.ts
  export async function POST(request: Request) {
    const formData = await request.formData();
    const title = formData.get('title') as string;
    // 其他字段处理逻辑
  }
  

• 无需手动设置"Content-Type": "multipart/form-data"，axios会自动根据FormData生成包含boundary的正确请求头，手动设置反而可能导致解析失败。

5. 查看Vercel函数日志 #

你当前看到的是页面路由日志，需进入Vercel的函数日志查看/api/articles的请求日志，这里会记录API路由运行时的具体错误，比如MongoDB连接失败、环境变量缺失等。

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