diff --git a/.changeset/twelve-ghosts-ring.md b/.changeset/twelve-ghosts-ring.md
new file mode 100644
index 00000000000..4948ea32990
--- /dev/null
+++ b/.changeset/twelve-ghosts-ring.md
@@ -0,0 +1,5 @@
+---
+'@modern-js/main-doc': patch
+---
+
+serve command package component
diff --git a/packages/document/main-doc/docs/en/apis/app/commands.mdx b/packages/document/main-doc/docs/en/apis/app/commands.mdx
index 6c06450f2ef..aa9fb22a9ad 100644
--- a/packages/document/main-doc/docs/en/apis/app/commands.mdx
+++ b/packages/document/main-doc/docs/en/apis/app/commands.mdx
@@ -153,28 +153,9 @@ The `--config` parameter needs to use a JSON string.
 pnpm does not support the use of JSON strings as parameter values currently. Use `npm new` to turn on.【[Relate Issue](https://github.com/pnpm/pnpm/issues/3876)】
 :::
 
-## modern serve
+import ServeCommand from "@site-docs-en/components/serve-command";
 
-The `modern serve` command is used to start a Modern.js project in the production environment. It can also be used to preview the artifacts built for the production environment locally. Please note that you need to execute the [`build`](/apis/app/commands#modern-build) command beforehand to generate the corresponding artifacts.
-
-```bash
-Usage: modern serve [options]
-
-Options:
-  -c --config <config>  specify the configuration file, which can be a relative or absolute path
-  -h, --help            show command help
-  --api-only            only run API service
-```
-
-By default, the project will run in `localhost:8080`, you can modify the server port number with `server.port`:
-
-```js
-export default defineConfig({
-  server: {
-    port: 8081,
-  },
-});
-```
+<ServeCommand />
 
 ## modern upgrade
 
@@ -252,4 +233,4 @@ Inspect config succeed, open following files to view the content:
 
 import DeployCommand from "@site-docs-en/components/deploy-command";
 
-<DeployCommand />
\ No newline at end of file
+<DeployCommand />
diff --git a/packages/document/main-doc/docs/en/components/serve-command.mdx b/packages/document/main-doc/docs/en/components/serve-command.mdx
new file mode 100644
index 00000000000..231dab34b9e
--- /dev/null
+++ b/packages/document/main-doc/docs/en/components/serve-command.mdx
@@ -0,0 +1,22 @@
+## modern serve
+
+The `modern serve` command is used to start a Modern.js project in the production environment. It can also be used to preview the artifacts built for the production environment locally. Please note that you need to execute the [`build`](/apis/app/commands#modern-build) command beforehand to generate the corresponding artifacts.
+
+```bash
+Usage: modern serve [options]
+
+Options:
+  -c --config <config>  specify the configuration file, which can be a relative or absolute path
+  -h, --help            show command help
+  --api-only            only run API service
+```
+
+By default, the project will run in `localhost:8080`, you can modify the server port number with `server.port`:
+
+```js
+export default defineConfig({
+  server: {
+    port: 8081,
+  },
+});
+```
diff --git a/packages/document/main-doc/docs/zh/apis/app/commands.mdx b/packages/document/main-doc/docs/zh/apis/app/commands.mdx
index 43496ba4a94..1cc4b758c4f 100644
--- a/packages/document/main-doc/docs/zh/apis/app/commands.mdx
+++ b/packages/document/main-doc/docs/zh/apis/app/commands.mdx
@@ -153,28 +153,9 @@ pnpm 暂不支持使用 JSON 字符串作为参数值，可使用 `npm new` 开
 
 :::
 
-## modern serve
+import ServeCommand from "@site-docs/components/serve-command";
 
-`modern serve` 命令用于在生产环境下启动 Modern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
-
-```bash
-Usage: modern serve [options]
-
-Options:
-  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
-  -h, --help            显示命令帮助
-  --api-only            仅启动 API 接口服务
-```
-
-默认情况下，应用将会在 `localhost:8080` 启动，可以通过 `server.port` 修改 Server 端口号：
-
-```js
-export default defineConfig({
-  server: {
-    port: 8081,
-  },
-});
-```
+<ServeCommand />
 
 ## modern upgrade
 
@@ -252,4 +233,4 @@ Inspect config succeed, open following files to view the content:
 
 import DeployCommand from "@site-docs/components/deploy-command";
 
-<DeployCommand />
\ No newline at end of file
+<DeployCommand />
diff --git a/packages/document/main-doc/docs/zh/components/serve-command.mdx b/packages/document/main-doc/docs/zh/components/serve-command.mdx
new file mode 100644
index 00000000000..d2777d9cc73
--- /dev/null
+++ b/packages/document/main-doc/docs/zh/components/serve-command.mdx
@@ -0,0 +1,22 @@
+## modern serve
+
+`modern serve` 命令用于在生产环境下启动 Modern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
+
+```bash
+Usage: modern serve [options]
+
+Options:
+  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
+  -h, --help            显示命令帮助
+  --api-only            仅启动 API 接口服务
+```
+
+默认情况下，应用将会在 `localhost:8080` 启动，可以通过 `server.port` 修改 Server 端口号：
+
+```js
+export default defineConfig({
+  server: {
+    port: 8081,
+  },
+});
+```