Next.js 15 + React 19
在 Next.js 15 和 React 19 中使用 shadcn/ui。
更新: 我们已经在 canary
版本中添加了对 React 19 和 Tailwind v4 的完整支持。请参阅 Tailwind v4 文档以获取更多信息。
以下指南适用于任何支持 React 19 的框架。我将此页面标题为“Next.js 15 + React 19”,以帮助升级到 Next.js 15 的用户找到它。我们正在与软件包维护者合作,以帮助升级到 React 19。
TL;DR
如果您正在使用 npm
,您可以使用标志安装 shadcn/ui 依赖项。shadcn
CLI 将在您运行时提示您选择一个标志。pnpm、bun 或 yarn 不需要标志。
请参阅 升级状态 以了解每个软件包对 React 19 支持的状态。
发生了什么?
React 19 现在是 rc 版本,并且已在最新的 Next.js 15 版本中经过测试和支持。
为了支持 React 19,软件包维护者需要测试和更新他们的软件包,以将 React 19 作为对等依赖项包含在内。这 已经 在 进行中。
"peerDependencies": {
- "react": "^16.8 || ^17.0 || ^18.0",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
- "react-dom": "^16.8 || ^17.0 || ^18.0"
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
},
您可以通过运行 npm info <package> peerDependencies
来检查软件包是否将 React 19 列为对等依赖项。
同时,如果您正在安装一个没有将 React 19 列为对等依赖项的软件包,您将看到类似这样的错误消息
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@0.1.0
npm error Found: react@19.0.0-rc-69d4b800-20241021
npm error node_modules/react
npm error react@"19.0.0-rc-69d4b800-20241021" from the root project
注意: 这仅适用于 npm。PNPM 和 Bun 只会显示静默警告。
如何解决此问题
解决方案 1:--force
或 --legacy-peer-deps
您可以使用 --force
或 --legacy-peer-deps
标志强制安装软件包。
npm i <package> --force
npm i <package> --legacy-peer-deps
这将安装软件包并忽略对等依赖项警告。
解决方案 2:使用 React 18
您可以将 react
和 react-dom
降级到版本 18,该版本与您正在安装的软件包兼容,并在依赖项更新时升级。
npm i react@18 react-dom@18
无论您选择哪种解决方案,请确保彻底测试您的应用程序,以确保没有回归。
在 Next.js 15 上使用 shadcn/ui
使用 pnpm、bun 或 yarn
按照安装指南中的说明安装 shadcn/ui。无需任何标志。
使用 npm
当您运行 npx shadcn@latest init -d
时,系统将提示您选择一个选项来解决对等依赖项问题。
It looks like you are using React 19.
Some packages may fail to install due to peer dependency issues (see https://ui.shadcn.org.cn/react-19).
? How would you like to proceed? › - Use arrow-keys. Return to submit.
❯ Use --force
Use --legacy-peer-deps
然后,您可以使用您选择的标志运行该命令。
添加组件
添加组件的过程与上述相同。选择一个标志来解决对等依赖项问题。
请记住在安装新的依赖项后始终测试您的应用程序。
升级状态
为了方便您跟踪升级进度,我在下面创建了一个表格,其中包含 shadcn/ui 依赖项的 React 19 支持状态。
- ✅ - 适用于使用 npm、pnpm 和 bun 的 React 19。
- 🚧 - 适用于使用 pnpm 和 bun 的 React 19。npm 需要标志。PR 正在进行中。
软件包 | 状态 | 注意 |
---|---|---|
radix-ui | ✅ | |
lucide-react | ✅ | |
class-variance-authority | ✅ | 未将 React 19 列为对等依赖项。 |
tailwindcss-animate | ✅ | 未将 React 19 列为对等依赖项。 |
embla-carousel-react | ✅ | |
recharts | ✅ | 请参阅下面的注意 |
react-hook-form | ✅ | |
react-resizable-panels | ✅ | |
sonner | ✅ | |
react-day-picker | ✅ | npm 需要标志。升级到 v9 的工作正在进行中。 |
input-otp | ✅ | |
vaul | ✅ | |
@radix-ui/react-icons | 🚧 | 请参阅 PR #194 |
cmdk | ✅ |
如果您有任何问题,请在 GitHub 上打开一个 issue。
Recharts
要将 recharts 与 React 19 一起使用,您需要覆盖 react-is
依赖项。
将以下内容添加到您的 package.json
"overrides": {
"react-is": "^19.0.0-rc-69d4b800-20241021"
}
注意:react-is
版本需要与您正在使用的 React 19 版本匹配。以上只是一个示例。