@modern-js/main-doc 0.0.0-nightly-20240909025816 → 0.0.0-nightly-20240910170704

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

@@ -1,10 +1,8 @@
----
-sidebar_position: 1
-title: Basic Usage
----
 # Basic Usage
 
-Applications developed with Modern.js can define API functions in the `api/` directory, which can be called by the front-end to send requests without writing front and back-end glue layer code, At the same time, it ensures the type safety of the front and back end
+In a Modern.js application, developers can define API files under the `api/lambda` directory and export API functions from these files. In the frontend code, these API functions can be directly invoked by importing the file, which initiates the API requests.
+
+This invocation method is called **unified invocation**, where developers do not need to write glue code for the frontend and backend separately, thereby ensuring type safety across both.
 
 ## Enable BFF
 
@@ -12,17 +10,17 @@ import EnableBFF from "@site-docs-en/components/enable-bff"
 
 <EnableBFF/>
 
-## BFF Function
+## BFF Functions
 
-The functions that are allowed to be called through integration are called **BFF functions**. Here is the simplest BFF function to write, creating an `api/hello.ts` file:
+Functions that allow unified invocation are called **BFF Functions**. Here is an example of the simplest BFF function. First, create the `api/lambda/hello.ts` file:
 
-```ts title="api/hello.ts"
+```ts title="api/lambda/hello.ts"
 export const get = async () => 'Hello Modern.js';
 ```
 
-Then directly import the function in `src/App.tsx` and call:
+Then, import and invoke the function directly in `src/routes/page.tsx`:
 
-```tsx title=src/App.tsx
+```tsx title="src/routes/page.tsx"
 import { useState, useEffect } from 'react';
 import { get as hello } from '@api/hello';
 
@@ -36,131 +34,142 @@ export default () => {
 };
 ```
 
-:::info
-Modern.js generator has already configured the `@api` alias in tsconfig.json, so you can import functions directly by aliases.
-
+:::tip
+After running the `new` command, the Modern.js generator will automatically configure the `@api` alias in `tsconfig.json`, allowing you to import functions directly using the alias.
 :::
 
-The functions import in `src/App.tsx` will be automatically converted into interface calls, so there is no need to call the interface through fetch.
+The function imported in `src/routes/page.tsx` will be automatically converted into an API call, eliminating the need to use an SDK or Web Fetch to call the API.
 
-Execute `pnpm run dev`, then open `http://localhost:8080/` to see that the page has displayed the content returned by the BFF function. In Network, you can see that the page sent a request to `http://localhost:8080/api/hello`.
+After running `pnpm run dev`, open `http://localhost:8080/` and you can see that the page displays the content returned by the BFF function. In the Network tab, you can see a request was made to `http://localhost:8080/api/hello`.
 
 ![Network](https://p6-piu.byteimg.com/tos-cn-i-8jisjyls3a/fd41750f8d414179a9b4ecb519919b36~tplv-8jisjyls3a-3:0:0:q75.png)
 
-## API Routes
+## Function Routes
 
-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 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 Mode & Framework Mode will introduce soon.
+In Modern.js, the routing system for BFF functions is implemented based on the file system, which is another form of **conventional routing**. Each BFF function in the `api/lambda` directory is mapped to an API route. Here are some routing conventions.
 
+:::info
+All routes generated by BFF functions have a common prefix, which defaults to `/api`. This can be configured using [bff.prefix](/configure/app/bff/prefix).
 :::
 
-All routes generated by BFF functions have a prefix, and the default value is `/api`. The prefix can be set through [bff.prefix](/configure/app/bff/prefix).
+### Default Routes
 
-Several routing conventions are described as follow.
+Files named `index.[jt]s` will be mapped to the parent directory.
 
-### Default Route
+- `api/lambda/index.ts` -> `{prefix}/`
+- `api/lambda/user/index.ts` -> `{prefix}/user`
 
-Files named `index.[jt]s` are mapped to the previous directory.
+### Nested Routes
 
-- `api/index.ts` -> `{prefix}/`
-- `api/user/index.ts` -> `{prefix}/user`
+Nested directories are supported, and files will be automatically parsed into routes in the same way.
 
-### Multi-layer Routing
+- `api/lambda/hello.ts` -> `{prefix}/hello`
+- `api/lambda/user/list.ts` -> `{prefix}/user/list`
 
-Supports parsing nested files, if you create a nested folder structure, the files will still automatically parse routes in the same way.
+### Dynamic Routes
 
-- `api/hello.ts` -> `{prefix}/hello`
-- `api/user/list.ts` -> `{prefix}/user/list`
+Similarly, creating a directory or file with `[xxx]` in the name supports dynamic route parameters. The rules for dynamic route function parameters can be found in [dynamic-path](/guides/advanced-features/bff/function#dynamic-path).
 
-### Dynamic Routing
+- `api/lambda/user/[username]/info.ts` -> `{prefix}/user/:username/info`
+- `api/lambda/user/username/[action].ts` -> `{prefix}/user/username/:action`
 
-Create folders or files named with `[xxx]` to support dynamic named routing parameters.
+### Whitelist
 
-- `api/user/[username]/info.ts` -> `{prefix}/user/:username/info`
-- `api/user/username/[action].ts` -> `{prefix}/user/username/:action`
+By default, all files under the `api/lambda/` directory are parsed as BFF function files, but the following files are ignored:
 
-### Allow List
-
-By default, all files in the'api/'directory will be parsed as BFF function files, but the following files will not be parsed:
-
-- file name start with `_`, for example `_utils.ts`.
-- files in directory which name start with `_`, for example `_utils/index.ts`、`_utils/cp.ts`.
-- test files, for example `foo.test.ts`.
-- type files, for example `hello.d.ts`.
-- files in `node_module`.
+- Files starting with an underscore `_`. For example: `_utils.ts`.
+- Files under directories starting with an underscore `_`. For example: `_utils/index.ts`, `_utils/cp.ts`.
+- Test files. For example: `foo.test.ts`.
+- TypeScript type files. For example: `hello.d.ts`.
+- Files under `node_modules`.
 
 ## RESTful API
 
-Modern.js BFF functions need to be defined according to the RESTful API standard, follow the HTTP Method specification, and do not allow free parameter definition.
-
-:::info
-Assuming that the function allows free definition of parameters, the resulting route must be called by the **private protocol** (the reason is that the request parameters cannot be distinguished from the request body), and cannot implement any RESTful API.
-
-If the service is only used for the application itself, there is no problem. but its **non-standard interface definition** cannot be integrated into the larger system. In the case of multiple systems working together (such as BFF low-code construction), other systems also need to follow the **private protocol**.
+Modern.js BFF functions need to follow RESTful API standards for definition. Developers must define BFF functions according to a set of rules.
 
+:::tip Design Principles
+BFF functions should not only be invoked within the project but also be accessible to other projects via an SDK or Web fetch. Therefore, Modern.js does not define a **private protocol** for unified invocation but uses standard HTTP methods along with common HTTP request parameters like `params`, `query`, and `body` to define functions.
 :::
 
-### Function Named Export
+### Function Export Rules
 
-Modern.js the export name of the BFF function determines the Method of the corresponding interface of the function, such as `get`, `post` and so on.
+#### HTTP Method Named Functions
 
-For example, following the example, a `GET` interface can be exported.
+Modern.js BFF functions' export names determine the HTTP method for the corresponding API, such as `get`, `post`, etc. For example, to export a GET API:
 
 ```ts
 export const get = async () => {
   return {
     name: 'Modern.js',
-    desc: 'Web engineering system',
+    desc: 'A modern web engineering solution',
   };
 };
 ```
 
-Following the example below, a `POST` interface can be exported.
+The following example exports a `POST` API:
 
 ```ts
 export const post = async () => {
   return {
     name: 'Modern.js',
-    desc: 'Web engineering system',
+    desc: 'A modern web engineering solution',
   };
 };
 ```
 
-- Modern.js supports 9 definitions for HTTP Method: `GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTIONS`、`HEAD`, can be exported using these methods as functions.
+- Modern.js supports 9 HTTP methods: `GET`, `POST`, `PUT`, `DELETE`, `CONNECT`, `TRACE`, `PATCH`, `OPTIONS`, and `HEAD`, which can be used as function export names.
 
-- The name is size insensitive, if `GET`, can write `get`、`Get`、`GEt`、`GET`, can be accurately identified. But default export as `export default xxx` will be map to `Get`.
+- Names are case-insensitive. If the method is `GET`, it can be written as `get`, `Get`, `GEt`, or `GET`, and the default export, i.e., `export default xxx`, will be mapped to `Get`.
 
-- Multiple functions of different Methods can be defined in one file, but if multiple functions of the same Method are defined, only the first will take effect.
+#### Using Async Functions
 
-:::info
-It should be noted that the defined functions should all be asynchronous, which is related to the type when the function is called, which will be mentioned later.
+Modern.js recommends defining BFF functions as async functions, even if there is no asynchronous process in the function, for example:
 
-:::
+```ts
+export const get = async () => {
+  return {
+    name: 'Modern.js',
+    desc: 'A modern web engineering solution',
+  };
+};
+```
 
-### Function Parameter Rule
+This is because, during frontend invocation, the BFF function will be automatically converted into an HTTP API call, and HTTP API calls are asynchronous. On the frontend, it is typically used like this:
 
-As mentioned above, in order to meet the design criteria of RESTful APIs, the BFF function in Modern.js needs to follow certain imported parameter rules.
+```tsx title="src/routes/page.tsx"
+import { useState, useEffect } from 'react';
+import { get as hello } from '@api/hello';
 
-The function parameters are divided into two parts, the dynamic part in the request path and the request option `RequestOption`.
+export default () => {
+  const [text, setText] = useState('');
+
+  useEffect(() => {
+    hello().then(setText);
+  }, []);
+  return <div>{text}</div>;
+};
+```
+
+Therefore, to keep the type definitions consistent with the actual invocation experience, we recommend defining BFF functions as async functions.
+
+### Function Parameter Rules
+
+Function parameter rules are divided into two parts: dynamic routes in the request path (`Dynamic Path`) and request options (`RequestOption`).
 
 #### Dynamic Path
 
-Dynamic routing will be used as imported parameters in the first part of the function, and each imported parameter corresponds to a dynamic route. For example, in the following example, uid will be passed into the function as the first two parameters:
+Dynamic routes will be the first part of the BFF function parameters, with each parameter corresponding to a segment of the dynamic route. For example, the `level` and `id` parameters will be passed to the function in the following example:
 
-```ts title="api/[level]/[id].ts"
+```ts title="api/lambda/[level]/[id].ts"
 export default async (level: number, id: number) => {
   const userData = await queryUser(level, uid);
   return userData;
 };
 ```
 
-Pass dynamic parameters directly when calling:
+Invoke the function by directly passing in the dynamic parameters:
 
-```ts title="App.tsx"
+```tsx title="src/routes/page.tsx"
 import { useState, useEffect } from 'react';
 import { get as getUser } from '@api/[level]/[id]';
 
@@ -177,24 +186,41 @@ export default () => {
 
 #### RequestOption
 
-The parameter after Dynamic Path is the object `RequestOption` containing querystring and request body, which is used to define the types of `data` and `query`.
+Parameters following the dynamic path are an object called `RequestOption`, which includes the query string and request body. This field is used to define the types for `data` and `query`.
 
-In normal functions without dynamic routing, the incoming `data` and `query` can be obtained from the first imported parameter, for example:
+In a standard function without dynamic routes, `RequestOption` can be obtained from the first parameter, for example:
 
-```ts title="api/hello.ts"
+```ts title="api/lambda/hello.ts"
 import type { RequestOption } from '@modern-js/runtime/server';
 
 export async function post({
   query,
   data,
 }: RequestOption<Record<string, string>, Record<string, string>>) {
-  // do somethings
+  // do something
 }
 ```
 
-When a function file uses dynamic routing rules, dynamic routing before the `RequestOption` parameter.
+Custom types can also be used here:
+
+```ts title="api/lambda/hello.ts"
+import type { RequestOption } from '@modern-js/runtime/server';
+
+type IQuery = {
+  // some types
+};
+type IData = {
+  // some types
+};
 
-```ts title="api/[sku]/[id]/item.ts"
+export async function post({ query, data }: { query: IQuery; data: IData }) {
+  // do something
+}
+```
+
+When the function file uses dynamic routing, dynamic routes will precede the `RequestOption` object parameter.
+
+```ts title="api/lambda/[sku]/[id]/item.ts"
 export async function post(
   sku: string,
   id: string,
@@ -207,9 +233,9 @@ export async function post(
 }
 ```
 
-Also pass in the parameters according to the function definition:
+Pass the corresponding parameters when invoking the function according to its definition:
 
-```ts title="App.tsx"
+```ts title="src/routes/page.tsx"
 import { post } from '@api/[sku]/[id]/item';
 
 export default () => {
@@ -228,6 +254,8 @@ export default () => {
 };
 ```
 
-As mentioned earlier, the defined functions should be asynchronous because they are automatically converted to HTTP interface calls when called by the front end.
+## Extend BFF Function
+
+import ExtendBFF from "@site-docs-en/components/extend-bff-function"
 
-so in order to keep the type definition consistent with the actual calling, it is necessary to set the BFF function to asynchronous when defining it.
+<ExtendBFF/>

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

@@ -1,81 +1,70 @@
----
-sidebar_position: 4
-title: Custom request SDK
----
-# Custom request SDK
+# Extend Request SDK
 
-Modernjs's BFF is isomorphic in CSR and SSR.In the browser side rely on the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)，On the server relies on the [node-fetch](https://www.npmjs.com/package/node-fetch).However, in many business scenarios we need to do some additional processing of the request or response, for example:
+The unified invocation of BFF functions is isomorphic in both CSR and SSR. The request SDK encapsulated by Modern.js relies on the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) on the browser side, and on [node-fetch](https://www.npmjs.com/package/node-fetch) on the server side. However, in actual business scenarios, additional processing may be required for requests or responses, such as:
 
-- Write auth information in the request header
-- Uniform processing of response data or errors
-- The browser's native fetch function is not available for a particular platform, and other methods of sending requests are required
+- Writing authentication information in the request headers
+- Uniform handling of response data or errors
+- Using other methods to send requests when the native fetch function is unavailable on specific platforms
 
-For the above scenario, Modern.js provides the `configure` function，the customization capabilities range from low to high and can be used to configure ssr pass-through request headers, interceptors, and request SDKs..
-
-:::caution
-The `configure` function call needs to be called before all BFF requests are sent, to ensure that the default request configuration is overridden.
+To address these scenarios, Modern.js provides the `configure` function, which offers a series of extension capabilities. You can use it to configure SSR passthrough request headers, add interceptors, or customize the request SDK.
 
+:::caution Note
+The `configure` function needs to be called before all BFF requests are sent to ensure that the default request configuration is overridden.
 :::
 
-
-```ts title="App.tsx"
+```tsx title="routes/page.tsx"
 import { configure } from '@modern-js/runtime/bff';
 
 configure({
-  request: customRequest
+  // ...
 })
-```
 
-## Configure ssr pass-through request headers
+const Index = () => <div>Hello world</div>
+export default Index;
+```
 
-In scenarios where both Modern.js SSR and BFF are used, it is often necessary to pass some request headers on SSR page requests to the BFF service.
+## Configuring SSR Passthrough Request Headers
 
-For example, the project has a page address `https://website.com`, which is an SSR page, and the API interface `https://website.com/api/info` will be called in the component, which requires the user's cookie information for authentication. When the page requests this API interface, it needs to pass the `cookie` requested by the SSR page to BFF.
+When using both Modern.js SSR and BFF, it is often necessary to pass some request header information from the SSR page request to the BFF service.
 
-Currently the following request headers are automatically passed through in Modern.js:
+For example, imagine a project with a page URL `https://website.com`. This page is rendered using SSR, and in the component, it will call the API endpoint `https://website.com/api/info`, which requires the user's cookie information for authentication. The page needs to pass the `cookie` of the SSR page request to the BFF when requesting this API endpoint.
 
-- cookie
-- x-tt-logid
-- user-agent
-- x-tt-stress
+Currently, the following request headers are automatically passed through in Modern.js:
 
-The request header can be configured via `configure`. For example, in the following example, Modern.js will automatically pass the cookie information of the SSR page request to the BFF service:
+```ts
+['cookie', 'user-agent', 'x-tt-logid', 'x-tt-stress']
+```
 
-```tsx title="App.tsx"
-import { configure } from '@modern-js/runtime/bff';
+You can configure additional request headers using `configure`. For example, in the following snippet, Modern.js will automatically pass the `x-uid` information from the SSR page request to the BFF service:
 
+```tsx
 configure({
   allowedHeaders: ['x-uid']
 })
 ```
 
-## Configuring Interceptors
+## Adding Interceptors
 
-In certain business scenarios, there is a requirement for unified processing of requests and responses, and interceptors can be configured to fulfill these requirements in such scenarios.
+In some business scenarios, you may need to handle requests and responses uniformly. This can be achieved by **configuring interceptors**:
 
-```tsx title="App.tsx"
+```tsx
 configure({
-  // The request here is the default request sdk for bff, and the interceptor function needs to return a new request.
-  // The return value of the new request must be the result of the parse body
-  interceptor(request){
-    return async(url, params) => {
+  // The `request` here is the default request tool for unified invocation. The `interceptor` function needs to return a new request.
+  // The output of the new request must be the parsed body result.
+  interceptor(request) {
+    return async (url, params) => {
       const res = await request(url, params);
       return res.json();
     };
-  };
+  }
 });
 ```
 
-## Configure custom request SDK
-
-If the requirements cannot be met by configuring interceptors alone  and need to further customize the request SDK, you can configure the custom request SDK by using the `configure` function:
-
-:::caution
-Send a request to the BFF service when the server side renders, Modern.js will find the BFF service intranet IP via **service discovery** and send requests via IP to improve performance. This optimization is **lost** if a custom request SDK is used.
+## Customizing the Request SDK
 
-:::
+If configuring interceptors alone cannot meet your needs and you want to customize the request function, you can also configure it using `configure`:
 
-```tsx title="App.tsx"
+```tsx
 import nodeFetch from 'node-fetch';
 
 const customFetch = (input: RequestInfo | URL, init: RequestInit) => {
@@ -92,13 +81,13 @@ configure({
 });
 ```
 
-The configuration custom request SDK has the following conventions:
+There are some conventions when configuring custom request functions:
 
-- The `configure` function allows you to configure a `request` function whose input is the same as the Fetch or node-fetch in the browser, and all BFF functions will send requests through this function
-- The return value of the `request` function must be the actual data returned by the interface, not a Promise, otherwise the BFF function will not return data properly.
-- In the case of SSR projects, `request` must support both browser-side and server-side sending of requests.
+- The function's parameters should align with the Fetch API or node-fetch in the browser. All unified invocations of BFF functions will send requests via this function.
+- The function's output must be the actual data returned by the API, not a Promise, otherwise, the BFF function will not return data correctly.
+- If it's an SSR project, the function must support sending requests on both the browser and server sides.
 
-Example of custom request SDK using axios:
+Below is an example of using axios to customize a request function:
 
 ```tsx title="App.tsx"
 import { configure } from '@modern-js/runtime/bff';
@@ -108,7 +97,7 @@ configure({
   async request(...config: Parameters<typeof fetch>) {
     const [url, params] = config;
     const res = await axios({
-      url: url as string,  // Here, because of some incompatibility between fetch and axios types, you need to use `as`
+      url: url as string,  // Here we need to use `as` because fetch and axios types are somewhat incompatible
       method: params?.method as Method,
       data: params?.body,
       headers: params?.headers as Headers,
@@ -116,4 +105,4 @@ configure({
     return res.data;
   },
 });
-```
+```

package/docs/en/guides/advanced-features/build-performance.mdx

@@ -9,7 +9,7 @@ Modern.js optimizes build performance by default, but as the project becomes lar
 This document provides some optional speed-up strategies, developers can choose some of them to improve the build performance.
 
 :::tip 📢 Notice
-The strategies in [Bundle Size Optimization](/guides/advanced-features/optimize-bundle.html) can also be used to improve build performance, so we won't repeat them here.
+The strategies in [Bundle Size Optimization](/guides/advanced-features/page-performance/optimize-bundle) can also be used to improve build performance, so we won't repeat them here.
 :::
 
 ## General optimization strategy
@@ -118,7 +118,7 @@ export default {
 
 ### Adjust Browserslist for development
 
-This strategy is similar to ["Adjust Browserslist"](/guides/advanced-features/optimize-bundle.html#adjust-browserslist), the difference is that we can set different browserslist for development and production environment, thereby reducing the compilation overhead in the development environment.
+This strategy is similar to ["Adjust Browserslist"](/guides/advanced-features/page-performance/optimize-bundle#adjust-browserslist), the difference is that we can set different browserslist for development and production environment, thereby reducing the compilation overhead in the development environment.
 
 For example, you can add the following config to `package.json`, which means that only the latest browsers are compatible in the development environment, and the actual browsers are compatible in the production environment:
 

package/docs/en/guides/advanced-features/page-performance/_meta.json

@@ -0,0 +1 @@
+["code-split", "inline-assets", "optimize-bundle"]

package/docs/en/guides/basic-features/render/streaming-ssr.mdx

@@ -220,7 +220,7 @@ However, when a crawler visits the page, it might need to load all content and o
 
 Modern.js uses [isbot](https://www.npmjs.com/package/isbot) to determine if a request is from a crawler based on the `user-agent` header.
 
-import StreamSSRPerformance from '@site-docs/components/stream-ssr-performance';
+import StreamSSRPerformance from '@site-docs-en/components/stream-ssr-performance';
 
 <StreamSSRPerformance />
 

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

@@ -587,4 +587,4 @@ Additionally, when using conventional routing, make sure to use the API from `@m
 If you must directly use the React Router package's API (e.g., route behavior wrapped in a unified npm package), you can set [`source.alias`](/configure/app/source/alias) to point `react-router` and `react-router-dom` to the project's dependencies, avoiding the issue of two versions of React Router.
 :::
 
-import Motivation from '@site-docs/components/convention-routing-motivation';
+import Motivation from '@site-docs-en/components/convention-routing-motivation';

package/docs/en/guides/basic-features/static-assets.mdx

@@ -76,7 +76,7 @@ console.log(largeImage); // "/static/largeImage.6c12aba3.png"
 console.log(smallImage); // "data:image/png;base64,iVBORw0KGgo..."
 ```
 
-For a more detailed introduction to asset inlining, please refer to the [Static Asset Inlining](/guides/advanced-features/inline-assets) chapter.
+For a more detailed introduction to asset inlining, please refer to the [Static Asset Inlining](/guides/advanced-features/page-performance/inline-assets) chapter.
 
 ## Output Files
 

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

@@ -2,56 +2,13 @@
 title: lambda/*.[tj]s
 sidebar_position: 3
 ---
-# lambda/*.[tj]s
-
-在 [BFF 框架写法](/guides/advanced-features/bff/type.html#框架写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/lambda#白名单)外，`lambda/` 目录下的文件会被注册为接口的路由。
-
-:::info
-使用 `api` 目录需要开启 BFF 功能，需要在项目下执行 new 命令启用「BFF」功能。
 
-:::
+# lambda/*.[tj]s
 
-:::tip
-该文件支持使用 `js` 或 `ts` 语言，但必须使用 `esm` 语法导出函数。
+开启 BFF 后，`lambda/` 目录下的文件会按照约定被注册为 BFF 的路由。
 
+:::note
+文件支持使用 `js` 或 `ts` 语言，但必须使用 `esm` 语法导出函数。
 :::
 
-## 路由规则
-
-### 默认路由
-
-路由系统会将以 `index` 命名的文件会被映射到上一层目录。
-
-- `api/lambda/index.ts` -> `$BASENAME/`
-- `api/lambda/user/index.ts` -> `$BASENAME/user`
-
-### 多级路由
-
-路由系统也支持解析多级的文件，如果创建文件夹结构，文件仍会以相同方式自动解析路由。
-
-- `api/lambda/hello.ts` -> `$BASENAME/hello`
-- `api/lambda/user/list.ts` -> `$BASENAME/user/list`
-
-### 动态路由
-
-路由系统支持通过 `[]` 命名的文件目录生成动态路由。
-
-- `api/lambda/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
-- `api/lambda/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
-- `api/lambda/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
-
-其中的 `$BASENAME` 可以在 `modern.config.js` 中进行配置，默认值为 `/api`。
-
-### 白名单
-
-默认 `lambda` 目录下所有文件都会当作 BFF 函数文件去解析，但同样我们也设置了白名单，这些文件不被被解析：
-
-- 命名以 `_` 开头的文件。例如：`_utils.ts`。
-- 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
-- 测试文件。例如：`foo.test.ts`。
-- TypeScript 类型文件。例如：`hello.d.ts`。
-- `node_module` 下的文件。
-
-## 函数定义
-
-和函数写法下[函数定义](/apis/app/hooks/api/api#函数定义)完全一致。
+详细内容可以参考 [BFF 函数路由](/guides/advanced-features/bff/function.html#函数路由)。

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

@@ -0,0 +1,11 @@
+---
+title: _app.[tj]s
+sidebar_position: 2
+---
+# _app.[tj]s
+
+该文件可以为 BFF 函数添加前置中间件，详细内容参考 [扩展 BFF Server](/guides/advanced-features/bff/extend-server)。
+
+:::note
+具体示例请参考 [hook](/apis/app/runtime/bff/hook)。
+:::

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

@@ -1,5 +1,22 @@
-1. 执行 `pnpm new`，选择启用 BFF
-2. 根据选择的运行时框架，将下面的代码添加到 `modern.config.[tj]s` 中：
+import { PackageManagerTabs } from '@theme';
+
+1. 执行 `new` 命令：
+
+<PackageManagerTabs command="run new" />
+
+2. 按照提示，选择**启用 BFF 功能**：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「BFF」功能
+? 请选择 BFF 类型 框架模式
+```
+
+:::note
+目前推荐使用框架模式创建 BFF，后续我们将会移除 BFF 类型的概念。
+:::
+
+3. 根据选择的运行时框架，将下面的代码添加到 `modern.config.[tj]s` 中：
 
 import { Tabs, Tab as TabItem } from "@theme";
 

package/docs/zh/components/extend-bff-function.mdx

@@ -0,0 +1,5 @@
+普通的 BFF 函数写法有时并不能满足需求，我们正在设计一套更强大的 BFF 函数写法，让开发者更方便地扩展 BFF 函数。
+
+:::note
+敬请期待
+:::

package/docs/zh/configure/app/auto-load-plugin.mdx

@@ -9,6 +9,10 @@ sidebar_position: 22
 
 用于配置 Modern.js 是否开启自动注册插件。
 
+:::warning
+该配置不推荐使用，相比手动注册插件，该配置相对黑盒且无法为插件添加自定义配置。
+:::
+
 ### 手动注册插件
 
 默认情况下，安装插件后，你需要在 `modern.config.ts` 文件中手动注册插件。