@modern-js/main-doc 0.0.0-next-1685369216913 → 0.0.0-next-1685418932858

package/docs/en/apis/app/hooks/src/pages.mdx

@@ -4,11 +4,15 @@ sidebar_position: 3
 ---
 # pages/
 
-Entry identifier if the application want uses file system-based routing.
+The identifier for the entry point when the application uses the [`Pages` entry](https://modernjs.dev/v1/docs/guides/usages/entries#pages-%E5%85%A5%E5%8F%A3) type.
 
-When the entry is the **Pages entry** type, the files in the `pages/` directory will be analyzed to client side routing.
+:::info
+Compatible with Modern.js 1.0 `Pages` entry. It is recommended to use [conventional routing](guides/basic-features/routes.html#conventional-routing).
+:::
+
+When the project structure is of the `Pages entry` type, the client-side routing configuration will be obtained by analyzing the files in the `src/pages` directory.
 
-For example, the following directory:
+For example, the following directory structure:
 
 ```bash
 .
@@ -20,7 +24,7 @@ For example, the following directory:
         └── info.jsx
 ```
 
-The generated route is configured as:
+The corresponding generated routing configuration is:
 
 ```bash
 [
@@ -30,22 +34,22 @@ The generated route is configured as:
 ]
 ```
 
-Files match the following conditions will not be treated as routing files:
+Files under the pages directory that meet the following conditions will not be treated as routing files:
 
-- suffix is not `.(j|t)sx?`.
-- `.d.ts` type definition file.
-- test file suffix like `.(test|spec|e2e).(j|t)sx?`.
+- Files whose suffix is not `.(j|t)sx?`.
+- `.d.ts` type definition files.
+- Test files ending in `.test.(j|t)sx?` or `.spec.(j|t)sx?` or `.e2e.(j|t)sx?`.
 
 :::tip
-it is recommended to write only the routing files in the `pages/`, and write the business logic to the independent features directory outside the `pages/`. In this way, most of the files in the pages directory will be routing files, and there is no need for additional filtering rules.
+It is recommended to only write entry code in the pages directory and write business logic in the independent features directory outside the pages directory. In this way, most of the files under the pages directory will be routing files, and there is no need for additional filtering rules.
 
 :::
 
 ### Dynamic Routing
 
-Directories or files wrapped with `[]` are considered dynamic routing.
+If the directory name of the route file is named with [], the generated route will be used as a dynamic route.
 
-For example the following directory structure:
+For example, the following directory structure:
 
 ```bash
 .
@@ -60,7 +64,7 @@ For example the following directory structure:
         └── info.jsx
 ```
 
-The generated route is configured as:
+The corresponding generated routing configuration is:
 
 ```js
 [
@@ -72,13 +76,13 @@ The generated route is configured as:
 ]
 ```
 
-Basis dynamic routing, it supports adding special routing suffixes `(*、?、+)`.
+On the basis of dynamic routing, special routing suffixes `(*, ?, +)` can be added.
 
-For example: `src/pages/users/[id]*.tsx` generate route `/users/:id*`
+For example: `src/pages/users/[id]*.tsx` will result in the route `/users/:id*`.
 
 ### Global Layout
 
-When the entire App needs a global `layout`, it can be achieved through `pages/_app.tsx`, which as follows:
+When the entire application needs a global `layout`, it can be achieved through `pages/_app.tsx`. The specific writing method is as follows:
 
 ```js
 import React from 'react';
@@ -93,9 +97,9 @@ export const App = ({Component, ...pageProps}:{ Component: React.ComponentType})
 }
 ```
 
-The above `Component` is the component to which the route is accessed.
+The above `Component` is the component matched when accessing a specific route.
 
-For example the following directory structure:
+For example, the following directory structure:
 
 ```bash
 .
@@ -107,26 +111,26 @@ For example the following directory structure:
     └── index.js
 ```
 
-- access `/`, the `Component` is `pages/index.js`.
-- access `/a`, the `Component` is `pages/a/index.js`.
-- access `/a/b`, the `Component` is `pages/a/b/index.js`.
+- Accessing `/` corresponds to the `Component` component in `pages/index.js`.
+- Accessing `/a` corresponds to the `Component` component in `pages/a/index.js`.
+- Accessing `/a/b` corresponds to the `Component` component in `pages/a/b/index.js`.
 
-:::tip Advantages
+:::tip Advantages of global layout
 
-- preserve the state of the global layout when the page changes.
-- add global css.
-- handle ComponentDidCatch error
-- use [defineConfig](/apis/app/runtime/app/define-config) dynamic configuration runtime.
+- Preserve the state of the global layout when the page changes.
+- Add global styles.
+- ComponentDidCatch error handling.
+- Use [defineConfig](/apis/app/runtime/app/define-config) to dynamically configure the runtime configuration.
 
 :::
 
 ### Partial Layout
 
-When developing an App, where sub routes under the same route may share the layout.
+When developing an application, there are scenarios where sub-routes under the same route share a layout.
 
-For this scene, Modern.js convention, when there is a `_layout.js` in the directory, the routes can shared this layout.
+For this scenario, Modern.js conventionally has a similar effect to global layout when there is `_layout.js` under the directory.
 
-For example the following directory structure:
+For example, the following directory structure:
 
 ```bash
 └── pages
@@ -147,18 +151,18 @@ const ALayout = ({ Component, ...pageProps }) => {
 export default ALayout;
 ```
 
-The Component props is the specific route, for example
+The `Component` parameter is the component corresponding to a specific accessed route, for example:
 
-- access `/a`, the `Component` is `pages/a/index.js`.
-- 访问 `/a/b`, the `Component` is `pages/a/b/index.js`.
+- Accessing `/a` corresponds to the `Component` component in `pages/a/index.js`.
+- Accessing `/a/b` corresponds to the `Component` component in `pages/a/b/index.js`.
 
-In this way, you can use `pages/a/_layout.js` to display the routing common layout in the `a` directory.
+In this way, `pages/a/_layout.js` can be used to meet the layout needs of shared routes under the `a` directory.
 
-### 404 路由
+### 404 Route
 
-The convention `pages/404.[tj]sx` is the default 404 route.
+`pages/404.[tj]sx` is conventionally the default 404 route.
 
-For example the following directory structure:
+For example, the following directory structure:
 
 ```bash
 .
@@ -169,7 +173,7 @@ For example the following directory structure:
         ├── 404.js
 ```
 
-the generated route is configured is as:
+The generated routing configuration is as follows:
 
 ```bash
 [
@@ -179,4 +183,4 @@ the generated route is configured is as:
 ]
 ```
 
-All unmatched routes will match to `pages/404.[tj]s`.
+All unmatched routes will be matched to `pages/404.[tj]s`.

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

@@ -4,13 +4,13 @@ sidebar_position: 2
 ---
 # routes/
 
-The entry identifier when the application uses file system-based routing.
+The identifier for the entry point when the application uses [Conventional Routing](guides/basic-features/routes.html#conventional-routing).
 
-When the project structure is of type `Routes directory entry`, the files in the `src/routes` directory are parsed to get the client-side routing configuration. See [Routing by convention](/guides/basic-features/routes) for more details on usage.
+Conventional routing uses `routes/` as the convention for the entry point and analyzes the files in the `src/routes` directory to obtain the client-side routing configuration.
 
-Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as a route to the application:
+Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as the application's routes:
 
-```bash {3}
+```bash {3,4}
 .
 └── routes
     ├── layout.tsx
@@ -20,9 +20,9 @@ Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as a route
         └── page.tsx
 ```
 
-## basic example
+## Basic Example
 
-The directory names in the `routes` directory will be used as a mapping of the route url, where `layout.tsx` is used as the layout component and `page.tsx` as the content component, which is a leaf node of the whole route, for example the following directory structure:
+The directory name under `routes` will be used as the mapping of the route URL. `layout.tsx` is used as the layout component and `page.tsx` is used as the content component in the routing. They are the leaf nodes of the entire route. For example, the following directory structure:
 
 ```bash
 .
@@ -32,14 +32,14 @@ The directory names in the `routes` directory will be used as a mapping of the r
         └── page.tsx
 ```
 
-The following two routes are produced:
+will generate two routes:
 
 - `/`
 - `/user`
 
-## Dynamic Route
+## Dynamic Routing
 
-If the directory name of the route file is named with `[]`, the generated route will be used as a dynamic route. For example, the following file directories:
+If the directory name of the route file is named with `[]`, the generated route will be used as a dynamic route. For example, the following file directory:
 
 ```
 └── routes
@@ -50,35 +50,15 @@ If the directory name of the route file is named with `[]`, the generated route
     └── page.tsx
 ```
 
-The `routes/[id]/page.tsx` file will be converted to a `/:id` route. All `/xxx` will match that route, except for the `/blog` route, which can be matched exactly.
+The `routes/[id]/page.tsx` file will be converted to the `/:id` route. Except for the `/blog` route that can be matched exactly, all other `/xxx` routes will be matched to this route.
 
-In the component, you can get the corresponding parameters by [useParams](/apis/app/runtime/router/router#useparams).
+In the component, you can use [useParams](/apis/app/runtime/router/router#useparams) to obtain the corresponding named parameter.
 
-In the loader, params will be used as input to [loader](/guides/basic-features/data-fetch#loader-function), and the corresponding parameters can be retrieved through the property `params`.
+When using the [loader](/guides/basic-features/data-fetch#the-loader-function) function to obtain data, `params` will be passed as an input parameter to the `loader` function, and the corresponding parameter can be obtained through the attribute of `params`.
 
-## Dynamic Optional Routes
+## Layout Component
 
-By using file directories named with `[$]`, the generated routes will be treated as dynamic routes. For example, the following file directory:
-
-```
-└── routes
-    ├── user
-    │   └── [id$]
-    │       └── page.tsx
-    ├── blog
-    │   └── page.tsx
-    └── page.tsx
-```
-
-The `routes/user/[id$]/page.tsx` file will be converted to the `/user/:id?` route. All routes under `/user` will match this route, and the `id` parameter is optional. This route is commonly used to differentiate between **creating** and **editing**.
-
-In the component, you can get the corresponding named parameters using [useParams](/apis/app/runtime/router/router#useparams).
-
-In the loader, params will be passed as an argument to the [loader](/guides/basic-features/data-fetch#loader-函数), and you can get them through `params.xxx`.
-
-## Layout component
-
-As in the example below, you can add a common layout component for all routing components by adding `layout.tsx`
+In the following example, a common layout component can be added to all route components by adding `layout.tsx`:
 
 ```bash
 .
@@ -90,7 +70,7 @@ As in the example below, you can add a common layout component for all routing c
         └── page.tsx
 ```
 
-You can represent child components in layout components by using `<Outlet>`:
+In the layout component, you can use `<Outlet>` to represent the child components:
 
 ```tsx title=routes/layout.tsx
 import { Link, Outlet, useLoaderData } from '@modern-js/runtime/router';
@@ -105,6 +85,6 @@ export default () => {
 ```
 
 :::note
-`<Outlet>` is a new API in React Router 6, see [Outlet] for details(https://reactrouter.com/en/main/components/outlet#outlet).
+`<Outlet>` is a new API in React Router 6. For details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
 
 :::

package/docs/en/apis/app/hooks/src/server.mdx

@@ -4,4 +4,4 @@ sidebar_position: 8
 ---
 # *.[server|node].[tj]sx
 
-Used in application projects to place server side code, When `*.tsx` and `*. [server|node].tsx` coexist, rendering on the server side will give preference to the `*. [server|node].tsx` file instead of the `*.tsx` file.
+Used in the application project to place server-side code. When `*.tsx` and `*.[server|node].tsx` coexist, SSR will prefer to use the `*.[server|node].tsx` file instead of the `*.tsx` file when rendering on the server.

package/docs/en/apis/app/hooks/src/stories.mdx

@@ -4,11 +4,14 @@ sidebar_position: 7
 ---
 # **/*.stories.[tj]sx
 
-App Storybook debug file. files in `src/` which suffix `*.stories.[tj]sx` are as debug files for Storybook.
+Application project Storybook files.
 
-Execute the `dev story` command to debugging these files in the Storybook.
+You can create files in the `*.stories.[tj]sx` format in the project source code directory `src/` as Storybook files.
+
+Run the `npm run dev story` command in the project to use these files to debug relevant content in Storybook.
 
 :::info
-Using a Storybook requires executing `new` command to enable the 「Visual Testing (Storybook)」 mode.
+To use Storybook, you need to enable the "Visual Testing (Storybook)" mode by running the `new` command in the project first.
 
 :::
+

package/docs/en/apis/app/hooks/src/test.mdx

@@ -2,13 +2,14 @@
 title: '**/*.test.[tj]sx?'
 sidebar_position: 6
 ---
+
 # **/*.test.[tj]sx?
 
-App test file.
+Application project test files.
 
-The App supports the file suffixed with `.test.[tj]sx` under the `src/` to write test cases.
+The application project supports creating files with the suffix `.test.[tj]sx?` in the project source code directory (`src`) to write test cases.
 
 :::info
-To use unit test and integration test, you need to execute the `new` command in advance to enable the `unit test/integration test`.
+To use unit testing and integration testing, you need to enable the "Unit Testing / Integration Testing" feature by running the `new` command in the project first.
 
 :::

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

@@ -6,7 +6,7 @@ title: Frameworks
 
 Modern.js's BFF supports different runtime frameworks, currently Modern.js's BFF supports two runtime frameworks[Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/).
 
-## Function Writing
+## Function Mode
 
 Under the function writing, only the middleware writing method of various runtime frameworks is different, and other implementations are basically the same. Take Express as an example to introduce how to write a middleware by hand in the `api/_ app.ts` and add permission verification:
 
@@ -96,7 +96,7 @@ Refresh the page and you can see that `/api/hello` was accessed successfully:
 
 The above code simulates the way to add middleware to the `/api/_app.ts` to achieve an easy login function. Also, other functions can be implemented in this hook file to extend BFF Server.
 
-## Framework Writing
+## Framework Mode
 
 Under the framework writing, Modern.js does not collect middleware in the `api/_app.ts`, and the running process is controlled by the plugin itself.
 

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

@@ -51,10 +51,10 @@ Execute `pnpm run dev`, then open `http://localhost:8080/` to see that the page
 
 In Modern.js, the BFF function routing system is implemented based on the file system, and it is also a conventional routing system.
 
-In **Function Writing**, All files under `api/` will map to an interface. In **Framework Writing**, All files under `api/lambda` will map to an interface
+In **Function Mode**, All files under `api/` will map to an interface. In **Framework Mode**, All files under `api/lambda` will map to an interface
 
 :::note
-Function Writing & Framework Writing will introduce soon.
+Function Mode & Framework Mode will introduce soon.
 
 :::
 
@@ -69,14 +69,14 @@ Files named `index.[jt]s` are mapped to the previous directory.
 - `api/index.ts` -> `{prefix}/`
 - `api/user/index.ts` -> `{prefix}/user`
 
-### Multi-layer Route
+### Multi-layer Routing
 
 Supports parsing nested files, if you create a nested folder structure, the files will still automatically parse routes in the same way.
 
 - `api/hello.ts` -> `{prefix}/hello`
 - `api/user/list.ts` -> `{prefix}/user/list`
 
-### Dynamic Route
+### Dynamic Routing
 
 Create folders or files named with `[xxx]` to support dynamic named routing parameters.
 

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

@@ -1,19 +1,19 @@
 ---
 sidebar_position: 2
-title: Writing Type
+title: BFF Type
 ---
-# Writing Type
+# BFF Type
 
 Runtime framework support is also an important part of **BFF**. Modern.js supports extending BFF's runtime framework through plugins, and provides a series of built-in plugins, developers can directly use the conventions and ecology of the framework.
 
-The plugin is compatible with most of the specifications of these frameworks, and each framework needs to provide two types of ways to extend the writing of BFF functions, namely **Function Writing** and **Framework Writing**.
+The plugin is compatible with most of the specifications of these frameworks, and each framework needs to provide two types of ways to extend the writing of BFF functions, namely **Function Mode** and **Framework Mode**.
 
 :::note
 Whether the current `api/` directory structure is written as a framework is determined by the corresponding plugin, Modern.js don't care.
 
 :::
 
-## Function Writing
+## Function Mode
 
 When the plugin considers that it is currently written as a function, it must support writing middleware in the `api/_ app.ts` to extend the BFF function.
 
@@ -32,7 +32,7 @@ The writing of middleware for different plugins is not the same, see [Runtime Fr
 
 :::
 
-## Framework Writing
+## Framework Mode
 
 Framework writing is a way of using frame structure to extend BFF functions. Compared with function writing, although frame writing can use more frame structure and make the entire BFF Server clearer in complex scenarios, it is also more complex and requires more attention to the content at the framework level.
 

package/docs/en/guides/basic-features/routes.mdx

@@ -182,7 +182,7 @@ Routes generated from file directories named with `[$]` will be treated as dynam
 
 The `routes/user/[id$]/page.tsx` file will be converted to the `/user/:id?` route. All routes under `/user` will match this route, and the `id` parameter is optional. This route is usually used to distinguish between **creation** and **editing**.
 
-In the component, you can use [useParams](/apis/app/runtime/router/router#useparams) to obtain the corresponding named parameter.
+In the component, you can use [useParams](/apis/app/runtime/router/router#useparams) to get the corresponding named parameter.
 
 In the loader, params will be passed as the input parameter of the [loader function](/guides/basic-features/data-fetch#loader-function), and you can get the parameter value through `params.xxx`.
 
@@ -191,7 +191,7 @@ In the loader, params will be passed as the input parameter of the [loader funct
 If you create a `$.tsx` file under the routes directory, it will be treated as the catch-all routing component. When there is no matching route, this component will be rendered.
 
 :::note
-`$.tsx` can be considered as a special `page` route component. When there is a `layout` component in the current directory, `$.tsx` will be rendered as a child component of `layout`.
+`$.tsx` can be considered as a special `page` route component. When there is a `layout.tsx` file in the current directory, `$.tsx` will be rendered as a child component of `layout`.
 :::
 
 For example, the following directory structure:
@@ -215,7 +215,7 @@ params['*']; // => 'aaa/bbb'
 
 ### No-path Layout
 
-When the directory name starts with `__`, the corresponding directory name will not be converted to an actual route path. For example, the following file directory:
+When the directory name starts with `__`, the directory name will not be converted to an actual route path. For example, the following file directory:
 
 ```bash
 .
@@ -449,7 +449,7 @@ However, this also brings a problem: if the chunk corresponding to the route has
 
 In this case, you can define a `Loading` component to display a custom `Loading` component before the static resources are loaded.
 
-To further improve the user experience and reduce loading time, Modern.js supports defining the `prefetch` attribute on the Link component to preload static resources and data. The `prefetch` attribute has three optional values:
+To further improve the user experience and reduce loading time, Modern.js supports defining the `prefetch` attribute on the Link component to preload static resources and data.
 
 ```tsx
 <Link prefetch="intent" to="page">
@@ -461,6 +461,8 @@ To further improve the user experience and reduce loading time, Modern.js suppor
 
 :::
 
+The `prefetch` attribute has three optional values:
+
 - `none`: default value, no prefetching, no additional behavior.
 - `intent`: This is the value we recommend for most scenarios. When you hover over the Link, the corresponding chunk and data defined in the data loader will be loaded automatically. When you move the mouse away, the loading will be cancelled automatically. In our tests, even fast clicks can reduce loading time by about 200ms.
 - `render`: The corresponding chunk and data defined in the Data Loader will be loaded when the Link component is rendered.
@@ -504,8 +506,6 @@ export default () => {
 Modern.js provides a series of optimizations for resource loading and rendering for conventional routing by default, and provides out-of-the-box SSR capabilities. When using self-controlled routing, developers need to encapsulate these capabilities themselves. It is recommended to use conventional routing.
 :::
 
-When using self-controlled routing, if the developer turns off the [`runtime.router`](/configure/app/runtime/router) configuration and uses `react-router-dom` directly, they also need to wrap it according to the React Router documentation.
-
 ## Other
 
 By default, Modern.js will enable the built-in routing scheme, which is React Router.
@@ -518,7 +518,9 @@ export default defineConfig({
 });
 ```
 
-Modern.js exposes the API of React Router from the `@modern-js/runtime/router` namespace for developers to use, ensuring that developers and Modern.js use the same code. In addition, in this case, the React Router code will be bundled into the JS output. If the project already has its own routing scheme or does not need to use client-side routing, this feature can be turned off.
+As mentioned above, when the [`runtime.router`](/configure/app/runtime/router) configuration is enabled, Modern.js will export the API of React Router from the `@modern-js/runtime/router` namespace for developers to use, ensuring that developers and Modern.js are using the same code, and automatically wrapping the `Provider` component according to the router configuration. In addition, in this case, the code of React Router will be packed into the JS output.
+
+If the project already has its own routing plan or does not need to use client-side routing, this feature can be disabled.
 
 ```js
 export default defineConfig({
@@ -527,3 +529,5 @@ export default defineConfig({
   },
 });
 ```
+
+As mentioned above, if the [`runtime.router`](/configure/app/runtime/router) configuration is disabled and `react-router-dom` is used directly for project routing management, the `Provider` needs to be wrapped according to the React Router documentation.

package/docs/zh/apis/app/hooks/api/{functions/api.mdx → api.mdx}

@@ -4,7 +4,7 @@ sidebar_position: 1
 ---
 # **/*.[tj]s
 
-在 BFF 函数写法下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/functions/api)外，`api` 目录下的文件会被注册为接口的路由。
+在 [BFF 函数写法](/guides/advanced-features/bff/type.html#函数写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/api#白名单)外，`api` 目录下的文件会被注册为接口的路由。
 
 :::info
 使用 `api` 目录需要开启 BFF 功能，需要在项目下执行 new 命令启用「BFF」功能。
@@ -31,7 +31,7 @@ sidebar_position: 1
 
 ### 动态路由
 
-同样的，你可以通过创建带有 `[xxx]` 的文件夹或者文件来支持动态的命名路由参数。
+路由系统支持通过 `[]` 命名的文件目录生成动态路由。
 
 - `api/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
 - `api/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
@@ -64,7 +64,7 @@ export const get = async () => {
 };
 ```
 
-这样导出函数，则会得到一个 `POST` 接口。
+这样导出函数，则会得到一个 `GET` 接口。
 
 应用工程中支持了 9 个 Method 定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
 
@@ -75,6 +75,6 @@ export const get = async () => {
 可以在一个文件中定义多个不同 Method 的函数，但如果定义多个相同 Method 的函数，则只有第一个会生效。
 
 :::info
-需要注意的是，定义的函数都应该是异步的，这个与函数调用时类型有关，这个后面会提到。
+需要注意的是，定义的函数都应该是异步的，这个与函数调用时类型有关。
 
 :::

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

@@ -0,0 +1,12 @@
+---
+title: _app.[tj]s
+sidebar_position: 2
+---
+# _app.[tj]s
+
+在 [BFF 函数写法](/guides/advanced-features/bff/type.html#函数写法)下，该文件可以为 BFF 函数添加前置中间件。
+
+:::note
+具体示例请参考 [hook](/apis/app/runtime/bff/hook)
+
+:::

package/docs/zh/apis/app/hooks/api/{framework/lambda.mdx → lambda.mdx}

@@ -1,10 +1,10 @@
 ---
 title: lambda/*.[tj]s
-sidebar_position: 1
+sidebar_position: 3
 ---
 # lambda/*.[tj]s
 
-在 BFF 框架写法下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/framework/lambda#白名单)外，`api/` 目录下的文件会被注册为接口的路由。
+在 [BFF 框架写法](/guides/advanced-features/bff/type.html#框架写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/lambda#白名单)外，`lambda/` 目录下的文件会被注册为接口的路由。
 
 :::info
 使用 `api` 目录需要开启 BFF 功能，需要在项目下执行 new 命令启用「BFF」功能。
@@ -34,7 +34,7 @@ sidebar_position: 1
 
 ### 动态路由
 
-同样的，你可以通过创建带有 `[xxx]` 的文件夹或者文件来支持动态的命名路由参数。
+路由系统支持通过 `[]` 命名的文件目录生成动态路由。
 
 - `api/lambda/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
 - `api/lambda/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
@@ -44,7 +44,7 @@ sidebar_position: 1
 
 ### 白名单
 
-默认 `api` 目录下所有文件都会当作 BFF 函数文件去解析，但同样我们也设置了白名单，这些文件不被被解析：
+默认 `lambda` 目录下所有文件都会当作 BFF 函数文件去解析，但同样我们也设置了白名单，这些文件不被被解析：
 
 - 命名以 `_` 开头的文件。例如：`_utils.ts`。
 - 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
@@ -54,4 +54,4 @@ sidebar_position: 1
 
 ## 函数定义
 
-和函数写法下[函数定义](/apis/app/hooks/api/functions/api#define-function)完全一致。
+和函数写法下[函数定义](/apis/app/hooks/api/api#函数定义)完全一致。

package/docs/zh/apis/app/hooks/api/test.mdx

@@ -1,12 +1,12 @@
 ---
 title: test.[tj]s
-sidebar_position: 2
+sidebar_position: 4
 ---
 # test.[tj]s
 
-应用的 BFF 测试文件，支持在 `api/` 目录后缀为 `.test.[tj]sx?` 的文件中编写测试用例。
+The BFF test file of the application supports writing test cases in files with the suffix `.test.[tj]sx?` under the `api/` directory.
 
 :::info
-使用单元测试、集成测试需要提前在项目下执行 new 命令启用「单元测试 / 集成测试」功能。
+Enabling unit testing and integration testing requires running the new command to enable the "Unit Testing/Integration Testing" function under the project first.
 
 :::

package/docs/zh/apis/app/hooks/config/icon.mdx

@@ -1,11 +1,11 @@
 ---
-title: icon
+title: icon/
 sidebar_position: 2
 ---
 
-# Icon
+# icon/
 
-## 设置 favicon
+## Favicon
 
 当项目根目录的 `config` 目录下存在 `favicon.*` 文件时，Modern.js 会自动将该文件设置到 [html.favicon](/configure/app/html/favicon) 配置项中，用于生成页面的 favicon 图标：
 
@@ -24,15 +24,15 @@ sidebar_position: 2
 
 在设置 app icon 时，Modern.js 会按以下顺序寻找文件：
 
-- favicon.png
-- favicon.jpg
-- favicon.jpeg
-- favicon.svg
-- favicon.ico
+- `favicon.png`
+- `favicon.jpg`
+- `favicon.jpeg`
+- `favicon.svg`
+- `favicon.ico`
 
-## 设置 app icon
+## Apple Touch Icon
 
-当项目根目录的 `config` 目录下存在 `icon.*` 文件时，Modern.js 会自动将该文件设置到 [html.appIcon](/configure/app/html/app-icon) 配置项中，用于生成 iOS 系统下的 apple-touch-icon 图标。
+当项目根目录的 `config` 目录下存在 `icon.*` 文件时，Modern.js 会自动将该文件设置到 [html.appIcon](/configure/app/html/app-icon) 配置项中，用于生成 iOS 系统下的 Apple Touch Icon 图标。
 
 ```
 ./config
@@ -49,8 +49,8 @@ sidebar_position: 2
 
 在设置 app icon 时，Modern.js 会按以下顺序寻找文件：
 
-- icon.png
-- icon.jpg
-- icon.jpeg
-- icon.svg
-- icon.ico
+- `icon.png`
+- `icon.jpg`
+- `icon.jpeg`
+- `icon.svg`
+- `icon.ico`

package/docs/zh/apis/app/hooks/config/mock.mdx

@@ -4,4 +4,4 @@ sidebar_position: 5
 ---
 # mock/
 
-项目根目录下存在 `config/mock/index.js` 时，在开发环节自动开启 Mock 服务。
+当项目目录下存在 `config/mock/index.js` 时，Modern.js 在开发环节将自动开启 Mock 服务。