Next.js中webpack-internal链接点击跳转空白新标签页问题求助

浏览器端修复步骤 #

• 检查DevTools源码映射设置：打开DevTools，点击右上角的设置图标，确保Enable JavaScript source maps和Enable CSS source maps两个选项处于勾选状态。
• 清除浏览器缓存：按Ctrl+Shift+Delete（Windows/Linux）或Cmd+Shift+Delete（Mac）清除缓存，重启浏览器后重新运行项目。
• 禁用冲突扩展：部分广告拦截、隐私类插件会干扰DevTools对webpack-internal链接的解析，临时关闭所有扩展后测试是否恢复正常。

Next.js项目配置调整 #

• 明确source map配置：在next.config.js里显式设置source map相关参数，开发环境默认开启，但显式配置能避免意外问题：

  module.exports = {
    productionBrowserSourceMaps: true,
    webpack: (config, { dev }) => {
      if (dev) {
        config.devtool = 'eval-cheap-module-source-map'; // 该类型在开发环境兼顾性能和源码可读性
      }
      return config;
    },
  };
  

• 重启开发服务器：修改配置后必须重启next dev，确保新的webpack配置生效。

额外排查方向 #

• 更新Chrome：旧版本Chrome的DevTools可能存在解析bug，升级到最新版后重试。
• 重装依赖：删除node_modules和package-lock.json（或yarn.lock），重新执行npm install，排除依赖包损坏导致的源码映射异常。

内容的提问来源于stack exchange，提问作者John Cargo