Next.js：构建/预渲染阶段如何用源映射获取完整错误栈？

可以借助源映射解决这个问题，但productionBrowserSourceMaps仅针对客户端代码生效，预渲染属于服务器端构建环节，需要针对性调整配置或工具链：

1. 临时禁用服务器端代码压缩（快速排查） #

预渲染阶段的错误栈被压缩，核心原因是Next.js默认会压缩服务器端构建产物。临时关闭服务器端压缩，就能直接得到源码级调用栈：

// next.config.js
module.exports = {
  productionBrowserSourceMaps: true,
  webpack: (config, { isServer }) => {
    // 仅针对服务器端（预渲染环节）禁用压缩
    if (isServer) {
      config.optimization.minimize = false;
    }
    return config;
  },
};

完成问题排查后记得恢复压缩配置，避免增大服务器端产物体积。

2. 手动用源映射解析压缩栈日志 #

如果不想修改构建配置，可以利用Next.js生成的服务器端源映射文件，手动解析压缩后的错误栈：

1. 确保productionBrowserSourceMaps: true已启用，构建完成后，.next/server目录下会生成对应.js.map文件
2. 安装source-map工具包：

npm install source-map --save-dev

3. 编写解析脚本（示例parse-stack.js）：

const { SourceMapConsumer } = require('source-map');
const fs = require('fs');
const path = require('path');

// 替换为你实际的压缩错误栈行
const compressedStackLine = 'at MyComponent (webpack://_N_E/./components/MyComponent.js?123abc:1:4567)';

// 提取压缩栈中的文件和位置信息
const match = compressedStackLine.match(/\((webpack:\/\/_N_E\/\.\/(.*?)\?.*?:(\d+):(\d+))\)/);
if (match) {
  const [, , sourceFile, line, column] = match;
  const mapFilePath = path.join('.next/server', sourceFile.replace('.js', '.js.map'));
  
  if (fs.existsSync(mapFilePath)) {
    const rawMap = fs.readFileSync(mapFilePath, 'utf8');
    SourceMapConsumer.with(rawMap, null, (consumer) => {
      const originalPos = consumer.originalPositionFor({
        line: parseInt(line, 10),
        column: parseInt(column, 10),
      });
      console.log(`源码位置：${originalPos.source}:${originalPos.line}:${originalPos.column}`);
    });
  }
}

4. 运行脚本解析目标栈行：

node parse-stack.js

3. 用开发模式构建预渲染（验证问题） #

如果只是想确认错误根源，也可以直接用开发模式执行构建，此时不会压缩代码，直接输出源码级调用栈：

NODE_ENV=development next build

注意：该方式构建的产物不适合生产环境，仅用于问题排查。

内容的提问来源于stack exchange，提问作者Matt Cowley