升级到 v2
要求
- React 18 或更高版本
- Tailwind CSS 3.4 或更高版本
- Framer Motion 11.9 或更高版本
Next.js 升级步骤
请确保按照之前的步骤操作,因为这些步骤是升级到 v2 的必要条件。
App 目录设置
Next.js 13 引入了一个新的 app/
目录结构。默认情况下,它使用服务器组件。由于 NextUI 组件使用 React hooks,我们在构建时添加了 use client;
,因此您可以直接在 React 服务器组件 (RSC) 中导入它们。
安装
在您的 Next.js 项目中,运行以下命令之一来安装 NextUI
提升的依赖项设置
注意:此步骤仅适用于使用
pnpm
安装的用户。如果使用其他包管理器安装 NextUI,则可以跳过此步骤。
如果您正在使用 pnpm,则需要在 .npmrc
文件中添加以下行,将我们的包提升到根 node_modules
中。
修改 .npmrc
文件后,需要再次运行 pnpm install
,以确保正确安装依赖项。
Tailwind CSS 设置
NextUI 构建于 Tailwind CSS 之上,因此您需要先安装 Tailwind CSS。您可以按照官方 安装指南 来安装 Tailwind CSS。然后,您需要将以下代码添加到您的 tailwind.config.js
文件中
设置 Provider
转到您的 app/providers.tsx
或 app/providers.jsx
(如果不存在则创建它),并使用 NextUIProvider
包裹组件
将 Provider 添加到根目录
现在,转到你的 root
布局页面,并用 NextUIProvider
将其包裹起来
注意:NextUI 会自动向你的应用程序添加两个主题
light
和dark
。你可以通过向html
标签添加dark
/light
类来使用它们中的任何一个。有关更多详细信息,请参阅主题文档。
使用 NextUI 组件
现在,你可以直接在你的服务端组件中导入任何 NextUI 组件,而无需使用 use client;
指令
重要 🚨:请注意,你需要从单独的包中导入组件,而不是从
@nextui-org/react
中导入。
页面目录设置
安装
在您的 Next.js 项目中,运行以下命令之一来安装 NextUI
提升的依赖项设置
注意:此步骤仅适用于使用
pnpm
安装的用户。如果使用其他包管理器安装 NextUI,则可以跳过此步骤。
如果您正在使用 pnpm,则需要在 .npmrc
文件中添加以下行,将我们的包提升到根 node_modules
中。
修改 .npmrc
文件后,需要再次运行 pnpm install
,以确保正确安装依赖项。
Tailwind CSS 设置
NextUI 构建于 Tailwind CSS 之上,因此您需要先安装 Tailwind CSS。您可以按照官方 安装指南 来安装 Tailwind CSS。然后,您需要将以下代码添加到您的 tailwind.config.js
文件中
设置 Provider
转到 pages/_app.js
或 pages/_app.tsx
(如果不存在则创建它),并用 NextUIProvider
将 Component 包裹起来
使用 NextUI 组件
现在你可以随意导入任何 NextUI 组件
React 升级步骤
升级 React 版本
NextUI v2 需要 React 18 或更高版本。要升级 React,请运行以下命令
安装 Framer motion
在 v2 中,NextUI 现在需要 framer-motion
作为依赖项。要同时安装它们,请使用以下命令
提升的依赖项设置
注意:此步骤仅适用于使用
pnpm
安装的用户。如果使用其他包管理器安装 NextUI,则可以跳过此步骤。
如果您正在使用 pnpm,则需要在 .npmrc
文件中添加以下行,将我们的包提升到根 node_modules
中。
修改 .npmrc
文件后,需要再次运行 pnpm install
,以确保正确安装依赖项。
TailwindCSS 设置
NextUI v2 现在使用 Tailwind CSS。将 NextUI 插件添加到你的 tailwind.config.js
文件中
注意:如果你正在使用 pnpm 和 monorepo 架构,请确保你指向 ROOT
node_modules
Provider 设置
转到 root
文件,并用 NextUIProvider
将 Component 包裹起来
使用 NextUI 组件
现在你可以随意导入任何 NextUI 组件
请访问发行说明,以获取有关新功能和重大更改的更多信息。