无法在Azure Static Web Apps部署带Stripe的Next.js SSR应用

核心问题 #

next export会生成纯静态资源，完全忽略Next.js的API路由和服务器端运行逻辑，这就是你API无法访问的根本原因。Azure Static Web Apps支持Next.js混合部署（包含SSR/API路由），但需要正确配置构建和部署参数。

具体修改步骤 #

1. 修正package.json的build命令
   移除next export，保留原生的next build——混合部署需要依赖.next文件夹中的构建产物，而非纯静态的out文件夹：

   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   }
   

2. 调整azure.yml配置

   • output_location必须设置为.next，告诉Azure构建产物的位置
   • 你的API是Next.js内置的pages/api路由，不是Azure Functions的独立api文件夹，所以删除或留空api_location，避免Azure误将其识别为Functions目录：

   app_location: "/" # App source code path
   api_location: "" # 留空，因为使用Next.js内置API路由
   output_location: ".next" # Next.js build产物目录
   

3. 配置Azure应用环境变量
   在Azure Static Web Apps的「配置」→「应用设置」中，添加Stripe所需的环境变量（如STRIPE_SECRET_KEY），这些变量会在服务器端运行API路由时被读取。

4. 验证部署流程
   部署时不要手动执行next export，让Azure自动执行npm run build，然后托管.next文件夹的内容。Azure Static Web Apps会自动处理Next.js的API路由和SSR逻辑。

额外注意事项 #

• 检查next.config.js，如果有output: 'export'的配置需要删除，避免强制静态导出
• 确保使用的Next.js版本与Azure Static Web Apps兼容（建议使用13.x或14.x的稳定版本，Page Router/App Router均可）

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