如何在Vercel部署的Next.js生产环境查看完整错误信息？

你遇到的是仅在Vercel部署的Next.js生产环境中出现的问题，报错为压缩后的React错误#425，无法直接查看完整错误和警告，以下是针对你的疑问的解答及可行方案：

关于开发模式构建 #

直接设置NODE_ENV=development或修改构建命令为NODE_ENV=development next build无效，因为Next.js在执行next build时会强制启用生产模式，忽略NODE_ENV的开发环境配置，所以无法通过这种方式以开发模式构建部署。

关于禁用生产构建的代码混淆 #

仅在Webpack配置中设置optimization: { minimize: false }不足以解决问题，因为React本身的生产依赖包仍然是压缩后的版本，所以仍会出现压缩错误提示。需要同时强制Next.js使用React的开发包，具体配置如下：

在项目根目录的next.config.js中添加以下配置：

module.exports = {
  webpack: (config, { dev, isServer }) => {
    // 禁用Webpack代码压缩
    config.optimization.minimize = false;

    // 强制替换为React开发包（仅在非开发构建时生效）
    if (!dev) {
      config.resolve.alias = {
        ...config.resolve.alias,
        'react$': 'react/cjs/react.development.js',
        'react-dom$': 'react-dom/cjs/react-dom.development.js',
        'react-dom/client$': 'react-dom/cjs/react-dom-client.development.js',
      };
    }

    return config;
  },
};

将修改后的代码部署到Vercel后，即可在生产环境中查看完整的错误信息及额外警告。注意：调试完成后请恢复配置，避免影响生产环境的性能。

内容的提问来源于stack exchange，提问作者David Chouinard