Use in Next.js
Production grade React applications that scale. The world's leading companies use Next.js to build server-rendered applications, static websites, and more.
Install and Initialization
$ npx create-next-app
If you use npm 5.1 or earlier, you cannot use npx. Execute the following command instead:
$ npm install -g create-next-app
$ create-next-app
Then execute
$ yarn dev
Open the browser at http://localhost:3000/
. It renders a header saying "Welcome to Next.js!" on the page.
Install rsuite
React Suite style depends on less, first need to install less
$ yarn add @zeit/next-less less
Add a next.config.js
file with the following configuration:
const withLess = require('@zeit/next-less');
module.exports = withLess({
lessLoaderOptions: {
javascriptEnabled: true
}
});
install rsuite
$ yarn add rsuite
Then edit the ./pages/index.js
file and change it to:
import React from 'react';
import Head from 'next/head';
import { Button } from 'rsuite';
import 'rsuite/lib/styles/index.less';
const Home = () => (
<div>
<Head>
<title>Home</title>
</Head>
<div className="hero">
<h1 className="title">Welcome to React Suite</h1>
<p className="description">
A suite of React components, intimate UI design, and a friendly development experience.
<br />
</p>
<Button appearance="primary" href="https://rsuitejs.com/">
Getting started
</Button>
</div>
<style jsx>{`
.hero {
width: 100%;
color: #333;
padding: 50px;
}
.title {
margin: 0;
width: 100%;
padding-top: 80px;
line-height: 1.15;
font-size: 48px;
}
`}</style>
</div>
);
export default Home;
Then re-execute
$ yarn dev
Open the browser and visit http://localhost:3000/
, you can see the application of React Suite page, and then start your development journey.
Navigation component and Link combination
There are some navigation components in the rsuite component, such as Dropdown
, Nav
, Breadcrumb
, which are used in conjunction with the Link
component of Next.js
to use the renderItem
method.
import Link from 'next/link';
import { Nav } from 'rsuite';
function Navigation() {
return (
<Nav>
<Nav.Item
renderItem={item => {
return <Link href="/">{item}</Link>;
}}
>
Home
</Nav.Item>
<Nav.Item
renderItem={item => {
return <Link href="/about">{item}</Link>;
}}
>
About
</Nav.Item>
</Nav>
);
}