Next.js 14.0.3中next.config.js的distDir配置不生效问题

问题原因 #

你遇到的问题是由于next-pwa插件版本与Next.js 14不兼容，旧版本的插件未正确传递distDir配置给Next.js的构建流程，导致自定义构建目录的设置被忽略。

解决方案 #

1. 升级next-pwa到最新兼容版本 #

首先执行命令升级插件：

npm install next-pwa@latest
# 或使用yarn
yarn add next-pwa@latest

2. 调整next.config.js的配置结构 #

将Next.js原生配置与PWA配置分离，确保distDir被正确传递：

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: false,
  register: true,
  scope: '/',
  sw: '/service-worker.js',
})

/** @type {import('next').NextConfig} */
const nextConfig = {
  distDir: '.next.build',
}

module.exports = withPWA(nextConfig)

验证 #

重新执行构建命令：

npx next build

构建完成后，项目根目录下会生成.next.build目录，替代默认的.next目录。

内容的提问来源于stack exchange，提问作者丶 Limeー来夢 丶