生产环境调用API返回404，Next.js部署后接口请求失败

核心原因 #

你配置了output: "export"开启静态导出模式，这种模式下Next.js只会生成纯静态文件（HTML/CSS/JS），不支持服务器端API路由。本地开发时Next.js有内置服务器处理/api路由，但静态导出后，部署的是纯静态资源，没有服务器来响应/api/contact的请求，所以返回404。

从构建日志也能看出：ƒ /api/contact标记为动态路由，但静态导出时这类服务器端路由不会被打包到静态产物里，自然无法访问。

解决方案 #

方案1：移除静态导出配置，使用服务器端部署 #

如果要保留Next.js自带的API路由，修改next.config.ts，去掉output: "export"：

/** @type {import('next').NextConfig} */
const nextConfig = {
  distDir: "build",
  // 移除 output: "export"
};

module.exports = nextConfig;

重新执行npm run build，之后用npm run start启动服务器，或者部署到支持Next.js服务器端运行的平台（如Vercel、Netlify的Next.js运行时、自定义Node.js服务器）。

方案2：改用外部后端服务（适合静态导出场景） #

如果必须使用静态导出，把/api/contact的逻辑迁移到外部后端：

1. 搭建独立的API服务（比如用Express写一个简单的POST接口，或者用Supabase、Firebase Functions等Serverless服务）
2. 修改前端fetch的地址为外部API的URL：

const onSubmit = async (data: ContactFormType) => {
  try {
    // 替换成你的外部API地址
    const response = await fetch("https://your-backend.com/api/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    if (response.ok) {
      reset();
    } else {
      setError(true);
    }
  } catch (error) {
    console.error("Error:", error);
  }
};

也可以使用第三方表单处理服务，直接把表单提交到他们的接口，无需自己写后端。

方案3：客户端侧处理（仅适用于简单逻辑） #

如果你的contact接口不需要服务器端操作（比如只是验证表单、本地存储数据），可以把逻辑直接放到客户端代码里，不需要/api路由。但如果涉及发送邮件、存储到数据库等操作，这个方案不适用。

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