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 (@/*)? … No2、安装 rsuite
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, 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>;