Next.js (App)

Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。以下将介绍如何在 Next.js App Router 中使用 rsuite。

此文档是基于 Next.js v14.x.x 编写的，如果您使用的是其他版本，可能会有所不同。

1、自动安装(可选)

通过 create-next-app 命令创建一个新的 Next.js 项目。如果您已经有一个 Next.js 项目，可以跳过这一步。

npx create-next-app@latest

安装时，您将看到以下提示：

✔ What is your project named? … with-nextjs-app
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

2、安装 rsuite

npmyarnpnpm
npm install rsuite --save

3、导入样式

编辑 ./src/app/layout.tsx 文件, 添加 import 'rsuite/dist/rsuite-no-reset.min.css';, 如下:

import type { Metadata } from 'next';
+ import 'rsuite/dist/rsuite-no-reset.min.css';
import './globals.css';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app'
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

rsuite-no-reset.min.css 是一个不包含 reset 样式的版本，如果您需要使用 reset 样式，可以使用 rsuite.min.css。

4、设置 Provider

继续编辑 ./src/app/layout.tsx 文件, 导入 CustomProvider , 将其包裹在 body 标签中, 如下:

import type { Metadata } from 'next';
+ import { CustomProvider } from 'rsuite';
import 'rsuite/dist/rsuite-no-reset.min.css';
import './globals.css';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app'
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
+        <CustomProvider>{children}</CustomProvider>
      </body>
    </html>
  );
}

5、导航组件与 Link 组合

在 rsuite 组件中有一些导航组件，比如 Nav、Breadcrumb、Dropdown，在与 Next.js 的 Link组件组合使用的时候，需要将 Link 组件作为 as 属性传递给导航组件。

import Link from 'next/link';
import { Nav } from 'rsuite';

<Nav.Item as={Link} href="/about">
  About
</Nav.Item>;

<Breadcrumb.Item as={Link} href="/about">
  About
</Breadcrumb.Item>;

<Dropdown.Item as={Link} href="/about">
  About
</Dropdown.Item>;

示例项目

Vercel banner