Next.js (App)

Next.js is a React framework for building full-stack web applications. Here's how to use rsuite with Next.js App Router.

This document is written based on Next.js v14.x.x. If you are using another version, it may be different.

1. Create Next.js App (Optional)

Create a new Next.js project with the create-next-app command. If you already have a Next.js project, you can skip this step.

npx create-next-app@latest

When installing, you will see the following prompt:

✔ 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. Install rsuite

npmyarnpnpm
npm install rsuite --save

3. Import styles

Edit the ./src/app/layout.tsx file and add import 'rsuite/dist/rsuite-no-reset.min.css';, as follows:

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 is a version without reset styles. If you need to use reset styles, you can use rsuite.min.css.

4. Provider Setup

Continue editing the ./src/app/layout.tsx file, import CustomProvider, and wrap it in the body tag, as follows:

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. Navigation components with Link

In the rsuite component, there are some navigation components, such as Nav, Breadcrumb, Dropdown. When combined with the Link component of Next.js, you need to pass the Link component as the as property to the navigation component.

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

How to solve the "Error: Could not find the module ..." error?

⚠️ If you use the code above directly, you may encounter the following error:

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

This is because React Server Components cannot correctly resolve the bundled components under Next.js App Router. To resolve this issue, you’ll need to adjust your import statements for affected 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>;

Example projects

Vercel banner