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

@modern-js/main-doc 2.50.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

@@ -87,9 +87,9 @@ It is recommended to use [UnstableMiddleware](/guides/advanced-features/web-serv
 Modern.js provides a set of APIs by default for projects to use:
 ```ts
-import { Middlewre } from '@modern-js/runtime/server';
+import { Middleware } from '@modern-js/runtime/server';
-export const middleware: Middlewre = (context, next) => {
+export const middleware: Middleware = (context, next) => {
   const {
     source: { req, res },
   } = context;
@@ -110,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 ADDED Viewed

@@ -0,0 +1,286 @@
+---
+sidebar_position: 15
+---
+# Deploy Application
+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 a Node.js environment. Support for more runtime environments will be provided in the future.
+:::
+## Build Deployment Products
+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`:
+```bash
+MODERNJS_DEPLOY=netlify npx modern deploy
+```
+:::info
+When deploying on the deployment platforms officially supported by Modern.js, there is no need to specify environment variables.
+:::
+## Node.js
+### Single Repo
+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 in terminal:
+```bash
+Static directory: `.output/static`
+You can preview this build by `node .output/index`
+```
+At this point, you can run the entire server by `node .output/index`, and the static resources required for the page are in the `.output/static` directory. You can upload these static resources to a CDN yourself:
+:::info
+By default, when running Modern.js Server, it listens on port 8080. If you want to change the listening port, you can specify the `PORT` environment variable:
+```
+PORT=3000 node .output/index
+```
+:::
+### Monorepo
+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.
+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": {
+    "build:packages": "pnpm --filter 'app^...' run build",
+    "deploy": "pnpm run build:packages && modern deploy",
+  }
+}
+```
+If you use Rush as your Monorepo management tool, you can add the following commands to your `package.json`:
+```json
+{
+  "scripts": {
+    "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 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.
+Depending on the complexity of your project, you can configure it incrementally by this doc.
+### Pure Front-end Project
+Add the `netlify.toml` file to the root directory of the current project:
+```bash
+.
+├── src
+├── modern.config.ts
+├── netlify.toml
+└── package.json
+```
+Add the following content to `netlify.toml`:
+```toml
+[build]
+  publish = "dist"
+  command = "modern deploy"
+```
+Now, add a project to the Netlify platform and deploy it!
+### Full Stack Project
+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 = "modern deploy"
+[functions]
+  directory = ".netlify/functions"
+  node_bundler = "none"
+  included_files = [".netlify/functions/**"]
+```
+:::info
+Currently, Modern.js does not support deployment on Netlify Edge Functions. We will support it in future versions.
+:::
+### Monorepo
+:::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.
+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
+│   └── app-dep1
+├── package.json
+├── pnpm-lock.yaml
+└── pnpm-workspace.yaml
+```
+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": {
+    "build:packages": "pnpm --filter 'app^...' run build",
+    "deploy": "pnpm run build:packages && modern deploy",
+  }
+}
+```
+Configure the build command in `netlify.toml`:
+```toml
+[build]
+  publish = "dist"
+  command = "npm run deploy"
+[functions]
+  directory = ".netlify/functions"
+  node_bundler = "none"
+  included_files = [".netlify/functions/**"]
+```
+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

@@ -85,9 +85,9 @@ export const afterRender: AfterRenderHook = (ctx, next) => {
 Modern.js 默认提供了一套 API 供项目使用：
 ```ts
-import { Middlewre } from '@modern-js/runtime/server';
+import { Middleware } from '@modern-js/runtime/server';
-export const middleware: Middlewre = (context, next) => {
+export const middleware: Middleware = (context, next) => {
   const {
     source: { req, res },
   } = context;
@@ -108,7 +108,7 @@ export const middleware: Middlewre = (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 ADDED Viewed

@@ -0,0 +1,281 @@
+---
+sidebar_position: 15
+---
+# 部署应用
+目前，Modern.js 提供了两种部署方式：
+- 你可以将应用自行托管在包含 Node.js 环境的容器中，这为应用提供了部署的灵活性。
+- 你也可以通过平台部署应用，目前 Modern.js 官方支持了 [Netlify](https://www.netlify.com/) 和 [Vercel](https://vercel.com/) 平台。
+:::info
+目前 Modern.js 仅支持在 Node.js 环境中运行，未来将提供更多运行时环境的支持。
+:::
+## 构建部署产物
+执行 `modern deploy` 命令将自动输出部署产物。此过程包括优化 Bundler 构建产物及产物依赖，检测当前部署平台，并自动生成可以在该平台运行的产物。
+如果你希望在本地生成并测试特定部署平台的产物，可以通过设置环境变量来指定平台:
+```bash
+MODERNJS_DEPLOY=netlify npx modern deploy
+```
+:::info
+在 Modern.js 官方支持的部署平台中部署时，无需指定环境变量。
+:::
+## Node.js
+### 单仓库项目
+默认情况下，如果未检测到 Modern.js 支持的部署平台，Modern.js 将生成可以在 Node.js 环境下运行的部署产物。
+你可以使用以下命令构建项目：
+```bash
+npx modern deploy
+```
+当执行 `modern deploy` 命令时，Modern.js 将生成可执行的部署产物，并在控制台输出以下内容：
+```bash
+Static directory: `.output/static`
+You can preview this build by `node .output/index`
+```
+现在，你可以通过执行 `node .output/index` 命令来运行服务器。在 `.output/static` 目录中，存放了页面运行所需的静态资源，你可以选择将这些资源上传到 CDN 以提高访问速度。
+:::info
+默认情况下，运行 Modern.js 服务器时会监听 8080 端口，如果你想修改监听的端口，可以指定 `PORT` 环境变量：
+```
+PORT=3000 node .output/index
+```
+:::
+### Monorepo
+对于 Monorepo 项目，除了需要构建当前的项目外，还需要构建当前项目依赖的仓库中其他子项目。
+假设当前项目的 `package.json` 中的 name 为 `app`，以 pnpm 作为 Monorepo 管理工具为例，你可以在项目 `package.json` 中添加以下命令用于构建：
+```json title="app/package.json"
+{
+  "scripts": {
+    "build:packages": "pnpm --filter 'app^...' run build",
+    "deploy": "pnpm run build:packages && modern deploy",
+  }
+}
+```
+如果你使用 rush 作为 Monorepo 管理工具，可以在 `package.json` 中添加以下命令：
+```json
+{
+  "scripts": {
+    "build:packages": "rush rebuild --to-except app",
+    "deploy": "rushx build:packages && modern deploy",
+  }
+}
+```
+构建完成后，框架会将项目中所有的依赖生成在 `.output/node_modules` 目录下。你同样可以使用 `node .output/index` 运行 Modern.js 服务器。
+## Netlify
+Netlify 是一个流行的 Web 开发平台，专为构建、发布和维护现代 Web 项目而设计。在 Netlify 上部署，通常需要配置 `netlify.toml` 文件，你可以根据项目复杂度，渐进地配置该文件。
+### 纯前端项目
+在当前项目的根目录添加 `netlify.toml` 文件：
+```bash
+./
+├── src
+├── modern.config.ts
+├── netlify.toml
+└── package.json
+```
+在 `netlify.toml` 中添加以下内容：
+```toml
+[build]
+  publish = "dist"
+  command = "modern deploy"
+```
+在 Netlify 平台上添加项目，部署即可。
+### 全栈项目
+全栈项目是指使用了自定义 Web Server、SSR、BFF 的项目，这些项目需要部署在 **Netlify Functions** 上。你需要基于上述的 `netlify.toml` 文件，添加以下配置：
+```toml title="netlify.toml"
+[build]
+  publish = "dist"
+  command = "modern deploy"
+[functions]
+  directory = ".netlify/functions"
+  node_bundler = "none"
+  included_files = [".netlify/functions/**"]
+```
+:::info
+目前 Modern.js 还不支持在 Netlify Edge Functions 进行部署，我们将在后续的版本中支持。
+:::
+### Monorepo 项目
+:::info
+以下指南主要针对于全栈项目，对于纯 CSR 的项目，只需要按照[纯前端项目](#纯前端项目)部署即可。
+:::
+对于 Monorepo 项目，除了需要构建当前的项目外，还需要构建当前项目依赖的仓库中其他子项目。这里以一个 pnpm Monorepo 仓库为例，在 Netlify 上对 Monorepo 项目进行部署。
+假设 Monorepo 仓库目录结构如下：
+```
+.
+├── packages
+│   ├── app
+│   └── app-dep1
+├── package.json
+├── pnpm-lock.yaml
+└── pnpm-workspace.yaml
+```
+你需要在 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": {
+    "build:packages": "pnpm --filter 'app^...' run build",
+    "deploy": "pnpm run build:packages && modern deploy",
+  }
+}
+```
+在 `netlify.toml` 配置构建命令：
+```toml
+[build]
+  publish = "dist"
+  command = "npm run deploy"
+[functions]
+  directory = ".netlify/functions"
+  node_bundler = "none"
+  included_files = [".netlify/functions/**"]
+```
+提交你的代码，使用 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.50.0",
+  "version": "2.52.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.50.0"
+    "@modern-js/sandpack-react": "2.52.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.50.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/doc-plugin-auto-sidebar": "2.50.0",
-    "@modern-js/builder-doc": "2.50.0"
+    "@modern-js/builder-doc": "2.52.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.52.0"
   },
   "scripts": {
     "dev": "rspress dev",