Next.js

要求 (Requirements)

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

要在你的 Next.js 项目中使用 HeroUI，你需要按照以下步骤操作，具体步骤取决于你的项目结构。(To use HeroUI in your Next.js project, you need to follow the steps below, depending on your project structure.)

App 目录设置 (App Directory Setup)

Next.js 13 的 app/ 目录默认使用服务器组件 (Server Components)。HeroUI 组件可以直接在服务器组件中导入，因为我们在构建时添加了 use client。(Next.js 13's app/ directory uses Server Components by default. HeroUI components can be imported directly in Server Components since we add use client at build time.)

HeroUI 命令行界面 (HeroUI CLI) (推荐) (recommended)

如果你正在开始一个新项目，你可以使用 HeroUI 命令行界面创建一个预配置了 HeroUI 的新项目 (If you are starting a new project, you can use the HeroUI CLI to create a new project with HeroUI pre-configured)

或 (or)

create-next-app

如果你正在开始一个新项目，你可以运行以下命令之一来创建一个预配置了 HeroUI 的 Next.js 项目 (If you are starting a new project, you can run one of the following commands to create a Next.js project pre-configured with HeroUI)

自动安装 (Automatic Installation)

你可以使用命令行界面添加单个组件。例如，要添加一个按钮组件 (You can add individual components using the CLI. For example, to add a button component)

此命令会将 Button 组件添加到你的项目中，并管理所有相关的依赖项。(This command adds the Button component to your project and manages all related dependencies.)

你也可以一次添加多个组件 (You can also add multiple components at once)

或者你可以通过运行以下命令添加主库 @heroui/react (Or you can add the main library @heroui/react by running the following command)

如果你省略组件名称，命令行界面将提示你选择要添加的组件。(If you leave out the component name, the CLI will prompt you to select the components you want to add.)

你仍然需要手动将 provider 添加到你的应用中（我们正在努力自动化这一步骤）。(You still need to add the provider to your app manually (we are working on automating this step).)

手动安装 (Manual Installation)

添加依赖 (Add dependencies)

在你的 Next.js 项目中，运行以下命令之一来安装 HeroUI (In your Next.js project, run one of the following commands to install HeroUI)

提升依赖设置 (Hoisted Dependencies Setup)

注意：此步骤仅适用于使用 pnpm 安装的用户。如果你使用其他包管理器安装 HeroUI，则可以跳过此步骤。(Note: This step is only for those who use pnpm to install. If you install HeroUI using other package managers, you may skip this step.)

如果你正在使用 pnpm，你需要将以下行添加到你的 .npmrc 文件中，以将我们的包提升到根目录 node_modules。(If you are using pnpm, you need to add the following line to your .npmrc file to hoist our packages to the root node_modules.)

修改 .npmrc 文件后，你需要再次运行 pnpm install，以确保依赖项已正确安装。(After modifying the .npmrc file, you need to run pnpm install again to ensure that the dependencies are installed correctly.)

Tailwind CSS 设置 (Tailwind CSS Setup)

HeroUI 构建于 Tailwind CSS 之上，因此你需要先安装 Tailwind CSS。你可以按照官方的安装指南 (installation guide) 安装 Tailwind CSS。然后，你需要将以下代码添加到你的 tailwind.config.js 文件中 (HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official installation guide to install Tailwind CSS. Then you need to add the following code to your tailwind.config.js file)

注意：如果你正在使用 pnpm 和 Monorepo 架构，请确保你指向 ROOT node_modules (Note: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT node_modules)

设置 Provider (Setup Provider)

转到你的 app/providers.tsx 或 app/providers.jsx 文件（如果不存在则创建它），并将 Component 用 HeroUIProvider 包裹起来 (Go to your app/providers.tsx or app/providers.jsx (create it if it doesn't exist) and wrap the Component with the HeroUIProvider)

将 Provider 添加到根目录 (Add Provider to Root)

现在，转到你的 root 布局页面，并使用 Providers 将其包裹起来 (Now, Go to your root layout page and wrap it with the Providers)

注意：HeroUI 自动为你的应用程序添加了两个主题：light 和 dark。你可以通过将 dark/light 类添加到 html 标签来使用它们中的任何一个。有关更多详细信息，请参阅主题文档 (theme docs)。(Note: HeroUI automatically adds two themes, light and dark, to your application. You can use any of them by adding the dark/light class to the html tag. See the theme docs for more details.)

使用 HeroUI 组件 (Use HeroUI Components)

现在你可以直接在你的服务器组件中导入任何 HeroUI 组件，而无需使用 use client; 指令 (Now you can import any HeroUI component directly in your Server Components without needing to use the use client; directive)

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

Pages 目录设置