docs: update the nextjs in rspack to use rsdoctor (#994)

Author: easy1090

packages/document/docs/en/guide/start/quick-start-shared.mdx

@@ -48,7 +48,7 @@ module.exports = {
 
 - **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
 
-### Modern.js Framework
+### Modern.js
 
 Initialize the plugin in the [tools.rspack](https://modernjs.dev/configure/app/tools/rspack) of `modern.config.ts`:
 
@@ -78,9 +78,51 @@ export default {
 For projects using Modern.js's webpack mode, please register the `RsdoctorWebpackPlugin` plugin through [tools.webpack](https://modernjs.dev/configure/app/tools/webpack).
 :::
 
-### Next.js Framework
+### Next.js
 
-Initialize the RsdoctorWebpackPlugin plugin in the [Webpack Config](https://nextjs.org/docs/app/api-reference/next-config-js/webpack) of `next.config.ts`.
+#### Step 1: Register the Rsdoctor plugin
+
+Initialize the [RsdoctorRspackPlugin](#rspack-projects)([RsdoctorWebpackPlugin](#webpack-projects)) plugin in the [Rspack Config](https://rspack.dev/guide/tech/next)([webpack config](https://nextjs.org/docs/pages/api-reference/config/next-config-js/webpack)) of `next.config.ts`.
+
+import { Tab, Tabs } from 'rspress/theme';
+
+<Tabs>
+
+<Tab label="Rspack">
+
+```ts title="next.config.ts"
+import type { NextConfig } from 'next';
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  webpack: (config) => {
+    if (config.name === 'client') {
+      config.plugins.push(
+        new RsdoctorRspackPlugin({
+          disableClientServer: true,
+        }),
+      );
+    } else if (config.name === 'server') {
+      config.plugins.push(
+        new RsdoctorRspackPlugin({
+          disableClientServer: true,
+          output: {
+            reportDir: './.next/server',
+          },
+        }),
+      );
+    }
+    return config;
+  },
+};
+
+export default nextConfig;
+```
+
+</Tab>
+
+<Tab label="webpack">
 
 ```ts title="next.config.ts"
 import type { NextConfig } from 'next';
@@ -112,28 +154,37 @@ const nextConfig: NextConfig = {
 export default nextConfig;
 ```
 
-- **Options:** The plugin provides some configuration options, please refer to [Options](../../config/options/options).
+</Tab>
+</Tabs>
 
-#### 📢 Note for Next.js projects
+- **Options:** The plugin provides some configuration options, please refer to [Options](../../config/options/options).
 
-Since Next.js closes the terminal service after the `build` execution is completed, the report page server run by Rsdoctor during the build process will also be shut down. At this point, you can reopen the report page using [@rsdoctor/cli](/guide/start/cli) without having to execute the build operation again.
+#### Step 2: Execute build
 
-- First, install [@rsdoctor/cli](/guide/start/cli):
+Execute the **build** command, Rsdoctor will generate the corresponding report data in the local repository artifacts.
 
 import { PackageManagerTabs } from '@theme';
 
-<PackageManagerTabs command="add @rsdoctor/cli -D" />
+<PackageManagerTabs command="run build" />
 
-- Second, add the following scripts commands to **package.json**, executing **client:rsdoctor** or **server:rsdoctor** can open the report for the corresponding builder:
+#### Step 3: Open the report
+
+After installing [@rsdoctor/cli](/guide/start/cli), add the following scripts commands to **package.json**, executing **client:rsd** or **server:rsd** can open the report of the corresponding builder:
+
+<PackageManagerTabs command="add @rsdoctor/cli -D" />
 
 ```ts
   "scripts": {
-    "client:rsdoctor": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json",
-    "server:rsdoctor": "rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json"
+    "client:rsd": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json", // Rsdoctor's client report
+    "server:rsd": "rsdoctor analyze --profile .next/server/.rsdoctor/manifest.json" // Rsdoctor's server report
   }
 ```
 
-For example, if Rsdoctor's build artifacts are located at the `.next/server/chunks/.rsdoctor/manifest.json` path, you can open the report page by executing the following command:
+#### 📢 Note for Next.js
+
+After Next.js finishes executing the `build` command, it will terminate the terminal service, causing the report page server run by Rsdoctor during the build process to close. To solve this problem, you can use [@rsdoctor/cli](/guide/start/cli) to reopen the report page without re-executing the build operation. The specific method is shown in the [third step](#step-3-open-the-report) or by locally executing the rsdoctor command:
+
+For example, if Rsdoctor's build output is located at the path `.next/server/chunks/.rsdoctor/manifest.json`, you can open the report page by executing the following command:
 
 ```bash
 rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json
@@ -170,7 +221,7 @@ export default defineConfig({
 
 ---
 
-## Step 3: run build
+## Step 3: Execute build
 
 Now, you can run the **build** command in the project. After the build is complete, Rsdoctor will automatically open the analysis page of this build.
 

packages/document/docs/zh/guide/start/quick-start-shared.mdx

@@ -80,7 +80,48 @@ export default {
 
 ### Next.js 项目
 
-在 `next.config.js` 的 [Webpack Config](https://nextjs.org/docs/app/api-reference/next-config-js/webpack) 中初始化 RsdoctorWebpackPlugin 插件。
+#### 第一步：注册 Rsdoctor 插件
+
+在 `next.config.ts` 的 [Rspack 配置](https://rspack.dev/guide/tech/next)([webpack 配置](https://nextjs.org/docs/pages/api-reference/config/next-config-js/webpack)) 中初始化 [RsdoctorRspackPlugin](#rspack-%E9%A1%B9%E7%9B%AE)（[RsdoctorWebpackPlugin](#webpack-%E9%A1%B9%E7%9B%AE)） 插件。
+
+import { Tab, Tabs } from 'rspress/theme';
+
+<Tabs>
+<Tab label="Rspack">
+
+```ts title="next.config.ts"
+import type { NextConfig } from 'next';
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  webpack: (config) => {
+    if (config.name === 'client') {
+      config.plugins.push(
+        new RsdoctorRspackPlugin({
+          disableClientServer: true,
+        }),
+      );
+    } else if (config.name === 'server') {
+      config.plugins.push(
+        new RsdoctorRspackPlugin({
+          disableClientServer: true,
+          output: {
+            reportDir: './.next/server',
+          },
+        }),
+      );
+    }
+    return config;
+  },
+};
+
+export default nextConfig;
+```
+
+</Tab>
+
+<Tab label="webpack">
 
 ```ts title="next.config.ts"
 import type { NextConfig } from 'next';
@@ -112,28 +153,37 @@ const nextConfig: NextConfig = {
 export default nextConfig;
 ```
 
-- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
+</Tab>
+</Tabs>
 
-#### 📢 Next.js 项目使用注意
+- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
 
-由于 Next.js 在 `build` 执行结束后会终止终端服务，因此 Rsdoctor 在构建过程中运行的报告页面服务器也会被关闭。此时，你可以通过 [@rsdoctor/cli](/guide/start/cli) 再次打开页面报告，而无需重新执行构建操作。
+#### 第二步：执行构建
 
-- 首先，安装 [@rsdoctor/cli](/guide/start/cli)：
+执行 **build** 命令，Rsdoctor 会在本地仓库产物中生成对应的报告数据。
 
 import { PackageManagerTabs } from '@theme';
 
-<PackageManagerTabs command="add @rsdoctor/cli -D" />
+<PackageManagerTabs command="run build" />
+
+#### 第三步：打开报告
 
-- 其次，**package.json** 里添加如下 scripts 命令，执行 **client:rsdoctor** 或者 **server:rsdoctor** 可打开对应构建器的报告：
+安装 [@rsdoctor/cli](/guide/start/cli) 后，**package.json** 里添加如下 scripts 命令，执行 **client:rsd** 或者 **server:rsd** 可打开对应构建器的报告：
+
+<PackageManagerTabs command="add @rsdoctor/cli -D" />
 
 ```ts
   "scripts": {
-    "client:rsdoctor": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json",
-    "server:rsdoctor": "rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json"
+    "client:rsd": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json", // Rsdoctor's client report path
+    "server:rsd": "rsdoctor analyze --profile .next/server/.rsdoctor/manifest.json" // Rsdoctor's server report path
   }
 ```
 
-例如：Rsdoctor 的构建产物在 `.next/server/chunks/.rsdoctor/manifest.json` 路径，则可通过执行下面命令来打开报告页面：
+#### 📢 Next.js 项目使用注意
+
+Next.js 在 `build` 执行结束后会终止终端服务，导致 Rsdoctor 在构建过程中运行的报告页面服务器关闭。为解决此问题，你可以使用 [@rsdoctor/cli](/guide/start/cli) 重新打开报告页面，无需重新执行构建操作。具体方法见[第三步](#%E7%AC%AC%E4%B8%89%E6%AD%A5%E6%89%93%E5%BC%80%E6%8A%A5%E5%91%8A)或本地执行 rsdoctor 命令：
+
+例如 Rsdoctor 的构建产物在 `.next/server/chunks/.rsdoctor/manifest.json` 路径，则可通过执行下面命令来打开报告页面：
 
 ```bash
 rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json