Next.js集成next-pwa时next.config.js出现无效配置项错误

问题原因 #

1. 语法错误：你的next.config.js代码片段存在未闭合的大括号，导致Node.js解析时将配置对象错误识别为数组，从而出现Unrecognized key(s) in object: '0', '1', ...错误。
2. 版本适配问题：next-pwa部分旧版本与Next.js 14兼容性不佳，可能引发配置解析异常。

修复步骤 #

1. 修正配置文件语法 #

确保next.config.js的括号完全闭合，正确代码如下：

const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');

module.exports = withPWA({
  pwa: {
    dest: 'public',
    register: true,
    runtimeCaching,
    // 开发环境禁用日志干扰（可选）
    disableDevLogs: true
  }
});

2. 安装兼容版本的next-pwa #

卸载现有版本后，安装适配Next.js 14的最新稳定版：

npm uninstall next-pwa
npm install next-pwa@latest

3. 开发环境验证注意事项 #

• Next.js开发模式下，next-pwa默认不会生成完整的PWA资源（如service-worker.js），需通过生产构建验证：

npm run build
npm start

• 若需在开发环境测试PWA功能，可在pwa配置中添加devSwSrc指定自定义开发用Service Worker文件（不推荐用于正式开发流程）。

4. 补充manifest配置（可选） #

确保public目录下存在manifest.json文件，示例内容：

{
  "name": "My PWA App",
  "short_name": "PWA App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

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