如何将Next.js生成的静态站点部署到Vercel？构建报错如何解决

报错的核心原因是next.config.js中的配置冲突：你在配置文件中将构建目标target设置为了serverless，该模式会将所有页面编译为云函数格式，而next export命令仅支持默认的server构建目标下导出静态站点，二者功能互斥，因此触发了构建错误。该规则完全适配你当前使用的Next.js 9.1.2版本。

可以根据你的部署需求二选一：

方案1：保留静态导出需求（适配所有静态托管平台） #

如果你需要同时兼容其他静态托管平台，保留next export流程：

• 直接删除next.config.js中的target: 'serverless'配置项即可，Next.js默认构建目标就是server，完全兼容next export命令。
• 修改后的next.config.js参考：

module.exports = {
  exportPathMap: function() {
    return {
      '/': { page: '/' }
    };
  }
};

• 无需修改package.json的构建脚本，重新执行npm run build即可正常生成out静态目录，部署到Vercel时也无需额外配置，平台会自动识别静态输出。

方案2：适配Vercel原生Serverless部署（无需静态导出） #

如果你仅需要部署到Vercel，不需要兼容其他静态托管平台，可以放弃next export流程，享受Vercel对Next.js的原生优化：

• 保留next.config.js中的target: 'serverless'配置
• 修改package.json中的build脚本为"build": "next build"，删除后面的&& next export部分
• Vercel会自动将项目部署为Serverless服务，加载速度、缓存策略都会比纯静态更优。

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