Next.js Turbopack应用部署AWS Amplify后出现404错误排查

问题概述 #

Next.js 15应用在AWS Amplify上构建成功，但访问主页及所有路由均返回404，本地用pnpm run dev/pnpm run start运行正常，构建日志无报错。

针对问题的解答 #

1. 构建成功文件齐全仍404的原因

• Amplify重写规则缺失：App Router依赖客户端路由，需将所有请求转发到入口文件，否则静态资源外的路由会返回404
• 构建产物配置错误：amplify.yml的baseDirectory指向不正确，或未包含public文件夹等必要资源
• Next.js输出模式不兼容：Next.js 15默认output: 'standalone'，若未适配Amplify的部署路径会导致资源找不到
• Monorepo构建上下文偏差：Amplify未正确识别子应用的构建产物，或Turborepo缓存导致旧产物被部署

2. Next.js 15在Amplify的特定配置

• 必须配置适配App Router的重写规则，确保所有非静态资源请求转发到index.html
• 若使用output: 'standalone'，需调整amplify.yml的baseDirectory为.next/standalone，并手动复制static和public目录到产物中
• 确保Node.js版本与本地一致（Amplify默认18.x，Next.js 15建议用18+版本）

3. 单体仓库是否会导致路由问题

会，主要风险点：

• amplify.yml的appRoot配置错误，导致构建命令在错误目录执行
• Turborepo的全局构建命令可能同时构建多个应用，Amplify未正确获取目标应用的产物
• 缓存配置未区分子应用，导致旧缓存干扰新构建产物

4. 需要检查的Amplify特定设置

• 重写与重定向规则：是否添加了将所有非静态资源请求转发到index.html的规则
• 构建产物配置：baseDirectory是否指向正确的Next.js输出目录，files是否包含所有必要资源
• 部署工件内容：下载部署工件验证是否包含.next/static、.next/server、public等目录
• 环境变量：NEXT_PUBLIC_开头的变量是否在Amplify控制台正确配置，避免构建时路径错误
• 缓存策略：是否清理过Amplify缓存，避免旧缓存导致产物异常

具体修复步骤 #

1. 修正amplify.yml构建配置 #

确保构建命令指向正确的子应用目录，且包含必要的产物：

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm install -g pnpm@latest
            - pnpm install
        build:
          commands:
            - cd frontend/feedal/apps/web
            - pnpm run build
            # 若使用standalone输出模式，需复制静态资源和public文件夹
            # - cp -r .next/static .next/standalone/.next/static
            # - cp -r public .next/standalone/public
      artifacts:
        # 若使用默认输出，填.next；若用standalone，填.next/standalone
        baseDirectory: frontend/feedal/apps/web/.next
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*
          - .next/cache/**/*
    appRoot: frontend/feedal/apps/web

2. 添加Amplify重写规则 #

在Amplify控制台应用设置 > 重写与重定向中添加以下规则：

3. 清理Amplify缓存 #

进入Amplify控制台构建 > 构建历史，选择最近的构建任务，点击清理缓存并重新构建，避免Turborepo旧缓存干扰。

4. 验证部署产物 #

在部署 > 部署历史中点击部署任务的下载工件，检查是否包含：

• .next/static（静态资源）
• .next/server（服务端渲染代码）
• public（静态文件）
• index.html（入口文件）

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