如何禁用Next.js项目构建后的Source Map？

以下是几个排查和解决的方向：

• 确认next.config.js配置结构正确
  确保productionBrowserSourceMaps配置在正确的对象层级中，示例如下：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    productionBrowserSourceMaps: false,
    // 其他项目配置
  }
  
  module.exports = nextConfig
  

  避免将配置写在nextConfig对象外部，或者嵌套在其他子配置中。

• 检查是否存在环境变量覆盖
  Next.js会优先读取环境变量NEXT_PRODUCTION_BROWSER_SOURCE_MAPS的值，如果该变量被设置为true，会覆盖配置文件中的设置。构建时确保没有主动设置这个环境变量，或者将其设为false。

• 排查构建脚本的额外参数
  查看package.json中的build脚本，确认是否添加了--source-maps强制参数。比如如果脚本是：

  "scripts": {
    "build": "next build --source-maps"
  }
  

  需要去掉--source-maps参数，否则会无视配置文件的设置生成Source Map。

• 清理缓存后重新构建
  缓存可能导致配置未生效，执行以下步骤：

  1. 删除项目根目录下的.next文件夹
  2. 重新运行npm run build（或对应的yarn/pnpm命令）

• 检查Next.js版本兼容性
  部分旧版本的Next.js可能存在productionBrowserSourceMaps配置的bug，建议升级到最新的稳定版后再测试。

内容的提问来源于stack exchange，提问作者Zhen.Liu