开发Next.js时如何阻止报错时浏览器窗口获得焦点？

方法1：通过配置禁用错误覆盖层自动弹出 #

在next.config.js中添加devIndicators配置项，直接阻止错误覆盖层自动打开，代码报错时浏览器不会强制跳转到错误页面：

/** @type {import('next').NextConfig} */
const nextConfig = {
  devIndicators: {
    errorOverlay: {
      autoOpen: false
    }
  }
}

module.exports = nextConfig

配置后，错误信息会保留在浏览器控制台中，你可以随时打开控制台查看，不会被强制打断编辑流程。

方法2：用自定义错误边界控制错误展示（App Router适用） #

在Next.js 13+的App Router中，创建全局或路由级别的error.js组件，自定义错误展示逻辑，错误会在当前页面内渲染，不会跳转到独立浮层：

'use client'

export default function Error({ error, reset }) {
  return (
    <div style={{ padding: '2rem' }}>
      <h3>代码出错了</h3>
      <p>{error.message}</p>
      <button onClick={reset} style={{ marginTop: '1rem' }}>重试修复</button>
    </div>
  )
}

把这个文件放在app/目录下就是全局错误边界，放在具体路由文件夹下则只作用于该路由，完全由你控制错误展示的位置和方式。

方法3：临时禁用HMR错误跳转（应急用） #

如果只是临时需要避免跳转，直接在浏览器控制台执行以下代码，就能阻止热更新时的错误自动跳转：

window.__NEXT_HMR_CLOSE_ERROR_OVERLAY = true

这个设置是临时的，刷新页面后会失效，适合临时处理多文件编辑的场景。

内容的提问来源于stack exchange，提问作者Aymeric Wilke