如何将next 15的 react 19 降级为react 18稳定版本

缘起

胆子大的同学应该知道，最近next 15默认使用的是react 19，而react 19组件就是个辣鸡，与所有常用的组件如ant-design、shadcn、motion都不兼容，各种莫名其妙无法解决的报错。

因此就有了这个想法：如何继续使用next 15，但是不用react 19？

下面是解决这个问题的方案。

步骤 1：修改 package.json 文件

1. 在项目根目录中找到并打开 package.json 文件。

2. 找到 react 和 react-dom 的依赖项，并将它们的版本更改为 React 18 的稳定版本。如下所示：

   {
     "dependencies": {
       "react": "^18.2.0",
       "react-dom": "^18.2.0"
     }
   }
   

步骤 2：删除现有的 node_modules 文件夹和 package-lock.json 文件

为了确保没有缓存的依赖项导致版本冲突，你需要删除现有的 node_modules 文件夹和 package-lock.json 文件。

rm -rf node_modules package-lock.json

步骤 3：重新安装依赖项

重新安装所有项目的依赖项，以确保使用指定的 React 版本。

npm install

或者，如果你使用 yarn：

yarn install

步骤 4：验证 Next.js 的兼容性

React 18 与 Next.js 15 版本是完全兼容的，但为了确保项目中没有与 React 18 不兼容的代码或插件，你需要执行以下操作：

• 确保没有使用 React 19 的新特性（例如，某些新生命周期方法或新 API）而在 React 18 中不可用。
• 检查项目中可能使用的第三方库，确保它们也与 React 18 兼容。如果有不兼容的库，请升级或降级到支持 React 18 的版本。

步骤 5：更新相关的 TypeScript 配置（可选）

如果你在项目中使用 TypeScript，可以确保 TypeScript 的版本兼容 React 18，并更新项目中的类型声明。

运行以下命令来安装与 React 18 兼容的类型：

npm install @types/react@18 @types/react-dom@18

或者：

yarn add @types/react@18 @types/react-dom@18

步骤 6：验证项目运行情况

确保项目能够正常构建和运行。执行以下命令：

npm run dev

或者：

yarn dev

访问项目的开发服务器，查看页面是否正常加载。如果有任何错误，请根据提示信息逐步排查与 React 18 的不兼容问题。

步骤 7：修复代码中的潜在不兼容问题

React 19 引入了一些新特性和 API，在将项目降级为 React 18 之后，可能会遇到以下问题：

• 某些 React 19 中新增的 API 不可用。
• 项目中可能有 React 19 的 Hooks 或 Context 改动，需要修改为 React 18 的兼容实现。

你可以逐一解决这些问题，或者回退到项目的先前提交中与 React 18 兼容的代码版本。

示例 package.json

以下是一个降级后的示例 package.json 文件：

{
  "name": "nextjs-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^15.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "typescript": "^5.0.0"
  }
}

这样你就完成了将 React 19 降级为 React 18 的操作。降级完成后，请记得全面测试应用，以确保功能在降级版本中的稳定性。

如果你有进一步的问题或遇到特定的错误，我可以帮助你进行排查。