npm - @modern-js/main-doc - Versions diffs - 2.51.0 → 2.52.0 - Mend

@modern-js/main-doc 2.51.0 → 2.52.0

Files changed (9) hide show

package/docs/en/apis/app/runtime/web-server/unstable_middleware.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ UnstableMiddleware will replace [Middleware](/apis/app/runtime/web-server/middle
 ```ts title="server/index.ts"
 import { UnstableMiddleware } from '@modern-js/runtime/server';
-export const unstableMiddlewares: UnstableMiddleware[] = [];
+export const unstableMiddleware: UnstableMiddleware[] = [];
 ```
 ## Types
@@ -74,7 +74,7 @@ const time: UnstableMiddleware = async (c, next) => {
   console.log(`${end - start}`);
 };
-export const unstableMiddlewares: UnstableMiddleware = [time];
+export const unstableMiddleware: UnstableMiddleware[] = [time];
 ```
 ### Injecting Server Data for DataLoader Consumption
@@ -101,7 +101,7 @@ const setPayload: UnstableMiddleware = async (
   await next();
 };
-export const unstableMiddlewares: UnstableMiddleware = [setPayload];
+export const unstableMiddleware: UnstableMiddleware[] = [setPayload];
 ```
 ```ts title="src/routes/page.data.ts"
@@ -130,5 +130,31 @@ const auth: UnstableMiddleware = async (c, next) => {
   await next();
 };
-export const unstableMiddlewares: UnstableMiddleware = [auth];
+export const unstableMiddleware: UnstableMiddleware[] = [auth];
+```
+### Modify Response
+```ts
+import { UnstableMiddleware } from '@modern-js/runtime/server';
+const modifier: UnstableMiddleware = async (c, next) => {
+  await next();
+  const { response } = c;
+  const text = await response.text();
+  const newText = text.replace('<html>', `<html lang="${language}">`);
+  const newheaders = response.headers;
+  newheaders.set('x-custom-value', 'modern');
+  c.response = c.body(newText, {
+    status: response.status,
+    headers: newheaders,
+  });
+};
+export const unstableMiddleware: UnstableMiddleware[] = [modifier];
 ```

package/docs/en/guides/advanced-features/web-server.mdx CHANGED Viewed

@@ -90,7 +90,9 @@ Modern.js provides a set of APIs by default for projects to use:
 import { Middleware } from '@modern-js/runtime/server';
 export const middleware: Middleware = (context, next) => {
-  const { source: { req, res } } = context;
+  const {
+    source: { req, res },
+  } = context;
   console.log(req.url);
   next();
 };
@@ -108,7 +110,7 @@ Projects should follow these best practices when using Middleware:
 **In general, in CSR projects, using Hook can basically meet all the needs of simple scenarios. In SSR projects, Middleware can be used for more complex Node extensions.**
-### UnstableMiddleware
+### Unstable Middleware
 Modern.js will provide new Middleware to add pre-processing middleware to the Web Server, supporting the execution of custom logic before and after handling the page.

package/docs/en/guides/basic-features/data/data-fetch.mdx CHANGED Viewed

@@ -155,6 +155,8 @@ function loader() {
 ### Error Handling
+#### Basic Usage
 In the `loader` function, errors can be handled by throwing an `error` or a `response`. When an error is thrown in the `loader` function, Modern.js will stop executing the code in the current `loader` and switch the front-end UI to the defined [`ErrorBoundary`](/guides/basic-features/routes#error-handling) component:
 ```tsx
@@ -182,6 +184,32 @@ const ErrorBoundary = () => {
 export default ErrorBoundary;
 ```
+#### Practice
+In an SSR project you can control the status code of a page and display the corresponding UI by `throw response` in the data loader, as in the following example, where there is one loader for the entire routing route
+For example, if there is a loader in the entire routing route that throws a response, the status code of the page will be consistent with this `response` and the UI of the page will switch to `ErrorBoundary`.
+```ts
+// routes/user/profile/page.data.ts
+export async function loader() {
+  const user = await fetchUser();
+  if(!user){
+    throw new Response('The user was not found', { status: 404 });
+  }
+  return user;
+}
+// routes/error.tsx
+import { useRouteError } from '@modern-js/runtime/router';
+const ErrorBoundary = () => {
+  const error = useRouteError() as { data: string };
+  return <div className="error">{error.data}</div>;
+};
+export default ErrorBoundary;
+```
 ### Get data from parent component
 In many cases, child components need to access data in the parent component `loader`. You can easily get the data from the parent component using `useRouteLoaderData`:

package/docs/en/guides/basic-features/deploy.mdx CHANGED Viewed

@@ -2,18 +2,20 @@
 sidebar_position: 15
 ---
-# Deploy
+# Deploy Application
-Currently, Modern.js can run in the node.js environment, you can host it yourself. At the same time, Modern.js officially supports deployment on the Netlify platform.
+Currently, Modern.js offers two deployment way:
+- You can host your application in a container that includes a Node.js environment on your own, which provides flexibility for the deployment of the application.
+- You can also deploy your application through a platform. Currently, Modern.js supports the [Netlify](https://www.netlify.com/) and [Vercel](https://vercel.com/).
 :::info
-Currently Modern.js only supports running in node.js environments, support for other runtime environments will be provided in a later version.
+Currently, Modern.js only supports running in a Node.js environment. Support for more runtime environments will be provided in the future.
 :::
-## Commands to build products
+## Build Deployment Products
-Running the `modern deploy` command will automatically build the output file for the production environment. This process includes optimizing the output file and its dependencies, and detecting the current deployment platform and automatically generating a product that will run on that platform.
+Running the `modern deploy` command will automatically produce deployment products. This process includes optimizing Bundler build products and their dependencies, detecting the current deployment platform, and automatically generating deployment products that can run on that platform.
 If you want to generate and test the output locally for a specific deployment platform, you can specify the platform by setting the environment variable: `modern deploy`:
@@ -33,11 +35,12 @@ When deploying on the deployment platforms officially supported by Modern.js, th
 By default, Modern.js outputs builds that can be run in a Node.js environment when no Modern.js-supported deployment platform is detected.
 Use the following command to build the project:
 ```bash
 npx modern deploy
 ```
-When running the `modern deploy` command, Modern.js will generate runnable products and output the following content:
+When running the `modern deploy` command, Modern.js will generate runnable products and output the following content in terminal:
 ```bash
 Static directory: `.output/static`
@@ -56,35 +59,35 @@ PORT=3000 node .output/index
 ### Monorepo
-For the Monorepo project, in addition to building our current project, we also need to build other repositories that the current project depends on.
+For Monorepo projects, in addition to building the current project, it is also necessary to build other sub-projects in the repository that the current project depends on.
-We assume that the name in the `package.json` of the current project is `app`. Taking pnpm as an example of a monorepo management tool, you can add the following command to the `package.json` of the current project to build products for the current project:
+Assume that the name in the `package.json` of the current project is `app`. Taking pnpm as an example of a monorepo management tool, you can add the following command to the `package.json` of the current project to build products for the current project:
 ```json title="app/package.json"
 {
   "scripts": {
-    "deploy": "modern deploy",
-    "deploy:app": "pnpm --filter 'app^...' run build && pnpm --filter=app run deploy",
+    "build:packages": "pnpm --filter 'app^...' run build",
+    "deploy": "pnpm run build:packages && modern deploy",
   }
 }
 ```
-If you use rush to manage repositories, you can add the following command in `package.json`:
+If you use Rush as your Monorepo management tool, you can add the following commands to your `package.json`:
 ```json
 {
   "scripts": {
-    "deploy": "modern deploy",
-    "deploy:app": "rush rebuild --to-except app && rushx deploy",
+    "build:packages": "rush rebuild --to-except app",
+    "deploy": "rushx build:packages && modern deploy",
   }
 }
 ```
-After the build is completed, Modern.js will generate all dependencies in the `.output/node_modules` directory of the project. Similarly, you can run the entire server using `node .output/index`.
+After the build is completed, Modern.js will generate all dependencies in the `.output/node_modules` directory of the project. Similarly, you can run the Modern.js server using `node .output/index`.
 ## Netlify
-Netlify is a popular web development platform designed for building, deploying, and maintaining modern web projects. Deploying on Netlify mainly requires configuring the `netlify.toml` file.
+Netlify is a popular Web development platform designed for building, deploying, and maintaining modern web projects. Deploying on Netlify mainly requires configuring the `netlify.toml` file.
 Depending on the complexity of your project, you can configure it incrementally by this doc.
@@ -93,31 +96,31 @@ Depending on the complexity of your project, you can configure it incrementally
 Add the `netlify.toml` file to the root directory of the current project:
 ```bash
-./
-├── src/
+.
+├── src
 ├── modern.config.ts
 ├── netlify.toml
-├── package.json
+└── package.json
 ```
 Add the following content to `netlify.toml`:
 ```toml
 [build]
   publish = "dist"
-  command = "npm run deploy"
+  command = "modern deploy"
 ```
-Add a project to the Netlify platform and deploy it!
+Now, add a project to the Netlify platform and deploy it!
 ### Full Stack Project
-Full-stack projects refer to projects that use custom servers, SSR, and BFF. These projects need to be deployed on Netlify Functions. Based on the `netlify.toml` file mentioned above,
-add the following configuration:
+Full-stack projects refer to projects that use Custom Web Server, SSR or BFF. These projects need to be deployed on **Netlify Functions**. Based on the `netlify.toml` file mentioned above, add the following configuration:
 ```toml title="netlify.toml"
 [build]
   publish = "dist"
-  command = "npm run deploy"
+  command = "modern deploy"
 [functions]
   directory = ".netlify/functions"
@@ -133,31 +136,40 @@ Currently, Modern.js does not support deployment on Netlify Edge Functions. We w
 ### Monorepo
-For Monorepo projects, in addition to building our current project, we also need to build the dependencies of the current project from other repositories.
-We take a pnpm monorepo repository as an example and deploy the Monorepo project on Netlify.
+:::info
+The following guide is mainly for full-stack projects, for pure CSR projects, just follow [Pure Frontend Project](#Pure Frontend Project) to deploy.
+:::
+For Monorepo projects, in addition to building our current project, you also need to build other sub-projects in the repository that the current project depends on.
-Suppose we have the following Monorepo repository:
+We take a pnpm Monorepo repository as an example and deploy the Monorepo project on Netlify.
+Assuming the directory structure of the Monorepo repository is as follows:
 ```
-./
-├── packages/
-│   ├── app/
+.
+├── packages
+│   ├── app
 │   └── app-dep1
 ├── package.json
 ├── pnpm-lock.yaml
 └── pnpm-workspace.yaml
 ```
-We need to configure Base directory on the netlify platform as `packages/app`:
+You need to configure Base directory on the netlify platform as `packages/app`:
 <img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/netlify-monorepo-basedir.png?x-resource-account=public" />
 Add the following script in `packages/app/package.json`, before executing the deployment command of the `app` repository, first execute the build of other repositories in the workspace:
 ```json
-"scripts": {
-  "deploy:app": "pnpm --filter 'app^...' run build && pnpm --filter=app run deploy",
+{
+  "scripts": {
+    "build:packages": "pnpm --filter 'app^...' run build",
+    "deploy": "pnpm run build:packages && modern deploy",
+  }
 }
 ```
 Configure the build command in `netlify.toml`:
@@ -165,7 +177,7 @@ Configure the build command in `netlify.toml`:
 ```toml
 [build]
   publish = "dist"
-  command = "npm run deploy:app"
+  command = "npm run deploy"
 [functions]
   directory = ".netlify/functions"
@@ -174,3 +186,101 @@ Configure the build command in `netlify.toml`:
 ```
 Just submit your code and deploy it using the Netlify platform.
+## Vercel
+Vercel is a deployment platform for modern web applications that provides a rich set of features to support deploying static websites, server-side rendered applications, and more. To deploy on Vercel, you usually need to configure the `vercel.json` file, which you can configure incrementally depending on the complexity of your project.
+### Pure Front-end Project
+Add the `vercel.json` file to the root directory of the current project:
+```bash
+./
+├── src
+├── modern.config.ts
+├── vercel.json
+└── package.json
+```
+Add the following content to `vercel.json`:
+```json title="vercel.json"
+{
+  "buildCommand": "modern deploy",
+  "outputDirectory": ".vercel/output"
+}
+```
+Commit your project to git, select Framework Preset as `Other` on the Vercel platform and deploy.
+<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-framework-preset.png" />
+### Full Stack Project
+Full-stack projects refer to projects that use Custom Web Server, SSR or BFF. These projects need to be deployed on **Vercel Functions**.
+In addition to configuring `vercel.json` in the same way as a [pure front-end project](#pure-front-end-project), there are two points to note for full-stack projects:
+1. Currently, Modern.js does not support deploying BFF projects on the Vercel platform. We will support it in future versions.
+2. When deploying on Vercel platform, the default node runtime is `20.x`, it is recommended to choose `18.x` when deploying full-stack projects,
+see [Serverless Function contains invalid runtime error](https://vercel.com/guides/serverless-function-contains-invalid-runtime-error), you can modify `package.json` to specify the version:
+```json title="package.json"
+"engines": {
+  "node": "18.x"
+}
+```
+### Monorepo
+:::info
+The following guide is mainly for full-stack projects, for pure CSR projects, just follow [Pure Frontend Project](#pure-front-end-project-1) to deploy.
+:::
+For Monorepo projects, in addition to building our current project, you also need to build other sub-projects in the repository that the current project depends on.
+We take a pnpm Monorepo repository as an example and deploy the Monorepo project on Vercel.
+Assuming the directory structure of the Monorepo repository is as follows:
+```
+.
+├── packages
+│   ├── app
+│   └── app-dep1
+├── package.json
+├── pnpm-lock.yaml
+└── pnpm-workspace.yaml
+```
+First, you need to configure the **Root Directory** as `packages/app` on the Vercel platform:
+<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-root-directory.png" />
+Specify Node.js runtime as `18.x`:
+```json title="package.json"
+"engines": {
+  "node": "18.x"
+}
+````
+Add the following script to `packages/app/package.json` to run `build` command of the other repositories in the workspace before run the `deploy` command for the `app` repository:
+```json
+{
+  "scripts": {
+    "build:packages": "pnpm --filter 'app^...' run build",
+    "deploy": "pnpm run build:packages && modern deploy",
+  }
+}
+```
+Add the following content to the `packages/app/vercel.json` file:
+```json title="vercel.json"
+{
+  "buildCommand": "npm run deploy",
+  "outputDirectory": ".vercel/output"
+}
+```
+Just submit your code and deploy it using the Vercel platform.

package/docs/zh/apis/app/runtime/web-server/unstable_middleware.mdx CHANGED Viewed

@@ -11,7 +11,7 @@ title: Unstable Middleware
 ```ts title="server/index.ts"
 import { UnstableMiddleware } from '@modern-js/runtime/server';
-export const unstableMiddlewares: UnstableMiddleware = [];
+export const unstableMiddleware: UnstableMiddleware[] = [];
 ```
 ## 类型
@@ -73,7 +73,7 @@ const time: UnstableMiddleware = async (c, next) => {
   console.log(`${end - start}`);
 };
-export const unstableMiddlewares: UnstableMiddleware = [time];
+export const unstableMiddleware: UnstableMiddleware[] = [time];
 ```
 ### 注入服务端数据，供页面 dataLoader 消费
@@ -100,7 +100,7 @@ const setPayload: UnstableMiddleware = async (
   await next();
 };
-export const unstableMiddlewares: UnstableMiddleware = [setPayload];
+export const unstableMiddleware: UnstableMiddleware[] = [setPayload];
 ```
 ```ts title="src/routes/page.data.ts"
@@ -129,5 +129,31 @@ const auth: UnstableMiddleware = async (c, next) => {
   await next();
 };
-export const unstableMiddlewares: UnstableMiddleware = [auth];
+export const unstableMiddleware: UnstableMiddleware[] = [auth];
+```
+### 修改响应体
+```ts
+import { UnstableMiddleware } from '@modern-js/runtime/server';
+const modifier: UnstableMiddleware = async (c, next) => {
+  await next();
+  const { response } = c;
+  const text = await response.text();
+  const newText = text.replace('<html>', `<html lang="${language}">`);
+  const newheaders = response.headers;
+  newheaders.set('x-custom-value', 'modern');
+  c.response = c.body(newText, {
+    status: response.status,
+    headers: newheaders,
+  });
+};
+export const unstableMiddleware: UnstableMiddleware[] = [modifier];
 ```

package/docs/zh/guides/advanced-features/web-server.mdx CHANGED Viewed

@@ -108,7 +108,7 @@ export const middleware: Middleware = (context, next) => {
 **总的来说，CSR 项目中，使用 Hook 基本能满足简单场景的所有需求。SSR 项目中，可以使用 Middleware 做更复杂的 Node 扩展。**
-### UnstableMiddleware
+### Unstable Middleware
 Modern.js 将提供新 Middleware 为 Web Server 添加前置中间件，支持在处理页面的前后执行自定义逻辑。

package/docs/zh/guides/basic-features/data/data-fetch.mdx CHANGED Viewed

@@ -155,6 +155,8 @@ export async function loader() {
 ### 错误处理
+#### 基本用法
 在 `loader` 函数中，可以通过 `throw error` 或者 `throw response` 的方式处理错误，当 `loader` 函数中有错误被抛出时，Modern.js 会停止执行当前 `loader` 中的代码，并将前端 UI 切换到定义的 [`ErrorBoundary`](/guides/basic-features/routes#错误处理) 组件：
 ```tsx
@@ -182,6 +184,31 @@ const ErrorBoundary = () => {
 export default ErrorBoundary;
 ```
+#### 实践
+在 SSR 项目中你可以通过在 data loader 中 `throw response` 的方式，控制页面的状态码，展示对应的 UI，如以下示例，整条路由路线中有一个 loader
+throw response，页面的状态码将与这个 `response` 保持一致，页面的 UI 也会切换为 `ErrorBoundary`:
+```ts
+// routes/user/profile/page.data.ts
+export async function loader() {
+  const user = await fetchUser();
+  if(!user){
+    throw new Response('The user was not found', { status: 404 });
+  }
+  return user;
+}
+// routes/error.tsx
+import { useRouteError } from '@modern-js/runtime/router';
+const ErrorBoundary = () => {
+  const error = useRouteError() as { data: string };
+  return <div className="error">{error.data}</div>;
+};
+export default ErrorBoundary;
+```
 ### 获取上层组件的数据
 很多场景下，子组件需要获取到祖先组件 `loader` 中的数据，你可以通过 `useRouteLoaderData` 方便地获取到祖先组件的数据：
@@ -385,8 +412,6 @@ export const loader = () => {}
 ```
 ### 错误用法
 1. `loader` 中只能返回可序列化的数据，在 SSR 环境下，`loader` 函数的返回值会被序列化为 JSON 字符串，然后在客户端被反序列化为对象。因此，`loader` 函数中不能返回不可序列化的数据（如函数）。

package/docs/zh/guides/basic-features/deploy.mdx CHANGED Viewed

@@ -2,18 +2,21 @@
 sidebar_position: 15
 ---
-# 部署
+# 部署应用
-目前 Modern.js 支持在 node.js 环境下运行，你可以自行托管，同时，Modern.js 官方支持在 Netlify 平台上部署。
+目前，Modern.js 提供了两种部署方式：
+- 你可以将应用自行托管在包含 Node.js 环境的容器中，这为应用提供了部署的灵活性。
+- 你也可以通过平台部署应用，目前 Modern.js 官方支持了 [Netlify](https://www.netlify.com/) 和 [Vercel](https://vercel.com/) 平台。
 :::info
-当前仅支持在 node.js 环境运行，对其他运行时环境的支持将在后续版本中提供。
+目前 Modern.js 仅支持在 Node.js 环境中运行，未来将提供更多运行时环境的支持。
 :::
-## 构建产物的命令
+## 构建部署产物
-执行 `modern deploy` 命令将自动构建适用于生产环境的输出文件。此过程包括优化输出文件及其依赖，并检测当前部署平台，自动生成可以在该平台运行的产物。
+执行 `modern deploy` 命令将自动输出部署产物。此过程包括优化 Bundler 构建产物及产物依赖，检测当前部署平台，并自动生成可以在该平台运行的产物。
 如果你希望在本地生成并测试特定部署平台的产物，可以通过设置环境变量来指定平台:
 ```bash
@@ -29,24 +32,26 @@ MODERNJS_DEPLOY=netlify npx modern deploy
 ### 单仓库项目
-默认情况下，当未检测到 Modern.js 支持的部署平台时，Modern.js 会输出可以在 Node.js 环境下运行的构建产物。
+默认情况下，如果未检测到 Modern.js 支持的部署平台，Modern.js 将生成可以在 Node.js 环境下运行的部署产物。
+你可以使用以下命令构建项目：
-使用以下命令构建项目：
 ```bash
 npx modern deploy
 ```
-当执行 `modern deploy` 命令时，Modern.js 会产出可运行的生产环境产物，并输出以下内容：
+当执行 `modern deploy` 命令时，Modern.js 将生成可执行的部署产物，并在控制台输出以下内容：
 ```bash
 Static directory: `.output/static`
 You can preview this build by `node .output/index`
 ```
-此时，你可以通过 `node .output/index` 运行整个 server，在 `.output/static` 目录下是页面所需的静态资源，你可以将这些静态资源自行上传至 CDN。
+现在，你可以通过执行 `node .output/index` 命令来运行服务器。在 `.output/static` 目录中，存放了页面运行所需的静态资源，你可以选择将这些资源上传到 CDN 以提高访问速度。
 :::info
-默认情况下，运行 Modern.js Server 时会监听 8080 端口，如果你想修改监听的端口，可以指定 `PORT` 环境变量：
+默认情况下，运行 Modern.js 服务器时会监听 8080 端口，如果你想修改监听的端口，可以指定 `PORT` 环境变量：
 ```
 PORT=3000 node .output/index
 ```
@@ -55,36 +60,35 @@ PORT=3000 node .output/index
 ### Monorepo
-对于 Monorepo 项目，除了需要构建我们当前的项目外，还需要构建当前项目的依赖的其他仓库。
+对于 Monorepo 项目，除了需要构建当前的项目外，还需要构建当前项目依赖的仓库中其他子项目。
-假设当前项目的 `package.json` 中的 name 为 `app`，以 pnpm 作为 monorepo 管理工具为例，你可以在当前项目的 `package.json` 添加以下命令用于构建当前项目的产物：
+假设当前项目的 `package.json` 中的 name 为 `app`，以 pnpm 作为 Monorepo 管理工具为例，你可以在项目 `package.json` 中添加以下命令用于构建：
 ```json title="app/package.json"
 {
   "scripts": {
-    "deploy": "modern deploy",
-    "deploy:app": "pnpm --filter 'app^...' run build && pnpm --filter=app run deploy",
+    "build:packages": "pnpm --filter 'app^...' run build",
+    "deploy": "pnpm run build:packages && modern deploy",
   }
 }
 ```
-如果你使用 rush 管理仓库，可以在 `package.json` 中添加以下命令：
+如果你使用 rush 作为 Monorepo 管理工具，可以在 `package.json` 中添加以下命令：
 ```json
 {
   "scripts": {
-    "deploy": "modern deploy",
-    "deploy:app": "rush rebuild --to-except app && rushx deploy",
+    "build:packages": "rush rebuild --to-except app",
+    "deploy": "rushx build:packages && modern deploy",
   }
 }
 ```
-当构建完成后，Modern.js 会将项目中所有的依赖生成在 `.output/node_modules` 目录下。同样的，你可以使用 `node .output/index` 运行整个 Server。
+构建完成后，框架会将项目中所有的依赖生成在 `.output/node_modules` 目录下。你同样可以使用 `node .output/index` 运行 Modern.js 服务器。
 ## Netlify
-Netlify 是一个流行的 web 开发平台，专为构建、发布和维护现代 web 项目而设计，在 Netlify 上部署，主要需要配置 `netlify.toml` 文件，
-根据你的项目复杂度，可以渐进配置。
+Netlify 是一个流行的 Web 开发平台，专为构建、发布和维护现代 Web 项目而设计。在 Netlify 上部署，通常需要配置 `netlify.toml` 文件，你可以根据项目复杂度，渐进地配置该文件。
 ### 纯前端项目
@@ -92,30 +96,29 @@ Netlify 是一个流行的 web 开发平台，专为构建、发布和维护现
 ```bash
 ./
-├── src/
+├── src
 ├── modern.config.ts
 ├── netlify.toml
-├── package.json
+└── package.json
 ```
 在 `netlify.toml` 中添加以下内容：
 ```toml
 [build]
   publish = "dist"
-  command = "npm run deploy"
+  command = "modern deploy"
 ```
 在 Netlify 平台上添加项目，部署即可。
 ### 全栈项目
-全栈项目是指使用了 自定义 Server，SSR，BFF 的项目，这些项目需要部署在 Netlify Functions 上。基于上述的 `netlify.toml` 文件，
-添加以下配置：
+全栈项目是指使用了自定义 Web Server、SSR、BFF 的项目，这些项目需要部署在 **Netlify Functions** 上。你需要基于上述的 `netlify.toml` 文件，添加以下配置：
 ```toml title="netlify.toml"
 [build]
   publish = "dist"
-  command = "npm run deploy"
+  command = "modern deploy"
 [functions]
   directory = ".netlify/functions"
@@ -131,30 +134,36 @@ Netlify 是一个流行的 web 开发平台，专为构建、发布和维护现
 ### Monorepo 项目
-对于 Monorepo 项目，除了需要构建我们当前的项目外，还需要构建当前项目的依赖的其他仓库。我们以一个 pnpm monorepo 仓库为例，
-在 Netlify 上对 Monorepo 项目进行部署。
+:::info
+以下指南主要针对于全栈项目，对于纯 CSR 的项目，只需要按照[纯前端项目](#纯前端项目)部署即可。
+:::
+对于 Monorepo 项目，除了需要构建当前的项目外，还需要构建当前项目依赖的仓库中其他子项目。这里以一个 pnpm Monorepo 仓库为例，在 Netlify 上对 Monorepo 项目进行部署。
-假设我们有以下 Monorepo 仓库：
+假设 Monorepo 仓库目录结构如下：
 ```
-./
-├── packages/
-│   ├── app/
+.
+├── packages
+│   ├── app
 │   └── app-dep1
 ├── package.json
 ├── pnpm-lock.yaml
 └── pnpm-workspace.yaml
 ```
-我们需要在 netlify 平台上配置 Base directory 为 `packages/app`:
+你需要在 Netlify 平台上配置 **Base directory** 为 `packages/app`:
 <img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/netlify-monorepo-basedir.png?x-resource-account=public" />
 在 `packages/app/package.json` 中添加以下 script，在执行 `app` 仓库的部署命令之前，先执行 workspace 中其他仓库的构建：
 ```json
-"scripts": {
-  "deploy:app": "pnpm --filter 'app^...' run build && pnpm --filter=app run deploy",
+{
+  "scripts": {
+    "build:packages": "pnpm --filter 'app^...' run build",
+    "deploy": "pnpm run build:packages && modern deploy",
+  }
 }
 ```
@@ -163,7 +172,7 @@ Netlify 是一个流行的 web 开发平台，专为构建、发布和维护现
 ```toml
 [build]
   publish = "dist"
-  command = "npm run deploy:app"
+  command = "npm run deploy"
 [functions]
   directory = ".netlify/functions"
@@ -173,5 +182,100 @@ Netlify 是一个流行的 web 开发平台，专为构建、发布和维护现
 提交你的代码，使用 Netlify 平台部署即可。
+## Vercel
+Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的功能，支持部署静态网站，服务端渲染应用等。在 Vercel 上部署，通常需要配置 `vercel.json` 文件，你可以根据项目复杂度，渐进地配置该文件。
+### 纯前端项目
+在当前项目的根目录添加 `vercel.json` 文件：
+```bash
+./
+├── src
+├── modern.config.ts
+├── vercel.json
+└── package.json
+```
+在 `vercel.json` 中添加以下内容：
+```json title="vercel.json"
+{
+  "buildCommand": "modern deploy",
+  "outputDirectory": ".vercel/output"
+}
+```
+提交你的项目到 git，在 Vercel 平台上选择 Frmeworkwork Preset 为 `Other`，部署即可。
+<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-framework-preset.png" />
+### 全栈项目
+全栈项目是指使用了自定义 Web Server、SSR、BFF 的项目，这些项目需要部署在 **Vercel Functions** 上。
+全栈项目除了按照[纯前端项目](#纯前端项目)的方式配置 `vercel.json` 外，有两点需要注意：
+1. 当前，Modern.js 还不支持在 Vercel 平台上部署 BFF 项目，我们将在后续的版本中支持。
+2. Vercel 平台部署时，默认 node 运行时为 `20.x`，部署全栈项目时建议选择 `18.x`，具体原因详见[Serverless Function contains invalid runtime error](https://vercel.com/guides/serverless-function-contains-invalid-runtime-error)，你可以修改 `package.json` 指定版本：
+```json title="package.json"
+"engines": {
+  "node": "18.x"
+}
+```
+### Monorepo 项目
+:::info
+以下指南主要针对于全栈项目，对于纯 CSR 的项目，只需要按照[纯前端项目](#纯前端项目-1)部署即可。
+:::
+对于 Monorepo 项目，除了需要构建当前的项目外，还需要构建当前项目依赖的仓库中其他子项目。这里以一个 pnpm Monorepo 仓库为例，在 Vercel 上对 Monorepo 项目进行部署。
+假设 Monorepo 仓库目录结构如下：
+```
+.
+├── packages
+│   ├── app
+│   └── app-dep1
+├── package.json
+├── pnpm-lock.yaml
+└── pnpm-workspace.yaml
+```
+首先，你需要在 Vercel 平台上配置 **Root Directory** 为 `packages/app`:
+<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-root-directory.png" />
+将 Node.js 运行时设置为 `18.x`：
+```json title="package.json"
+"engines": {
+  "node": "18.x"
+},
+```
+在 `packages/app/package.json` 中添加以下 script，在执行 `app` 仓库的部署命令之前，先执行 workspace 中其他仓库的构建：
+```json
+{
+  "scripts": {
+    "build:packages": "pnpm --filter 'app^...' run build",
+    "deploy": "pnpm run build:packages && modern deploy",
+  }
+}
+```
+在 `packages/app/vercel.json` 文件中添加以下内容：
+```json title="vercel.json"
+{
+  "buildCommand": "npm run deploy",
+  "outputDirectory": ".vercel/output"
+}
+```
+提交你的代码，使用 Vercel 平台部署即可。

package/package.json CHANGED Viewed

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.51.0",
+  "version": "2.52.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.51.0"
+    "@modern-js/sandpack-react": "2.52.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.51.0"
+    "@modern-js/builder-doc": "^2.52.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -39,8 +39,8 @@
     "@rspress/shared": "1.18.2",
     "@types/node": "^16",
     "@types/fs-extra": "9.0.13",
-    "@modern-js/builder-doc": "2.51.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.51.0"
+    "@modern-js/builder-doc": "2.52.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.52.0"
   },
   "scripts": {
     "dev": "rspress dev",