Next.js(React 18)配置HTTPS运行出现ReactDOM.render警告如何解决

这个警告和SSL证书配置、HTTPS协议本身完全无关，两种启动模式表现不一致的核心原因如下：

• Next.js 从12.1.0版本开始才完整支持React 18的createRoot渲染API：当你用Next.js内置的next dev/next start命令启动HTTP服务时，框架会自动检测当前安装的React版本，自动切换到React 18兼容的渲染逻辑，不会触发废弃API警告。
• 当你使用自定义Node.js服务（比如你写的HTTPS server.js）接管启动流程时，Next.js不会自动注入React 18的适配配置，默认会回退到React 17兼容模式，用旧的ReactDOM.render方法做入口渲染，就会抛出你看到的警告。

如果升级时只更新了react/react-dom的版本，没有把Next.js升级到12.1.0以上的兼容版本，不管用什么启动方式都会出现这个警告。

按以下顺序操作即可修复：

• 对齐核心依赖版本
  先把核心依赖升级到兼容React 18的版本，确保Next.js版本不低于12.1.0，执行对应包管理器的安装命令即可：

  # npm 用户执行
  npm install next@^12.1.0 react@^18.0.0 react-dom@^18.0.0
  
  # yarn 用户执行
  yarn add next@^12.1.0 react@^18.0.0 react-dom@^18.0.0
  
  # pnpm 用户执行
  pnpm add next@^12.1.0 react@^18.0.0 react-dom@^18.0.0
  

• 清理入口文件的旧渲染逻辑
  检查项目下pages/_app.js/pages/_app.tsx、pages/_document.js/pages/_document.tsx文件，如果存在手动调用ReactDOM.render挂载根节点的代码，直接删除——Next.js会自动处理应用入口的挂载逻辑，不需要手动编写渲染代码。
• 修改自定义服务配置，显式启用React 18渲染模式
  修改server.js中初始化Next实例的代码，加上reactRoot: true配置项，强制启用createRoot渲染逻辑，替换原有的初始化代码：

  // 原代码：const app = next({ dev });
  // 替换为：
  const app = next({ 
    dev,
    reactRoot: true // 显式开启React 18 根节点渲染模式
  });
  

• 清缓存重启验证
  删除项目根目录下的.next构建缓存文件夹，重新执行命令启动自定义HTTPS服务，警告就会消失。

如果你使用的是Next.js 13及以上版本，reactRoot配置默认是开启状态，但从低版本升级上来的项目可能存在旧配置缓存，显式声明该配置可以避免版本识别异常。

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