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

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>
  );
}

在 rsuite 组件中有一些导航组件,比如 NavBreadcrumbDropdown,在与 Next.jsLink组件组合使用的时候,需要将 Link 组件作为 as 属性传递给导航组件。

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

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

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

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

FAQ

如何解决 "Error: Could not find the module ..." 错误?

⚠️ 直接使用上面的代码,您可能会遇到以下错误:

Error: Could not find the module "...#Nav#Item" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

这是因为在 Nextjs App Router 下 React Server Components 无法正确解析捆绑的组件。要解决此问题,您需要调整受影响组件的导入语句。

- import { Nav } from 'rsuite';
+ import Nav from 'rsuite/Nav';
+ import NavItem from 'rsuite/NavItem';

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

示例项目

Vercel banner