Next.js

要求

Next.js 12 或更高版本
React 18 或更高版本
Tailwind CSS 3.4 或更高版本
Framer Motion 11.9 或更高版本

要在您的 Next.js 项目中使用 NextUI，您需要根据您的项目结构执行以下步骤。

App 目录设置

Next.js 13 引入了一个新的 app/ 目录结构。默认情况下，它使用服务器组件。由于 NextUI 组件使用 React hooks，我们在构建时添加了 use client;，因此您可以直接在 React 服务器组件 (RSC) 中导入它们。

NextUI CLI（推荐）

如果您要开始一个新项目，可以使用 NextUI CLI 创建一个预配置了 NextUI 的新项目

或者

create-next-app

如果您要开始一个新项目，可以运行以下命令之一来创建一个预配置了 NextUI 的 Next.js 项目

自动安装

您可以使用 CLI 添加单个组件。例如，要添加一个按钮组件

此命令会将 Button 组件添加到您的项目中，并管理所有相关的依赖项。

您也可以一次添加多个组件

或者，您可以通过运行以下命令来添加主库 @nextui-org/react

如果您省略组件名称，CLI 将提示您选择要添加的组件。

您仍然需要手动将 provider 添加到您的应用程序（我们正在努力自动化此步骤）。

手动安装

添加依赖项

在您的 Next.js 项目中，运行以下命令之一以安装 NextUI

提升依赖项设置

注意：此步骤仅适用于使用 pnpm 进行安装的用户。如果您使用其他包管理器安装 NextUI，则可以跳过此步骤。

如果您使用 pnpm，则需要在 .npmrc 文件中添加以下行，以将我们的包提升到根 node_modules 中。

修改 .npmrc 文件后，您需要再次运行 pnpm install 以确保正确安装依赖项。

Tailwind CSS 设置

NextUI 基于 Tailwind CSS 构建，因此您需要先安装 Tailwind CSS。您可以按照官方的安装指南来安装 Tailwind CSS。然后，您需要将以下代码添加到您的 tailwind.config.js 文件中

注意：如果您正在使用 pnpm 和 monorepo 架构，请确保您指向的是 ROOT node_modules

设置 Provider

转到您的 app/providers.tsx 或 app/providers.jsx （如果不存在则创建），并使用 NextUIProvider 包裹组件

将 Provider 添加到 Root

现在，转到您的 root 布局页面，并使用 Providers 包裹它

注意：NextUI 会自动将 light 和 dark 两种主题添加到您的应用程序。您可以通过将 dark/light 类添加到 html 标签来使用它们中的任何一个。有关更多详细信息，请参阅主题文档。

使用 NextUI 组件

现在，您可以直接在您的服务器组件中导入任何 NextUI 组件，而无需使用 use client; 指令

重要 🚨：请注意，您需要从单独的包中导入组件，而不是从 @nextui-org/react 中导入。

Pages 目录设置