升级到 v2

安装

在您的 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 版本

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 组件