mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 01:19:45 +08:00
ca35f2f891
* docs: update docs * docs: update docs * feat: optimize code * docs: update docs * docs: update docs
163 lines
4.4 KiB
Markdown
163 lines
4.4 KiB
Markdown
---
|
|
order: 4
|
|
title: Usage with Next.js
|
|
---
|
|
|
|
[Next.js](https://nextjs.org/) is currently the most popular React server-side isomorphic framework in the world. This article will try to use `antd` components in projects created by Next.js.
|
|
|
|
## Install and Initialization
|
|
|
|
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/).
|
|
|
|
<InstallDependencies npm='$ npx create-next-app antd-demo' yarn='$ yarn create next-app antd-demo' pnpm='$ pnpm create next-app antd-demo'></InstallDependencies>
|
|
|
|
The tool will create and initialize environment and dependencies automatically, please try config your proxy setting, or use another npm registry if any network errors happen during it.
|
|
|
|
After the initialization is complete, we enter the project and start.
|
|
|
|
```bash
|
|
$ cd antd-demo
|
|
$ npm run dev
|
|
```
|
|
|
|
Open the browser at http://localhost:3000/. if you see the NEXT logo, it is considered a success.
|
|
|
|
## Import antd
|
|
|
|
Now we install `antd` from yarn or npm or pnpm.
|
|
|
|
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
|
|
|
|
Modify `src/app/page.tsx`, import Button component from `antd`.
|
|
|
|
```jsx
|
|
'use client';
|
|
|
|
import React from 'react';
|
|
import { Button } from 'antd';
|
|
|
|
const Home = () => (
|
|
<div className="App">
|
|
<Button type="primary">Button</Button>
|
|
</div>
|
|
);
|
|
|
|
export default Home;
|
|
```
|
|
|
|
OK, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `Next.js` at its [User Guide](https://nextjs.org/).
|
|
|
|
We are successfully running antd components now, go build your own application!
|
|
|
|
## Using Next.js App Router
|
|
|
|
If you are using the App Router in Next.js and using antd as your component library, to make the antd component library work better in your Next.js application and provide a better user experience, you can try using the following method to extract and inject antd's first-screen styles into HTML to avoid page flicker.
|
|
|
|
1. Install `@ant-design/cssinjs`
|
|
|
|
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
|
|
|
|
2. Create `lib/AntdRegistry.tsx`
|
|
|
|
```tsx
|
|
'use client';
|
|
|
|
import React from 'react';
|
|
import { useServerInsertedHTML } from 'next/navigation';
|
|
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
|
|
|
|
export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
|
|
const cache = createCache();
|
|
|
|
useServerInsertedHTML(() => (
|
|
<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}></style>
|
|
));
|
|
|
|
return <StyleProvider cache={cache}>{children}</StyleProvider>;
|
|
}
|
|
```
|
|
|
|
3. Use it in `app/layout.tsx`
|
|
|
|
```tsx
|
|
import StyledComponentsRegistry from '../lib/AntdRegistry';
|
|
import './globals.css';
|
|
import { Inter } from 'next/font/google';
|
|
|
|
const inter = Inter({ subsets: ['latin'] });
|
|
|
|
export const metadata = {
|
|
title: 'Create Next App',
|
|
description: 'Generated by create next app',
|
|
};
|
|
|
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html lang="en">
|
|
<body className={inter.className}>
|
|
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
```
|
|
|
|
4. Customize theme in `theme/*.tsx`
|
|
|
|
```tsx
|
|
'use client';
|
|
|
|
// theme/index.tsx
|
|
import React from 'react';
|
|
import { ConfigProvider } from 'antd';
|
|
|
|
const withTheme = (node: JSX.Element) => (
|
|
<ConfigProvider
|
|
theme={{
|
|
token: {
|
|
colorPrimary: '#52c41a',
|
|
},
|
|
}}
|
|
>
|
|
{/* nesting */}
|
|
<ConfigProvider
|
|
theme={{
|
|
token: {
|
|
borderRadius: 16,
|
|
},
|
|
}}
|
|
>
|
|
{node}
|
|
</ConfigProvider>
|
|
</ConfigProvider>
|
|
);
|
|
|
|
export default withTheme;
|
|
```
|
|
|
|
5. Use in page
|
|
|
|
```tsx
|
|
'use client';
|
|
|
|
import React from 'react';
|
|
import { Button } from 'antd';
|
|
import withTheme from '../../theme';
|
|
|
|
const Home = function Home() {
|
|
return (
|
|
<div className="App">
|
|
<Button type="primary">Button</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const HomePage = () => {
|
|
return withTheme(<Home />);
|
|
};
|
|
|
|
export default HomePage;
|
|
```
|
|
|
|
For more detailed information, please refer to [with-nextjs-app-router-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style)。
|