ant-design/docs/react/use-with-next.en-US.md

---
group:
  title: Basic Usage
order: 2
title: Usage with Next.js
tag: Updated
---

[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`.

```tsx
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/).

You could find that components of antd do not have styles in the first screen. Next, you need to choose different SSR style processing methods according to the mode of Next.js.

## Using App Router <Badge>Updated</Badge>

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/nextjs-registry`

<InstallDependencies npm='$ npm install @ant-design/nextjs-registry --save' yarn='$ yarn add @ant-design/nextjs-registry' pnpm='$ pnpm install @ant-design/nextjs-registry --save'></InstallDependencies>

2. Use it in `app/layout.tsx`

```tsx
import React from 'react';
import { AntdRegistry } from '@ant-design/nextjs-registry';

const RootLayout = ({ children }: React.PropsWithChildren) => (
  <html lang="en">
    <body>
      <AntdRegistry>{children}</AntdRegistry>
    </body>
  </html>
);

export default RootLayout;
```

<!-- prettier-ignore -->
:::warning
Next.js App Router currently not support using sub-components via `.` like `<Select.Option />` and `<Typography.Text />`. Importing them from path would solve this problem.
:::

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)。

## Using Pages Router

If you are using the Pages 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`

> Notes for developers
>
> Please note that when you install `@ant-design/cssinjs`, you must ensure that the version is consistent with the version of `@ant-design/cssinjs` in local `node_modules` of `antd`, otherwise, multiple React instances will appear, resulting in ctx being unable to be read correctly. (Tips: you can use `npm ls @ant-design/cssinjs` command to view the local version)
>
> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">

<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>

2. Rewrite `pages/_document.tsx`

```tsx
import React from 'react';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import Document, { Head, Html, Main, NextScript } from 'next/document';
import type { DocumentContext } from 'next/document';

const MyDocument = () => (
  <Html lang="en">
    <Head />
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>
);

MyDocument.getInitialProps = async (ctx: DocumentContext) => {
  const cache = createCache();
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => (
        <StyleProvider cache={cache}>
          <App {...props} />
        </StyleProvider>
      ),
    });

  const initialProps = await Document.getInitialProps(ctx);
  const style = extractStyle(cache, true);
  return {
    ...initialProps,
    styles: (
      <>
        {initialProps.styles}
        <style dangerouslySetInnerHTML={{ __html: style }} />
      </>
    ),
  };
};

export default MyDocument;
```

3. Supports custom themes

```ts
// theme/themeConfig.ts
import type { ThemeConfig } from 'antd';

const theme: ThemeConfig = {
  token: {
    fontSize: 16,
    colorPrimary: '#52c41a',
  },
};

export default theme;
```

4. Rewrite `pages/_app.tsx`

```tsx
import React from 'react';
import { ConfigProvider } from 'antd';
import type { AppProps } from 'next/app';

import theme from './theme/themeConfig';

const App = ({ Component, pageProps }: AppProps) => (
  <ConfigProvider theme={theme}>
    <Component {...pageProps} />
  </ConfigProvider>
);

export default App;
```

5. Use antd in page component

```tsx
import React from 'react';
import { Button } from 'antd';

const Home = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default Home;
```

For more detailed information, please refer to [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style).
docs: update site use-with-next (#42903) * docs: update use-with-next * update * update 2023-06-12 16:42:06 +08:00			`---`
docs: react docs arrange (#44029) * docs: react docs arrange * chore: code clean * docs: arrange docs en * docs: update * docs: update * docs: update en doc * docs: update 2023-08-04 19:27:38 +08:00			`group:`
			`title: Basic Usage`
			`order: 2`
docs: update site use-with-next (#42903) * docs: update use-with-next * update * update 2023-06-12 16:42:06 +08:00			`title: Usage with Next.js`
docs: update nextjs docs (#46691) * docs: update nextjs docs * chore: code clean * docs: update nextjs docs en * chore: add Updated tag * docs: update 2023-12-29 11:55:11 +08:00			`tag: Updated`
docs: update site use-with-next (#42903) * docs: update use-with-next * update * update 2023-06-12 16:42:06 +08:00			`---`

			[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`

site: update Next.js docs (#43448) * site: update nextjs docs * fix * add 2023-07-10 10:08:28 +08:00			Now we install `antd` from yarn or npm or pnpm.
docs: update site use-with-next (#42903) * docs: update use-with-next * update * update 2023-06-12 16:42:06 +08:00
site: update Next.js docs (#43448) * site: update nextjs docs * fix * add 2023-07-10 10:08:28 +08:00			`<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>`
docs: update site use-with-next (#42903) * docs: update use-with-next * update * update 2023-06-12 16:42:06 +08:00
			Modify `src/app/page.tsx`, import Button component from `antd`.

docs: Update Next.js documentation (#45574) * site: Update Next.js documentation * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-10-29 14:51:39 +08:00			```tsx
docs: update site use-with-next (#42903) * docs: update use-with-next * update * update 2023-06-12 16:42:06 +08:00			`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/).

docs: update nextjs docs (#46691) * docs: update nextjs docs * chore: code clean * docs: update nextjs docs en * chore: add Updated tag * docs: update 2023-12-29 11:55:11 +08:00			`You could find that components of antd do not have styles in the first screen. Next, you need to choose different SSR style processing methods according to the mode of Next.js.`
docs: update docs about app router in use-with-next (#43579) * docs: update docs * docs: update docs * feat: optimize code * docs: update docs * docs: update docs 2023-07-16 12:13:22 +08:00
docs: update nextjs docs (#46691) * docs: update nextjs docs * chore: code clean * docs: update nextjs docs en * chore: add Updated tag * docs: update 2023-12-29 11:55:11 +08:00			`## Using App Router <Badge>Updated</Badge>`
docs: Update Next.js documentation (#45574) * site: Update Next.js documentation * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-10-29 14:51:39 +08:00
			`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.`

docs: update nextjs docs (#46691) * docs: update nextjs docs * chore: code clean * docs: update nextjs docs en * chore: add Updated tag * docs: update 2023-12-29 11:55:11 +08:00			1. Install `@ant-design/nextjs-registry`
chore: update Next.js docs (#45907) * docs: update Nextjs docs * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * update * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-11-16 20:14:27 +08:00
docs: update nextjs docs (#46691) * docs: update nextjs docs * chore: code clean * docs: update nextjs docs en * chore: add Updated tag * docs: update 2023-12-29 11:55:11 +08:00			`<InstallDependencies npm='$ npm install @ant-design/nextjs-registry --save' yarn='$ yarn add @ant-design/nextjs-registry' pnpm='$ pnpm install @ant-design/nextjs-registry --save'></InstallDependencies>`
docs: Update Next.js documentation (#45574) * site: Update Next.js documentation * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-10-29 14:51:39 +08:00
docs: update nextjs docs (#46691) * docs: update nextjs docs * chore: code clean * docs: update nextjs docs en * chore: add Updated tag * docs: update 2023-12-29 11:55:11 +08:00			2. Use it in `app/layout.tsx`
docs: Update Next.js documentation (#45574) * site: Update Next.js documentation * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-10-29 14:51:39 +08:00
			```tsx
			`import React from 'react';`
docs: update nextjs docs (#46691) * docs: update nextjs docs * chore: code clean * docs: update nextjs docs en * chore: add Updated tag * docs: update 2023-12-29 11:55:11 +08:00			`import { AntdRegistry } from '@ant-design/nextjs-registry';`
docs: Update Next.js documentation (#45574) * site: Update Next.js documentation * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-10-29 14:51:39 +08:00
			`const RootLayout = ({ children }: React.PropsWithChildren) => (`
			`<html lang="en">`
docs: update nextjs docs (#46691) * docs: update nextjs docs * chore: code clean * docs: update nextjs docs en * chore: add Updated tag * docs: update 2023-12-29 11:55:11 +08:00			`<body>`
			`<AntdRegistry>{children}</AntdRegistry>`
docs: Update Next.js documentation (#45574) * site: Update Next.js documentation * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-10-29 14:51:39 +08:00			`</body>`
			`</html>`
			`);`

			`export default RootLayout;`
			```

docs: update nextjs docs (#46691) * docs: update nextjs docs * chore: code clean * docs: update nextjs docs en * chore: add Updated tag * docs: update 2023-12-29 11:55:11 +08:00			`<!-- prettier-ignore -->`
			`:::warning`
			Next.js App Router currently not support using sub-components via `.` like `<Select.Option />` and `<Typography.Text />`. Importing them from path would solve this problem.
			`:::`
docs: Update Next.js documentation (#45574) * site: Update Next.js documentation * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-10-29 14:51:39 +08:00
			`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)。`

chore: update docs use with Next.js (#44569) * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-09-01 10:51:21 +08:00			`## Using Pages Router`
docs: update docs about nextjs pages router (#43651) * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 <afc163@gmail.com> 2023-07-19 16:56:08 +08:00
			`If you are using the Pages 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`

chore: update Next.js docs (#45907) * docs: update Nextjs docs * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * update * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-11-16 20:14:27 +08:00			`> Notes for developers`
			`>`
			> Please note that when you install `@ant-design/cssinjs`, you must ensure that the version is consistent with the version of `@ant-design/cssinjs` in local `node_modules` of `antd`, otherwise, multiple React instances will appear, resulting in ctx being unable to be read correctly. (Tips: you can use `npm ls @ant-design/cssinjs` command to view the local version)
chore: add image to Next.js doc (#45929) * chore: add image to Next.js doc * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-11-17 09:49:54 +08:00			`>`
			`> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">`
chore: update Next.js docs (#45907) * docs: update Nextjs docs * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * update * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> 2023-11-16 20:14:27 +08:00
docs: update docs about nextjs pages router (#43651) * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 <afc163@gmail.com> 2023-07-19 16:56:08 +08:00			`<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>`

			2. Rewrite `pages/_document.tsx`

			```tsx
site: update docs Usage with Next.js (#43720) * site: update docs Usage with Next.js * docs: update * docs: update 2023-07-22 21:43:13 +08:00			`import React from 'react';`
Merge branch 'master' into feature-merge-master 2023-09-03 00:22:34 +08:00			`import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';`
site: update docs Usage with Next.js (#43720) * site: update docs Usage with Next.js * docs: update * docs: update 2023-07-22 21:43:13 +08:00			`import Document, { Head, Html, Main, NextScript } from 'next/document';`
			`import type { DocumentContext } from 'next/document';`
docs: update _document example in next.js (#43657) 2023-07-19 18:43:44 +08:00
			`const MyDocument = () => (`
			`<Html lang="en">`
			`<Head />`
			`<body>`
			`<Main />`
			`<NextScript />`
			`</body>`
			`</Html>`
			`);`

			`MyDocument.getInitialProps = async (ctx: DocumentContext) => {`
			`const cache = createCache();`
			`const originalRenderPage = ctx.renderPage;`
			`ctx.renderPage = () =>`
			`originalRenderPage({`
site: update docs Usage with Next.js (#43720) * site: update docs Usage with Next.js * docs: update * docs: update 2023-07-22 21:43:13 +08:00			`enhanceApp: (App) => (props) => (`
			`<StyleProvider cache={cache}>`
			`<App {...props} />`
			`</StyleProvider>`
			`),`
docs: update _document example in next.js (#43657) 2023-07-19 18:43:44 +08:00			`});`

			`const initialProps = await Document.getInitialProps(ctx);`
			`const style = extractStyle(cache, true);`
			`return {`
			`...initialProps,`
			`styles: (`
			`<>`
			`{initialProps.styles}`
site: update docs Usage with Next.js (#43720) * site: update docs Usage with Next.js * docs: update * docs: update 2023-07-22 21:43:13 +08:00			`<style dangerouslySetInnerHTML={{ __html: style }} />`
docs: update _document example in next.js (#43657) 2023-07-19 18:43:44 +08:00			`</>`
			`),`
			`};`
			`};`

			`export default MyDocument;`
docs: update docs about nextjs pages router (#43651) * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 <afc163@gmail.com> 2023-07-19 16:56:08 +08:00			```

			`3. Supports custom themes`

site: update doc example in next.js agin (#43663) 2023-07-20 00:24:57 +08:00			```ts
			`// theme/themeConfig.ts`
			`import type { ThemeConfig } from 'antd';`
docs: update docs about nextjs pages router (#43651) * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 <afc163@gmail.com> 2023-07-19 16:56:08 +08:00
site: update doc example in next.js agin (#43663) 2023-07-20 00:24:57 +08:00			`const theme: ThemeConfig = {`
			`token: {`
			`fontSize: 16,`
			`colorPrimary: '#52c41a',`
			`},`
			`};`
docs: update docs about nextjs pages router (#43651) * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 <afc163@gmail.com> 2023-07-19 16:56:08 +08:00
site: update doc example in next.js agin (#43663) 2023-07-20 00:24:57 +08:00			`export default theme;`
docs: update docs about nextjs pages router (#43651) * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 <afc163@gmail.com> 2023-07-19 16:56:08 +08:00			```

			4. Rewrite `pages/_app.tsx`

			```tsx
site: update docs Usage with Next.js (#43720) * site: update docs Usage with Next.js * docs: update * docs: update 2023-07-22 21:43:13 +08:00			`import React from 'react';`
site: update doc example in next.js agin (#43663) 2023-07-20 00:24:57 +08:00			`import { ConfigProvider } from 'antd';`
docs: update docs about nextjs pages router (#43651) * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 <afc163@gmail.com> 2023-07-19 16:56:08 +08:00			`import type { AppProps } from 'next/app';`
Merge branch 'master' into feature-merge-master 2023-09-03 00:22:34 +08:00
docs: fix use-with-next.md (#45219) Co-authored-by: chenyuanbao@baidu.com <chenyuanbao@baidu.com> 2023-10-08 19:41:34 +08:00			`import theme from './theme/themeConfig';`
site: update doc example in next.js agin (#43663) 2023-07-20 00:24:57 +08:00
			`const App = ({ Component, pageProps }: AppProps) => (`
			`<ConfigProvider theme={theme}>`
			`<Component {...pageProps} />`
			`</ConfigProvider>`
			`);`
docs: update docs about nextjs pages router (#43651) * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 <afc163@gmail.com> 2023-07-19 16:56:08 +08:00
site: update doc example in next.js agin (#43663) 2023-07-20 00:24:57 +08:00			`export default App;`
docs: update docs about nextjs pages router (#43651) * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 <afc163@gmail.com> 2023-07-19 16:56:08 +08:00			```

			`5. Use antd in page component`

			```tsx
site: update docs Usage with Next.js (#43720) * site: update docs Usage with Next.js * docs: update * docs: update 2023-07-22 21:43:13 +08:00			`import React from 'react';`
docs: update docs about nextjs pages router (#43651) * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 <afc163@gmail.com> 2023-07-19 16:56:08 +08:00			`import { Button } from 'antd';`

site: update doc example in next.js agin (#43663) 2023-07-20 00:24:57 +08:00			`const Home = () => (`
			`<div className="App">`
			`<Button type="primary">Button</Button>`
			`</div>`
			`);`

			`export default Home;`
docs: update docs about nextjs pages router (#43651) * docs: update docs about nextjs pages router * Update docs/react/use-with-next.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * docs: update docs --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 <afc163@gmail.com> 2023-07-19 16:56:08 +08:00			```

			`For more detailed information, please refer to [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style).`