site: update Next.js docs (#43448)

* site: update nextjs docs

* fix

* add

docs/react/contributing.en-US.md

@@ -55,6 +55,7 @@ The core team is monitoring for pull requests. We will review your pull request
 5. Run `npm test -- -u` to update the [jest snapshots](https://jestjs.io/docs/snapshot-testing) and commit these changes as well (if there are any updates).
 6. Ensure the UI change passes `npm run test-image`，Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform**
 7. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit` (Use [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)).
+8. Finally, please make sure that all GitHub CI checks pass, if they fail, you can click `detail` to enter the details to view the reason.
 
 Sending a Pull Request to [react-component](https://github.com/react-component/):
 

docs/react/contributing.zh-CN.md

@@ -55,6 +55,7 @@ Ant Design 团队会关注所有的 pull request，我们会 review 以及合并
 5. 运行 `npm test -- -u` 来更新 [jest snapshot](https://jestjs.io/zh-Hans/docs/snapshot-testing) 并且把这些更新也提交上来（如果有的话）。
 6. 确认所有的 UI 改动通过 `npm run test-image`，可以运行 `npm run test-image -- -u` 更新 UI 快照并且把这些更新也提交上来（如果有的话），**UI 测试基于 [Docker](https://docs.docker.com/get-docker/)，根据平台下载对应的安装程序。**
 7. 确保你的代码通过了 lint 检查 `npm run lint`. 小贴士: Lint 会在你 `git commit` 的时候自动运行（通过[Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)）。
+8. 最后请确保所有 GitHub CI 检查通过，如果失败，可点击 `detail` 进入详情查看原因。
 
 给 [react-component](https://github.com/react-component/) 发送 pull request：
 

docs/react/getting-started.en-US.md

@@ -113,6 +113,6 @@ Jest does not support `esm` modules, and Ant Design uses them. In order to test
 
 ## Customize your Workflow
 
-If you want to customize your workflow, we recommend using [webpack](https://webpack.js.org) to build and debug code. You can try out plenty of [boilerplates](https://github.com/enaqx/awesome-react#react-tools) available in the React ecosystem.
+If you want to customize your workflow, we recommend using [webpack](https://webpack.js.org) or [vite](https://vitejs.dev/) to build and debug code. You can try out plenty of [boilerplates](https://github.com/enaqx/awesome-react#react-tools) available in the React ecosystem.
 
 There are also some [scaffolds](https://scaffold.ant.design/) which have already been integrated into antd, so you can try and start with one of these and even contribute.

docs/react/getting-started.zh-CN.md

@@ -105,6 +105,6 @@ createRoot(document.getElementById('root')).render(<App />);
 
 ## 自行构建
 
-如果想自己维护工作流，我们推荐使用 [webpack](https://webpack.js.org) 进行构建和调试，可以使用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#react-tools) 进行开发。
+如果想自己维护工作流，我们推荐使用 [webpack](https://webpack.js.org) 或者 [vite](https://cn.vitejs.dev/) 进行构建和调试，可以使用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#react-tools) 进行开发。
 
 目前社区也有很多基于 antd 定制的 [React 脚手架](https://scaffold.ant.design/)，欢迎进行试用和贡献。

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

@@ -24,15 +24,15 @@ Open the browser at http://localhost:3000/. if you see the NEXT logo, it is cons
 
 ## Import antd
 
-Now we install `antd` from yarn or npm.
+Now we install `antd` from yarn or npm or pnpm.
 
-```bash
-$ npm install antd --save
-```
+<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';
 

docs/react/use-with-next.zh-CN.md

@@ -24,15 +24,15 @@ $ npm run dev
 
 ## 引入 antd
 
-现在从 yarn 或 npm 安装并引入 antd。
+现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
 
-```bash
-$ npm install antd --save
-```
+<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
 
 修改 `src/app/page.tsx`，引入 antd 的按钮组件。
 
 ```jsx
+'use client';
+
 import React from 'react';
 import { Button } from 'antd';
 

docs/react/use-with-vite.en-US.md

@@ -43,11 +43,9 @@ Below is the default directory structure.
 └── vite.config.ts
 ```
 
-Now we install `antd` from yarn or npm.
+Now we install `antd` from yarn or npm or pnpm.
 
-```bash
-$ npm install antd --save
-```
+<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
 
 Modify `src/App.js`, import Button component from `antd`.
 

docs/react/use-with-vite.zh-CN.md

@@ -43,11 +43,9 @@ $ npm run dev
 └── vite.config.js
 ```
 
-现在从 yarn 或 npm 安装并引入 antd。
+现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
 
-```bash
-$ npm install antd --save
-```
+<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
 
 修改 `src/App.js`，引入 antd 的按钮组件。