执行npm run build时next.config.js配置无效，编译失败求助

针对你执行npm run build时出现的next.config.js配置错误，逐个解决如下：

一、移除未被允许的根节点配置项 #

直接删除next.config.js中以下属性：

• webpackDevMiddleware：不属于Next.js官方允许的根节点属性，若需自定义开发服务器中间件，需通过其他方式实现
• configOrigin：非官方配置项，无实际作用
• target：Next.js 12+版本已移除该配置，默认采用server模式，静态导出请改用output: 'export'
• webpack5：Next.js 12+已默认启用Webpack 5，该配置项已废弃

二、修正无效的配置值 #

1. .amp.canonicalBase

   • 若无需AMP功能，直接删除整个amp配置块
   • 若需启用AMP，给canonicalBase设置有效基础URL，例如：https://your-domain.com

2. .assetPrefix

   • 无需CDN或子路径部署时，删除该配置项
   • 需要时设置为有效路径，例如：/your-project-subpath 或 https://cdn.your-domain.com

3. .experimental.outputFileTracingRoot

   • 无需自定义追踪路径时，删除该配置
   • 需要时设置为绝对路径，需先引入path模块，示例：

     const path = require('path');
     module.exports = {
       experimental: {
         outputFileTracingRoot: path.resolve(__dirname, '.')
       }
     }
     

4. .i18n

   • 无需国际化功能时，删除该配置项
   • 需要时配置为符合要求的对象，示例：

     i18n: {
       locales: ['en', 'zh-CN'],
       defaultLocale: 'zh-CN'
     }
     

三、处理代码规范与类型检查错误 #

构建失败最后提示“检查代码规范与类型有效性...编译失败”，需：

• 运行npm run lint查看具体ESLint错误并修复
• 若使用TypeScript，运行tsc --noEmit排查类型错误并修正

完成上述修改后，重新执行npm run build即可。

内容的提问来源于stack exchange，提问作者Arya Soni