Nextjs禁用react_devtools_backend.js配置未生效解决方法

你的配置没有效果，核心是两个问题：

• 执行时机错误：React DevTools的全局hook会在页面加载极早期，也就是所有React相关脚本运行前就完成注入。你把拦截代码放在<NextScript />之后，哪怕设置了beforeInteractive策略，等代码执行时DevTools已经和React运行时完成绑定，再覆写inject方法根本不会生效。
• 拦截逻辑不全：新版React DevTools不只是靠inject方法完成挂载，只覆写这一个方法，拦不住已经触发的渲染劫持逻辑，自然还是会出现额外重渲染。

方案1：头部同步注入拦截脚本（优先级最高，最稳妥） #

不要用next/script组件加载拦截逻辑，直接把同步脚本写到<Head>标签的最开头，保证它在所有其他脚本（包括Next.js框架脚本、业务代码）之前执行，同时补全全量拦截逻辑。
修改_document.js代码如下：

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
    return (
        <Html lang="en-US">
            <Head>
                {/* 拦截脚本必须放在Head最开头，同步执行，不能加async/defer，不能用next/script包裹 */}
                <script
                    dangerouslySetInnerHTML={{
                        __html: `
if (typeof window !== 'undefined') {
  const existingHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
  const mockHook = {
    inject: () => {},
    onCommitFiberRoot: () => {},
    onCommitFiberUnmount: () => {},
    onPostCommitFiberRoot: () => {},
    isDisabled: true,
    supportsFiber: true
  };

  if (existingHook) {
    // 已存在hook时直接覆写所有相关方法
    Object.assign(existingHook, mockHook);
  } else {
    // 提前占位锁死hook，阻止DevTools后续创建注入
    Object.defineProperty(window, '__REACT_DEVTOOLS_GLOBAL_HOOK__', {
      value: mockHook,
      configurable: false,
      writable: false
    });
  }
}
                        `,
                    }}
                />
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
}

方案2：构建层面排除DevTools逻辑（兜底方案） #

如果方案1在部分浏览器上偶发失效，可以在next.config.js中添加webpack配置，从生产构建阶段就移除React对DevTools的检测分支：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { dev }) => {
    if (!dev) {
      config.resolve.alias = {
        ...config.resolve.alias,
        'react-devtools-core': false,
      };
      config.plugins.push(
        new config.webpack.DefinePlugin({
          'process.env.__REACT_DEVTOOLS_GLOBAL_HOOK__': JSON.stringify({ isDisabled: true }),
        })
      );
    }
    return config;
  },
};

module.exports = nextConfig;

部署生产构建后，打开浏览器控制台输入window.__REACT_DEVTOOLS_GLOBAL_HOOK__，如果返回对象的isDisabled属性为true，且组件额外重渲染的现象消失，说明拦截生效。

补充说明：该额外渲染问题仅会在安装了React DevTools浏览器扩展的用户访问时触发，未安装扩展的普通用户访问生产站点不会遇到性能问题。

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