部署Next.js 14（App Router）PWA至服务器时遇问题求助

问题背景 #

基于Next.js 14 App Router开发的应用，通过next-pwa转为PWA后本地构建、启动均正常，但部署到Vercel（预发布环境）和AWS Amplify（生产环境）时分别出现以下错误：

• Vercel：找不到/vercel/path0/.next/routes-manifest.json
• AWS Amplify：无法在构建输出目录找到required-server-files.json

核心原因 #

next-pwa对Next.js 14 App Router的构建输出结构适配不完善，导致构建过程中遗漏关键文件，或部署平台的构建检测逻辑与next-pwa的产物生成路径不匹配。

解决方案 #

1. 升级并配置next-pwa适配App Router #

确保使用支持App Router的next-pwa版本（建议v5.6.0+），并修正next.config.js配置：

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === 'development',
  // 适配App Router构建输出，排除不必要的中间件文件
  buildExcludes: [/middleware-manifest.json$/, /_middleware.js$/],
  disableDevLogs: true
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone', // 生成独立部署包，适配Amplify/Vercel环境
  experimental: {
    appDir: true,
  },
};

module.exports = withPWA(nextConfig);

2. 解决Vercel部署报错 #

Vercel自带PWA支持，易与next-pwa冲突，需禁用平台自动PWA处理：

• 在Vercel项目设置的Build & Development Settings中，添加环境变量NEXT_PWA_DISABLE_AUTO_REGISTER=true
• 或修改构建命令为：npm run build && touch .next/routes-manifest.json（临时生成缺失文件规避报错）

3. 解决AWS Amplify部署报错 #

Amplify会强制检查required-server-files.json，需确保该文件存在于检测目录：

• 修改Amplify构建命令为：npm run build && cp .next/required-server-files.json .next/static/
• 或在next.config.js中添加配置，强制保留该文件：

const nextConfig = {
  // ...其他配置
  serverRuntimeConfig: {
    requiredServerFiles: ['.next/required-server-files.json']
  }
};

4. 清理缓存并验证本地产物 #

• 本地执行rm -rf node_modules .next package-lock.json，重新安装依赖并构建
• 检查.next目录下是否存在routes-manifest.json和required-server-files.json，确认next-pwa未删除这些关键文件

5. 确认Manifest与元数据配置 #

• 确保public/manifest.json路径正确，内容符合PWA规范
• App Router中使用metadata.ts定义PWA相关元数据，示例：

export const metadata = {
  title: 'My PWA App',
  manifest: '/manifest.json',
  appleWebApp: {
    capable: true,
    statusBarStyle: 'default',
    title: 'My PWA App'
  },
  icons: [
    {
      rel: 'icon',
      url: '/favicon.ico',
      sizes: 'any'
    },
    {
      rel: 'apple-touch-icon',
      url: '/apple-touch-icon.png',
      sizes: '180x180'
    }
  ]
};

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