@modern-js/main-doc 0.0.0-nightly-20250514160342 → 0.0.0-nightly-20250518160324

package/docs/en/configure/app/tools/postcss.mdx

@@ -1,6 +1,5 @@
 ---
 title: postcss
-configName: tools.postcss
 ---
 
 # tools.postcss
@@ -34,6 +33,6 @@ Modern.js integrates PostCSS by default, you can configure [postcss-loader](http
 
 It should be noted that when you enable the `tools.lightningcss` configuration, PostCSS will be disabled by default, including `postcss-loader` and its default plugins.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.postcss" />

package/docs/en/configure/app/tools/rspack.mdx

@@ -1,6 +1,5 @@
 ---
 title: rspack
-configName: tools.rspack
 ---
 
 # tools.rspack
@@ -10,6 +9,6 @@ configName: tools.rspack
 
 `tools.rspack` is used to configure [Rspack](https://rspack.dev/).
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.rspack" />

package/docs/en/configure/app/tools/style-loader.mdx

@@ -1,6 +1,5 @@
 ---
 title: styleLoader
-configName: tools.styleLoader
 ---
 
 # tools.styleLoader
@@ -10,6 +9,6 @@ configName: tools.styleLoader
 
 The config of [style-loader](https://github.com/webpack-contrib/style-loader) can be set through `tools.styleLoader`.
 
-import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.styleLoader" />

package/docs/en/guides/advanced-features/bff/extend-server.mdx

@@ -1,35 +1,41 @@
 # Extend BFF Server
 
-In some applications, developers may want to handle all BFF functions uniformly, such as for authentication, logging, data processing, etc.
+In some applications, developers may want to handle all BFF functions uniformly, such as authentication, logging, data processing, etc.
 
-Modern.js provides two methods that allow developers to extend the BFF Server freely according to the runtime framework.
+Modern.js allows users to freely extend the BFF Server through the [Custom Server](/guides/advanced-features/custom-server.html) method.
 
-## Middleware
+## Using Middleware
 
-Developers can write middleware in the `api/_app.ts` file to extend the BFF Server. Taking Express as the runtime framework, here is an example of how to write a middleware to add permission checks:
+Developers can use middleware by configuring middlewares in `server/modern.server.ts`. The following describes how to write a BFF middleware manually to add permission verification:
 
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/server';
-import { Request, Response, NextFunction } from 'express';
+```ts title="server/modern.server.ts"
+import {
+  type MiddlewareHandler,
+  defineServerConfig,
+} from '@modern-js/server-runtime';
 
-export default hook(({ addMiddleware }) => {
-  addMiddleware(async (req: Request, res: Response, next: NextFunction) => {
-    if (req.url !== '/api/login') {
-      const sid = req?.cookies?.sid;
-      if (!sid) {
-        res.status(400);
-        res.json({ code: -1, message: 'need login' });
-      } else {
-        next();
-      }
-    } else {
-      next();
+const requireAuthForApi: MiddlewareHandler = async (c, next) => {
+  if (c.req.path.startsWith('/api') && c.req.path !== '/api/login') {
+    const sid = c.req.cookie('sid');
+    if (!sid) {
+      return c.json({ code: -1, message: 'need login' }, 400);
     }
-  });
+  }
+  await next();
+};
+
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'require-auth-for-api',
+      handler: requireAuthForApi,
+    },
+  ]
 });
+
 ```
 
-Then add a standard BFF function `api/lambda/hello.ts`:
+Then add a regular BFF function `api/lambda/hello.ts`:
 
 ```ts title="api/lambda/hello.ts"
 export default async () => {
@@ -37,7 +43,7 @@ export default async () => {
 };
 ```
 
-Next, in the frontend, add the code to access the API in `src/routes/page.tsx`, directly using the integrated method for the call:
+Next, in the frontend `src/routes/page.tsx`, add the interface access code and directly use the integrated method to call:
 
 ```ts title="src/routes/page.tsx"
 import { useState, useEffect } from 'react';
@@ -59,14 +65,14 @@ export default () => {
 };
 ```
 
-Now run the `dev` command to start the project, and visit `http://localhost:8080/`. You will find that the request to `/api/hello` is intercepted:
+Now run the `dev` command to start the project, and access `http://localhost:8080/` to find that the request for `/api/hello` has been intercepted:
 
 ![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/network2.png)
 
-Finally, modify the frontend code in `src/routes/page.tsx` to call the login interface before accessing `/api/hello`:
+Finally, modify the frontend code `src/routes/page.tsx`, and call the login interface before accessing `/api/hello`:
 
 :::note
-Here the login interface is not actually implemented; the code is just for demonstration.
+This part does not implement a real login interface; the code is just for demonstration.
 :::
 
 ```ts
@@ -92,63 +98,8 @@ export default () => {
 };
 ```
 
-Refresh the page to see that the access to `/api/hello` is successful:
+Refresh the page, and you can see that the access to `/api/hello` is successful:
 
 ![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/network3.png)
 
-The above code simulates adding middleware in `api/_app.ts` to implement simple login functionality. Similarly, other functionalities can be implemented in this hook file to extend the BFF Server.
-
-:::info
-The way middleware is written may differ depending on the runtime framework. For details, see [Runtime Frameworks](/guides/advanced-features/bff/frameworks).
-:::
-
-## Define Server Instance
-
-In addition to middleware, you can also define a BFF Server instance via the `api/app.ts`. Developers need to export an instance that can be recognized by the runtime framework plugin. Here is a simple demonstration of how to define a server instance with Koa and Express.
-
-import { Tabs, Tab as TabItem } from "@theme";
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="api/app.ts"
-import express from 'express';
-
-const app = express();
-app.use(async (req, res, next) => {
-  console.info(`access url: ${req.url}`);
-  next();
-});
-
-export default app;
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="api/app.ts"
-import koa from 'koa';
-
-const app = new Koa();
-app.use(async (ctx, next) => {
-  console.info(`access url: ${ctx.url}`);
-  await next();
-});
-
-export default app;
-```
-
-  </TabItem>
-</Tabs>
-
-In complex BFF logic, defining a server instance allows for easier organization of code logic and directory structure design through a single entry point. In this file, you can perform initialization logic, add global middleware, declare routes, and even extend the original framework.
-
-The routes defined by the BFF functions will be registered after the routes defined in the `app.ts` file. Therefore, you can also intercept the routes defined by the BFF functions here for preprocessing or early responses.
-
-:::note
-At this time, if `api/_app.ts` exists in the application, the defined middleware will be executed after the middleware exported by the `api/app.ts` instance. In most cases, middleware can cover most customization needs for BFF functions. Only when the application's server-side logic is more complex do you need to customize the server instance.
-:::
-
-:::caution
-When `api/app.ts` does not exist in the application, Modern.js will default to adding [koa-body](https://www.npmjs.com/package/koa-body). When `api/app.ts` does exist in the application, if developers wish to use BFF functions with bodies, they will need to **add `koa-body` themselves**.
-:::
+The above code simulates defining middleware in `server/Modern.server.ts` and implements a simple login function. Similarly, other functionalities can be implemented in this configuration file to extend the BFF Server.

package/docs/en/guides/advanced-features/bff/frameworks.mdx

@@ -1,81 +1,25 @@
-# Runtime Framework
-
-Modern.js BFF supports different runtime frameworks. Currently, Modern.js BFF supports two runtime frameworks: [Express.js](https://expressjs.com/) and [Koa.js](https://koajs.com/).
+---
+sidebar_position: 3
+title: Runtime Framework
+---
 
-When using different runtime frameworks, some APIs may differ.
-
-## Accessing Request Context
+# Runtime Framework
 
-In BFF functions, you may need to access the request context to handle more logic. Depending on the runtime framework, you need to use different APIs:
+Modern.js uses [Hono.js](https://hono.dev/) as the BFF and Server runtime framework, so you can [extend BFF Server](/guides/advanced-features/bff/extend-server.html) based on the Hono.js ecosystem.
 
-import { Tabs, Tab as TabItem } from "@theme";
+## Getting Request Context
 
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
+Sometimes in BFF functions, it's necessary to obtain the request context to handle more logic. In such cases, you can use `useHonoContext` to get it:
 
 ```ts title="api/lambda/hello.ts"
-import { useContext } from '@modern-js/runtime/express'
+import { useHonoContext } from '@modern-js/plugin-bff/hono'
 export const get = async () => {
-  const { req } = useContext();
-  console.info(`access url: ${req.url}`);
+  const c = useHonoContext();
+  console.info(`access url: ${c.req.url}`);
   return 'Hello Modern.js'
 };
 ```
 
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="api/lambda/hello.ts"
-import { useContext } from '@modern-js/runtime/koa'
-export const get = async () => {
-  const ctx = useContext();
-  console.info(`access url: ${req.url}`);
-  return 'Hello Modern.js'
-};
-```
-
-  </TabItem>
-</Tabs>
-
-:::info
-For more details, refer to [useContext](/apis/app/runtime/bff/use-context).
-:::
-
-## Using Middleware
-
-In BFF functions, you may need to use middleware to handle more logic. Depending on the runtime framework, you need to use different APIs:
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/express';
-
-export default hook(({ addMiddleware }) => {
-  addMiddleware((req, res, next) => {
-    req.query.id = 'koa';
-    next();
-  });
-});
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/koa';
-
-export default hook(({ addMiddleware }) => {
-  addMiddleware(async (ctx, next) => {
-    ctx.req.query.id = 'koa';
-    await next();
-  });
-});
-```
-
-  </TabItem>
-</Tabs>
-
 :::info
-For more details, refer to [hook](/apis/app/runtime/bff/hook).
+For more details, refer to [useHonoContext](/apis/app/runtime/bff/use-hono-context).
 :::

package/docs/en/guides/advanced-features/custom-server.mdx

@@ -6,12 +6,19 @@ sidebar_position: 16
 
 Modern.js encapsulates most server-side capabilities required by projects, typically eliminating the need for server-side development. However, in certain scenarios such as user authentication, request preprocessing, or adding page skeletons, custom server-side logic may still be necessary.
 
-## Custom Server Capabilities
+## Starting a Custom Server
 
-Create the `server/modern.server.ts` file in the project directory, and you can add the following configurations to extend the Server:
+To start a custom server, the following steps need to be taken:
+1. Add and install the dependencies `@modern-js/server-runtime` and `ts-node` to `devDependencies`.
+2. Add `server` to the `include` section of `tsconfig`.
+3. Create a file `server/modern.server.ts` in the project directory, where you can write custom logic.
+
+## Capabilities of the Custom Server
+
+In the `server/modern.server.ts` file, you can add the following configurations to extend the Server:
 - **Middleware**
 - **Render Middleware**
-- **Server Plugin**
+- **Server-side Plugin**
 
 In the **Plugin**, you can define **Middleware** and **RenderMiddleware**. The middleware loading process is illustrated in the following diagram:
 
@@ -60,20 +67,17 @@ type ServerConfig = {
 ### Middleware
 
 Middleware supports executing custom logic before and after the **request handling** and **page routing** processes in Modern.js services.
-That is, if custom logic needs to handle both API routes and affect page routes, then Middleware is the obvious choice. If you only need to handle BFF API routes, this can be achieved by configuring the `path` to the BFF's `prefix`.
+If custom logic needs to handle both API routes and page routes, Middleware is the clear choice.
 
-:::note
-In the BFF scenario, BFF routing will only go through Middleware when the [runtime framework](/guides/advanced-features/bff/frameworks.html) is Hono.
-:::
+If you only need to handle BFF API routes, you can determine whether a request is for a BFF API by checking if `req.path` starts with the BFF `prefix`.
 
 #### Using Posture
 
 ```ts title="server/modern.server.ts"
 import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
-import { getMonitors } from '@modern-js/runtime';
 
 export const handler: MiddlewareHandler = async (c, next) => {
-  const monitors = getMonitors();
+  const monitors = c.get('monitors');
   const start = Date.now();
 
   await next();

package/docs/en/plugin/cli-plugins/api.mdx

@@ -2,6 +2,12 @@
 
 This document details the API for Modern.js CLI plugins. CLI plugins allow you to extend and customize the functionality of Modern.js projects during the build and development process.
 
+:::info
+
+CLI plugins need to be configured via the [`plugins`](/configure/app/plugins) field in `modern.config.ts`.
+
+:::
+
 ## Plugin Basic Structure
 
 A typical CLI plugin structure is as follows:

package/docs/en/plugin/runtime-plugins/api.mdx

@@ -2,6 +2,12 @@
 
 Modern.js's Runtime Plugins allow you to extend and modify the behavior of your application during its React code execution.  With Runtime Plugins, you can easily perform initialization tasks, implement React Higher-Order Component (HOC) wrapping, and more.
 
+:::info
+
+Runtime plugins need to be configured via the [`plugins`](/configure/app/runtime/plugins) field in `src/modern.runtime.ts`.
+
+:::
+
 ## Plugin Structure
 
 A typical Runtime Plugin looks like this:

package/docs/en/tutorials/first-app/c04-routes.mdx

@@ -118,10 +118,11 @@ import { Radio } from 'antd';
 
 Then modify the top of the UI to add a set of radio group:
 
-```tsx {4-9}
+```tsx
 export default function Layout() {
   return (
     <div>
+      // [!code highlight:6]
       <div className="h-16 p-2 flex items-center justify-center">
         <Radio.Group onChange={handleSetList} value={currentList}>
           <Radio value="/">All</Radio>
@@ -146,8 +147,9 @@ import { Outlet, useLocation, useNavigate } from '@modern-js/runtime/router';
 
 Finally, add local state and related logic to the Layout component:
 
-```tsx {2-9}
+```tsx
 export default function Layout() {
+  // [!code highlight:8]
   const navigate = useNavigate();
   const location = useLocation();
   const [currentList, setList] = useState(location.pathname || '/');

package/docs/en/tutorials/first-app/c05-loader.mdx

@@ -56,11 +56,13 @@ Data Loader doesn't just work for SSR. In CSR projects, Data Loader can also avo
 
 Modern.js also provides a hooks API called `useLoaderData`, we modify the exported component of `src/routes/page.tsx`:
 
-```tsx {1,2,5,13}
+```tsx
+// [!code highlight:2]
 import { useLoaderData } from '@modern-js/runtime/router';
 import type { LoaderData } from './page.data';
 
 function Index() {
+  // [!code highlight:1]
   const { data } = useLoaderData() as LoaderData;
 
   return (
@@ -68,6 +70,7 @@ function Index() {
       <Helmet>
         <title>All</title>
       </Helmet>
+      // [!code highlight:1]
       <List
         dataSource={data}
         renderItem={info => <Item key={info.name} info={info} />}

package/docs/zh/apis/app/hooks/server/server.mdx

@@ -0,0 +1,10 @@
+---
+title: modern.server.[tj]s
+sidebar_position: 1
+---
+
+# modern.server.[tj]s
+
+扩展 Modern.js Server 的文件，在此文件中可以给 Modern.js 工程启动的 Server 配置 [Middleware](/guides/advanced-features/custom-server.html#middleware) 、 [RenderMiddleware](/guides/advanced-features/custom-server.html#rendermiddleware) 或 [Plugin](/guides/advanced-features/custom-server.html#plugin)。
+
+可以对请求和响应进行拦截处理，鉴权与角色、请求预处理、异常兜底等。也可在内置处理逻辑（包括路由匹配、资源寻址、头部注入、页面渲染，静态 Web 托管）插入特定的业务逻辑。

package/docs/zh/apis/app/hooks/src/routes.mdx

@@ -10,11 +10,11 @@ sidebar_position: 2
 
 任何在 `src/routes` 下的 `layout.[tj]sx` 和 `page.[tj]sx` 都会作为应用的路由：
 
-```bash {3,4}
+```bash
 .
 └── routes
-    ├── layout.tsx
-    ├── page.tsx
+    ├── layout.tsx  # [!code highlight]
+    ├── page.tsx # [!code highlight]
     └── user
         ├── layout.tsx
         └── page.tsx

package/docs/zh/apis/app/runtime/bff/use-hono-context.mdx

@@ -0,0 +1,31 @@
+---
+title: useHonoContext
+---
+# useHonoContext
+
+用于在一体化 BFF 函数中获取 Hono 上下文。
+
+
+## 使用姿势
+
+```ts
+import { useHonoContext } from '@modern-js/plugin-bff/hono';
+```
+
+## 函数签名
+
+`function useHonoContext(): Context`
+
+## 示例
+
+开发者可以通过 `context` 获取更多的请求信息，例如设置响应头：
+
+```ts
+import { useHonoContext } from '@modern-js/plugin-bff/hono';
+
+export async function get() {
+  const c = useHonoContext();
+  c.res.headers.set('x-bff-api', 'true');
+  // ...
+}
+```

package/docs/zh/components/enable-bff.mdx

@@ -9,40 +9,15 @@ import { PackageManagerTabs } from '@theme';
 ```bash
 ? 请选择你想要的操作 启用可选功能
 ? 请选择功能名称 启用「BFF」功能
-? 请选择 BFF 类型 框架模式
 ```
 
-:::note
-目前推荐使用框架模式创建 BFF，后续我们将会移除 BFF 类型的概念。
-:::
+3. 将下面的代码添加到 `modern.config.[tj]s` 中：
 
-3. 根据选择的运行时框架，将下面的代码添加到 `modern.config.[tj]s` 中：
-
-import { Tabs, Tab as TabItem } from "@theme";
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
 
 ```ts title="modern.config.ts"
-import { expressPlugin } from '@modern-js/plugin-express';
 import { bffPlugin } from '@modern-js/plugin-bff';
 
 export default defineConfig({
-  plugins: [expressPlugin(), bffPlugin()],
+  plugins: [bffPlugin()],
 });
 ```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="modern.config.ts"
-import { koaPlugin } from '@modern-js/plugin-koa';
-import { bffPlugin } from '@modern-js/plugin-bff';
-
-export default defineConfig({
-  plugins: [koaPlugin(), bffPlugin()],
-});
-```
-
-  </TabItem>
-</Tabs>

package/docs/zh/components/rsbuild-config-tooltip.mdx

@@ -1,5 +1,5 @@
-import RsbuildLInk from '@site/src/components/RsbuildLink';
+import RsbuildLink from '@site/src/components/RsbuildLink';
 
 :::info
-该配置项的使用方式与 Rsbuild 完全一致。详细信息请参考 <RsbuildLInk configName={frontmatter.configName}/>。
+该配置项的使用方式与 Rsbuild 完全一致。详细信息请参考 <RsbuildLink configName={props.configName}/>。
 :::

package/docs/zh/components/tech-stack-node-framework.mdx

@@ -1 +1 @@
-Modern.js 支持 [Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/) 作为可选的 BFF 运行时框架，请参考[「BFF - 运行时框架」](/guides/advanced-features/bff/frameworks.html)。
+Modern.js Server 和 BFF 是以 [Hono.js](https://hono.dev/) 作为运行时框架，可以基于 Hono.js 生态扩展 Server，请参考 [自定义 Server](/guides/advanced-features/custom-server.html)。

package/docs/zh/configure/app/dev/asset-prefix.mdx

@@ -1,6 +1,5 @@
 ---
 title: assetPrefix
-configName: dev.assetPrefix
 ---
 
 # dev.assetPrefix
@@ -10,9 +9,9 @@ configName: dev.assetPrefix
 
 此配置项用于设置 **开发模式** 下的静态资源 URL 前缀。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.assetPrefix" />
 
 :::warning
 请注意，该配置项仅适用于开发模式。在生产模式下，请使用 [output.assetPrefix](/configure/app/output/asset-prefix) 配置项进行设置。

package/docs/zh/configure/app/dev/client.mdx

@@ -1,6 +1,5 @@
 ---
 title: client
-configName: dev.client
 ---
 
 # dev.client
@@ -41,6 +40,6 @@ const defaultConfig = {
 
 配置 Modern.js 在开发过程中注入的 client 代码，可以用于设置热更新对应的 WebSocket URL。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.client" />

package/docs/zh/configure/app/dev/hmr.mdx

@@ -1,6 +1,5 @@
 ---
 title: hmr
-configName: dev.hmr
 ---
 
 # dev.hmr
@@ -10,6 +9,6 @@ configName: dev.hmr
 
 是否开启 Hot Module Replacement 热更新能力。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.hmr" />

package/docs/zh/configure/app/dev/live-reload.mdx

@@ -1,6 +1,5 @@
 ---
 title: liveReload
-configName: dev.liveReload
 ---
 
 # dev.liveReload
@@ -10,6 +9,6 @@ configName: dev.liveReload
 
 是否在源文件变更时自动刷新页面。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.liveReload" />

package/docs/zh/configure/app/dev/progress-bar.mdx

@@ -1,6 +1,5 @@
 ---
 title: progressBar
-configName: dev.progressBar
 ---
 
 # dev.progressBar
@@ -19,6 +18,6 @@ type ProgressBar =
 
 是否在编译过程中展示进度条。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.progressBar" />

package/docs/zh/configure/app/dev/setup-middlewares.mdx

@@ -1,6 +1,5 @@
 ---
 title: setupMiddlewares
-configName: dev.setupMiddlewares
 ---
 
 # dev.setupMiddlewares
@@ -51,6 +50,6 @@ type SetupMiddlewares = Array<
 
 提供执行自定义函数和应用自定义中间件的能力。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.setupMiddlewares" />

package/docs/zh/configure/app/dev/watch-files.mdx

@@ -1,6 +1,5 @@
 ---
 title: watchFiles
-configName: dev.watchFiles
 ---
 
 # dev.watchFiles
@@ -27,6 +26,6 @@ type WatchFilesConfig = WatchFiles | WatchFiles[];
 
 监听指定文件和目录的变化。当文件发生变化时，可以触发页面的重新加载，或者触发 dev server 重新启动。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.watchFiles" />