升级到 v2

要求


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.tsxapp/providers.jsx(如果不存在则创建它),并使用 NextUIProvider 包裹组件

将 Provider 添加到根目录

现在,转到你的 root 布局页面,并用 NextUIProvider 将其包裹起来

注意:NextUI 会自动向你的应用程序添加两个主题 lightdark。你可以通过向 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.jspages/_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 组件

请访问发行说明,以获取有关新功能和重大更改的更多信息。