Next.js 13 App目录应用部署Azure Static Web Apps遇500错误求助

问题根源 #

Azure Static Web Apps默认适配静态导出的Next.js应用，而你的App Router项目依赖SSR/SSG/ISR能力，且因i18n无法使用next export，必须调整配置以启用Next.js运行时支持。

1. 修正GitHub Workflow配置 #

当前Workflow存在配置错误，需按以下方式修改：

关键调整点 #

• 指定正确的输出目录：next build的产物目录为.next，必须设置output_location: ".next"
• 移除无效的API构建命令：空api_location下的api_build_command无意义，直接删除
• 添加Node.js环境配置：确保使用Next.js 13推荐的Node.js 18版本

修正后的Workflow代码 #

name: Azure Static Web Apps CI/CD

on:
    push:
        branches:
            - master
    pull_request:
        types: [opened, synchronize, reopened, closed]
        branches:
            - master

jobs:
    build_and_deploy_job:
        if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
        runs-on: ubuntu-latest
        name: Build and Deploy Job
        steps:
            - uses: actions/checkout@v3
              with:
                  submodules: true
            - name: Set up Node.js 18
              uses: actions/setup-node@v3
              with:
                  node-version: '18'
                  cache: 'npm'
            - name: Install dependencies
              run: npm ci
            - name: Build And Deploy
              id: builddeploy
              uses: Azure/static-web-apps-deploy@v1
              with:
                  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_0B46C9510 }}
                  repo_token: ${{ secrets.GITHUB_TOKEN }}
                  action: "upload"
                  app_location: "/"
                  api_location: ""
                  output_location: ".next"
                  app_build_command: "npm run build"

    close_pull_request_job:
        if: github.event_name == 'pull_request' && github.event.action == 'closed'
        runs-on: ubuntu-latest
        name: Close Pull Request Job
        steps:
            - name: Close Pull Request
              id: closepullrequest
              uses: Azure/static-web-apps-deploy@v1
              with:
                  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_0B46C9510 }}
                  action: "close"

2. 启用Next.js运行时支持 #

在项目根目录创建staticwebapp.config.json，强制Azure使用Next.js运行时处理请求：

{
  "platform": {
    "apiRuntime": "node:18",
    "framework": {
      "name": "nextjs",
      "version": "13"
    }
  },
  "routes": [
    {
      "route": "/*",
      "serve": ".next/server/pages/*",
      "statusCode": 200
    }
  ]
}

3. 查看部署日志的正确路径 #

Azure Static Web Apps的部署日志不在诊断选项卡，需到GitHub仓库的Actions页面，找到对应部署任务的运行记录，查看Build And Deploy步骤的输出，这里会显示构建和部署过程中的具体错误，是定位500问题的关键。

4. 验证依赖与版本 #

• 确认package.json中Next.js版本为13.x
• 若存在依赖冲突，删除node_modules和package-lock.json，重新执行npm ci

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