React 19与Next.js 15状态管理库安装冲突及状态管理咨询

问题背景 #

使用 React 19（版本 19.0.0-rc-66855b96-20241106）和 Next.js 15（版本 15.0.3）时，尝试安装 Redux Toolkit、Zustand、Jotai 三款状态管理库均触发 npm 依赖冲突，错误信息如下：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: jotai@2.10.3
npm ERR! Found: react@19.0.0-rc-66855b96-20241106
npm ERR! node_modules/react
npm ERR!   peer react@"^18.2.0 || 19.0.0-rc-66855b96-20241106" from next@15.0.3
npm ERR!   node_modules/next
npm ERR!     peer next@"^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0" from next-intl@3.25.3
npm ERR!     node_modules/next-intl
npm ERR!       next-intl@"^3.25.3" from the root project
npm ERR!     next@"15.0.3" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0" from next-intl@3.25.3
npm ERR!   node_modules/next-intl
npm ERR!     next-intl@"^3.25.3" from the root project
npm ERR!   4 more (react-dom, styled-jsx, use-intl, the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react@">=17.0.0" from jotai@2.10.3
npm ERR! node_modules/jotai
npm ERR!   jotai@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@18.3.1
npm ERR! node_modules/react
npm ERR!   peerOptional react@">=17.0.0" from jotai@2.10.3
npm ERR!   node_modules/jotai
npm ERR!     jotai@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\mrsni\AppData\Local\npm-cache\_logs\2024-11-27T17_48_09_411Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\mrsni\AppData\Local\npm-cache\_logs\2024-11-27T17_48_09_411Z-debug-0.log

解决方案 #

一、解决依赖冲突 #

冲突核心原因是 React 19 为 RC（候选发布）版本，部分状态管理库的 peer 依赖声明尚未更新至兼容 RC 版本的范围，可通过以下两种方式解决：

1. 使用 --legacy-peer-deps 安装
   该参数会忽略 npm 对 peer 依赖的严格版本检查，强制适配当前项目的 React 版本：

   npm install @reduxjs/toolkit zustand jotai --legacy-peer-deps
   

2. 手动覆盖依赖版本（可选）
   在项目根目录的 package.json 中添加 overrides 字段，强制指定状态管理库使用当前项目的 React/ReactDOM 版本：

   "overrides": {
     "react": "$react",
     "react-dom": "$react-dom"
   }
   

   添加完成后，执行常规安装命令即可：

   npm install @reduxjs/toolkit zustand jotai
   

二、React 19 + Next.js 15 状态管理方案 #

根据项目规模和需求，可选择以下几种方案：

1. 原生 React/Next.js 方案

• React 19 原生状态：使用 useState、useReducer 配合 useContext 实现组件间状态共享，React 19 新增的 use() hook 可直接在组件中异步获取数据，无需额外库。
• Next.js App Router 内置能力：利用 App Router 的服务器组件直接获取并缓存数据，通过 revalidate 控制数据刷新；使用 Server Actions 修改服务器端状态，配合客户端状态同步。
• TanStack Query（原 React Query）：官方推荐的数据状态管理库，已兼容 React 19，可处理异步数据的缓存、同步和更新，无需额外状态管理库即可覆盖大部分场景。

2. 第三方状态管理库（解决冲突后可用）

• Redux Toolkit：适合大型复杂应用，配合 Redux Toolkit Query 可同时处理全局状态和异步数据，Next.js 15 中可在客户端组件中配置 Store，用 Provider 包裹应用。
• Zustand：轻量无依赖，无需 Provider 即可创建全局状态，支持服务器组件同步状态，适合中小型应用快速开发。
• Jotai：原子化状态管理，状态拆分为细粒度原子，灵活组合，适合需要精确控制状态依赖的场景。

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