Next.js 14使用SSG构建时app/api功能失效，求最优解决方案

核心结论 #

Next.js 14的App Router里，app/api/下的API路由是纯服务端运行的功能，而SSG（静态站点生成）会把页面预渲染成完全静态的HTML、CSS和JS文件，部署后没有服务器环境支撑这些API路由，所以纯SSG构建完成后，API功能肯定没法正常运行。

最优解决方案 #

1. 迁移到客户端数据获取（适配纯静态场景） #

如果你的API只是用来获取静态数据，或者业务逻辑能在客户端执行，直接把API里的逻辑搬到客户端组件里：

• 在客户端组件里用fetch调用外部接口，或者把原API的业务逻辑封装成客户端可执行的函数
• 示例：把app/api/data/route.ts里的逻辑改成客户端组件的函数：

// 客户端组件内的代码
async function getMyData() {
  // 原API里的业务逻辑，比如读取本地JSON、调用第三方接口
  const response = await fetch('https://your-external-api.com/data');
  return response.json();
}

2. 改用SSG+边缘函数/混合渲染模式 #

如果必须保留服务端逻辑，别用纯SSG构建，换成下面的方式：

• 静态导出+边缘函数：用next build && next export构建，部署到Vercel这类支持边缘函数的平台，App Router的API默认支持边缘运行时，平台会自动把API路由部署成边缘函数，和静态页面共存
• 增量静态再生（ISR）：如果部分页面需要静态化，同时要保留服务端API，用ISR替代纯SSG，在页面组件里用generateStaticParams配合revalidate参数，API路由正常在服务端运行

3. 把API逻辑移到外部服务 #

把原App Router的API功能迁移到独立的后端服务（比如自己搭建的Node.js后端、Serverless函数平台），静态站点通过客户端请求这个外部服务获取数据，彻底把静态页面和服务端逻辑解耦。

额外注意 #

• 纯SSG导出（next export）会直接忽略app/api/目录下的所有路由，因为这些是依赖服务端的功能
• 如果部署到Vercel，就算选静态导出，平台会自动识别API路由并部署成边缘函数，不用额外配置；但如果是部署到纯静态托管平台（比如GitHub Pages、Netlify静态托管），API路由根本无法运行，只能用客户端数据获取或者外部服务的方案

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