@modern-js/main-doc 2.22.0 → 2.22.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @modern-js/main-doc
 
+## 2.22.1
+
+### Patch Changes
+
+- 411d047: docs: fix reset command
+
+  docs: 修复 reset command 翻译问题
+
+- bce7a12: docs(main): update concept doc
+
+  docs(main): 更新核心概念文档
+
+- 2ede584: docs(main): update start doc
+
+  docs(main): 更新开始文档
+
+- 7267a1a: docs(main): update changeset doc
+
+  docs(main): 更新包版本管理文档
+
+- Updated dependencies [bd4b150]
+- Updated dependencies [2ede584]
+  - @modern-js/builder-doc@2.22.1
+
 ## 2.22.0
 
 ### Minor Changes

package/docs/en/components/debug-app.mdx

@@ -1,4 +1,4 @@
-Execute `pnpm run dev` in the project to start the project:
+Run `pnpm run dev` in the project to start the project:
 
 ```bash
 $ pnpm run dev

package/docs/en/components/deploy.mdx

@@ -0,0 +1 @@
+After local verification, you can organize the artifacts in `dist/` into the structure required by the server for deployment.

package/docs/en/components/init-app.mdx

@@ -1,12 +1,13 @@
-Modern.js generator will provide an interactive Q & A interface, initialization items according to the result, according to the default selection:
+`@modern-js/create` provides an interactive Q & A interface to initialize the project based on the results, with initialization performed according to the default settings:
 
 ```bash
 ? Please select the type of project you want to create: Web App
 ? Please select the programming language: TS
 ? Please select the package manager: pnpm
+? Please select the bundler: webpack
 ```
 
-After create the project, Modern.js automatically installs dependency and creates a git repository.
+After create the project, Modern.js will automatically install dependencies and create a git repository.
 
 ```bash
 [INFO] dependencies are automatically installed
@@ -20,11 +21,6 @@ pnpm run lint         # Run ESLint and automatically fix problems
 pnpm run new          # Enable optional features or add a new entry
 ```
 
-:::note
-In addition to working during project initialization, the Modern.js generator can also generate modules of the project in subsequent development, which is not thrown away as soon as it is used.
-
-:::
-
 Now, the project structure is as follows:
 
 ```

package/docs/en/components/release-note.mdx

@@ -0,0 +1 @@
+According to the [Release Note](https://github.com/web-infra-dev/modern.js/releases) on the official website, developers can also manually upgrade the project to the desired version.

package/docs/en/configure/app/output/css-modules.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: cssModules
+---
+
+# output.cssModules
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [output.cssModules](https://modernjs.dev/builder/en/api/config-output.html#outputcssmodules).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/output/cssModules.md';
+
+<Main />

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

@@ -19,23 +19,9 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
 
 ## Install
 
-First, you need to execute `pnpm run new` to enable the SWC compile:
+import EnableSWC from '@modern-js/builder-doc/docs/en/shared/enable-swc.md';
 
-```bash
-? Please select the operation you want: Enable features
-? Please select the feature name: Enable SWC Compile
-```
-
-After the installation, please register the SWC plugin in the `modern.config.ts` file, then the SWC compilation and compression will be enabled.
-
-```ts title="modern.config.ts"
-import appTools, { defineConfig } from '@modern-js/app-tools';
-import swcPlugin from '@modern-js/plugin-swc';
-
-export default defineConfig({
-  plugins: [appTools(), swcPlugin()],
-});
-```
+<EnableSWC />
 
 ## Config
 

package/docs/en/guides/advanced-features/rspack-start.mdx

@@ -81,8 +81,7 @@ For example, if you are using pnpm, you can update the Rspack version with `over
       "@rspack/core": "nightly",
       "@rspack/dev-client": "nightly",
       "@rspack/dev-middleware": "nightly",
-      "@rspack/plugin-html": "nightly",
-      "@rspack/postcss-loader": "nightly"
+      "@rspack/plugin-html": "nightly"
     }
   }
 }

package/docs/en/guides/concept/builder.mdx

@@ -4,31 +4,31 @@ sidebar_position: 2
 
 # Builder
 
-**Modern.js uses [Modern.js Builder](https://modernjs.dev/builder) to build your Web App.**
+**Modern.js uses [Modern.js Builder](https://modernjs.dev/builder/en) to build your Web App.**
 
-Modern.js Builder is one of the core components of Modern.js. It is A build engine for web development. and can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and it uses webpack by default.
+Modern.js Builder is one of the core components of the Modern.js system. It is a build engine for web development scenarios that can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and by default uses the most mature webpack for bundling.
 
 ## Build Architecture
 
-From the perspective of building, Modern.js is divided into three layers, from top to bottom:
+From a building perspective, Modern.js is divided into three layers, from top to bottom:
 
-- Upper-layer framework: Modern.js.
-- Universal build engine: Modern.js Builder.
-- Low-level bundlers: webpack and rspack.
+- Upper-level development framework: Modern.js.
+- Common build engine: Modern.js Builder.
+- Low-level bundler: webpack and Rspack.
 
 <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## Builder Documentation
 
-Since Modern.js Builder is a module that can be used independently, we provide a separate document for it, the site address is: [modernjs.dev/builder](https://modernjs.dev/builder).
+Since Modern.js Builder is a module that can be used independently, we have provided separate documentation for it, which can be found at [modernjs.dev/builder](https://modernjs.dev/builder/en).
 
-In this document, you can learn about the detailed introduction of Modern.js Builder, and you can also find a complete usage guide for each building features. When you encounter building issues, it is recommended that you first read the Modern.js Builder documentation to solve them.
+In this documentation, you can learn about the detailed introduction of Modern.js Builder, and you can also find complete usage guides for various building capabilities. If you have any building needs or problems, it is recommended that you read the Modern.js Builder documentation first to solve them.
 
-## Builder Config
+## Builder Configuration
 
-The config of Modern.js is inherited from Modern.js Builder, so you can use all build configs provided by Modern.js Builder in Modern.js.
+Modern.js's configuration inherits from Modern.js Builder, so you can use all the build configurations provided by Modern.js Builder in Modern.js.
 
-Take the `html.title` config of Modern.js Builder as an example, you can directly use this config in the `modern.config.ts` file, and it will be automatically passed to Modern.js Builder.
+Taking the `html.title` config option of Modern.js Builder as an example, you can directly use this option in the `modern.config.ts` file, and it will be automatically passed to Modern.js Builder.
 
 ```ts title="modern.config.js"
 export default defineConfig({
@@ -38,10 +38,10 @@ export default defineConfig({
 });
 ```
 
-For details of building configs, please refer to [「Modern.js Builder - Builder Config」](https://modernjs.dev/builder/en/guide/basic/builder-config.html).
+For detailed information about build configuration, please refer to [「Modern.js Builder - Builder Config」](https://modernjs.dev/builder/en/guide/basic/builder-config.html).
 
-## Building Features
+## Builder Capabilities
 
-Modern.js Builder provides a wealth of building features, including dozens of features such as JavaScript compilation, CSS compilation, static resource processing, hot module replacement, code compression, and TS type checking.
+Modern.js Builder provides rich build capabilities, including JavaScript compilation, CSS compilation, static resource processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
 
-We recommend you to read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn all the building features provided by Modern.js Builder.
+We recommend that you read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn about all the features provided by Modern.js Builder.

package/docs/en/guides/concept/entries.mdx

@@ -2,21 +2,21 @@
 sidebar_position: 1
 ---
 
-# Entries
+# Entry
 
-Through this chapter, you can learn about the entry convention in Modern.js and how to customize the entry.
+In this chapter, you will learn about the entry convention in Modern.js and how to customize it.
 
-## What is an Entry
+## What is Entry?
 
-**Entry is the starting module of a page.**
+**Entry refers to the starting module of a page.**
 
-In the Modern.js project, each entry corresponds to an independent page, and also corresponds to a server route. By default, Modern.js will automatically determine the entry of the page based on the directory convention, and also supports customizing the entry through configuration items.
+In a Modern.js project, each entry corresponds to an independent page and a server-side route. By default, Modern.js automatically determines the entry of a page based on directory conventions, but also supports customizing the entry through configuration options.
 
-Many configuration items provided by Modern.js are divided by entry, such as page title, HTML template, page Meta information, whether to enable SSR/SSG, server-side routing rules, etc.
+Many configuration options provided by Modern.js are divided by entry, such as page title, HTML template, page meta information, whether to enable SSR/SSG, server-side routing rules, etc.
 
 ## Single Entry and Multiple Entries
 
-The project initialized by Modern.js is single-entry (SPA), and the project structure is as follows:
+The project initialized by Modern.js is a single entry (SPA) project, with the following structure:
 
 ```
 .
@@ -30,7 +30,7 @@ The project initialized by Modern.js is single-entry (SPA), and the project stru
 └── tsconfig.json
 ```
 
-Modern.js can easily switch from single entry to multiple entry. You can execute `pnpm run new` under the project to create entry through generator:
+In a Modern.js project, you can easily switch from single entry to multiple entries by running `pnpm run new` in the project directory and creating an entry:
 
 ```bash
 ? Please select the operation you want: Create Element
@@ -38,7 +38,7 @@ Modern.js can easily switch from single entry to multiple entry. You can execute
 ? Please fill in the entry name: new-entry
 ```
 
-After execution, Modern.js will automatically generate a new entry directory, and you can see that the `src/` directory has the following structure:
+After running the command, Modern.js will automatically generate a new entry directory. At this point, you can see that the `src/` directory has the following structure:
 
 ```bash
 .
@@ -54,51 +54,55 @@ After execution, Modern.js will automatically generate a new entry directory, an
         └── page.tsx
 ```
 
-The original code was moved to the directory with the same name as the `name` in the `package.json`, and a new directory was created.
+The original entry code has been moved to a directory with the same name as the `name` field in `package.json`, and a `new-entry` entry directory has been created.
 
-After executing `pnpm run dev`, you can see that a `/new-entry` route has been added, and the migrated code route has not changed.
+After running `pnpm run dev`, you can see a new route named `/new-entry` has been added, and the migrated code route has not changed.
 
 :::tip
-Modern.js will use the entry with the same name as the `name` field in the package.json file as the main entry, the route of the main entry is `/`, and the route of other entries is `/{entryName}`.
+Modern.js will use the entry with the same name as the `name` field in `package.json` as the main entry. The route of the main entry is `/`, and the route of other entries is `/{entryName}`.
 
-For example, when `name` in package.json is `myapp`, `src/myapp` will be used as the main entry of the project.
+For example, when the `name` field in `package.json` is `myapp`, `src/myapp` will be the main entry of the project.
 
 :::
 
-## Entry Type
+## Entry Types
 
-Different entry types have different compile and run-time behaviors. When creating a project in Modern.js, developers can manually choose to create a project in **framework mode** or **build mode**. After the creation is complete, you can see that the project template files for different modes are different.
+Different entry types have different compilation and runtime behaviors.
 
-By default, Modern.js will scan the files under `src/` before starting the project, identify the entry, and generate the corresponding server-side route.
+import EntryMode from '@site-docs-en/components/entry-mode.mdx';
+
+<EntryMode />
+
+By default, Modern.js scans the files under `src/` before starting the project, identifies the entry, and generates the corresponding server-side route.
 
 :::tip
-You can change the entry directory to another directory through [source.entriesDir](/configure/app/source/entries-dir).
+You can modify the directory for entry identification by using the [source.entriesDir](/configure/app/source/entries-dir) config.
 
 :::
 
-Not all first-level directories under `src/` will become project entries, and the directory where the entry is located must meet one of the following four conditions:
+Not all top-level directories under `src/` become project entries. The directory where the entry is located must meet one of the following four conditions:
 
-1. Have a `routes/` directory
-2. Has `App.[jt]sx?` file
-3. Has `index.[jt]sx?` file
-4. Has a `pages/` directory (Modern.js 1.0 compatible)
+1. Has a `routes/` directory.
+2. Has an `App.[jt]sx?` file.
+3. Has an `index.[jt]sx?` file.
+4. Has a `pages/` directory (compatible with Modern.js 1.0).
 
-When the `src/` directory meets the entry characteristics, Modern.js will consider the current project as a single-entry application.
+When the `src/` directory meets the entry requirements, Modern.js considers the current project as a single entry application.
 
 :::tip
-In single-entry applications, the default entry is named `main`.
+In a single entry application, the default entry name is `main`.
 
 :::
 
-When the project is not a single-entry application, Modern.js will further check the first-level directory under `src/`.
+When the project is not a single entry application, Modern.js will further look at the top-level directories under `src/`.
 
 ### Framework Mode Entry
 
-Framework mode refers to the need to use the capabilities of the Modern.js framework, such as Router, SSR, integrated calls, etc. Under this kind of entry agreement, the entry defined by the developer is not the real Webpack compilation entry. Modern.js will generate an encapsulated entry when it starts, and the real entry can be found in `node_modules/.modern/{entryName}/index.js`.
+Framework mode refers to the need to use Modern.js framework capabilities, such as Router, SSR, integrated calls, etc. Under this type of entry convention, the entry defined by the developer is not a real webpack compilation entry. Modern.js will generate a wrapped entry during startup, and you can find the real entry in `node_modules/.modern/{entryName}/index.js`.
 
 #### Conventional Routing
 
-If there is a `routes/` directory in the entry, Modern.js will scan the files under `routes/` at startup, and automatically generate client-side routes (react-router) based on file conventions. For example:
+If there is a `routes/` directory in the entry, Modern.js will scan the files under `routes/` during startup, and automatically generate client-side routes (react-router) based on file conventions. For example:
 
 ```bash
 .
@@ -108,11 +112,13 @@ If there is a `routes/` directory in the entry, Modern.js will scan the files un
 │       └── page.tsx
 ```
 
-For details, please refer to [routing](/guides/basic-features/routes#conventional-routing).
+In the above directory, the component exported in `layout.tsx` will be the outermost component, and the component exported in `page.tsx` will be the component of the `/` route.
+
+For more information, please refer to [Conventional Routing](/guides/basic-features/routes.html#conventional-routing).
 
 #### Self-controlled Routing
 
-If there is an `App.[jt]sx?` file in the entry, the developer can freely set the client route in this file, or not set the client route.
+If there is an `App.[jt]sx?` file in the entry, developers can set the client-side route in this file through code, or not set the client-side route.
 
 ```tsx
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
@@ -129,11 +135,11 @@ export default () => {
 };
 ```
 
-For details, please refer to [routing](/guides/basic-features/routes#self-controlled-routing).
+For more information, please refer to [Self-controlled Routing](/guides/basic-features/routes.html#self-controlled-routing).
 
 #### Custom Bootstrap
 
-If there is an `index.[jt]sx` file in the entry, and when the file defaults to exporting functions, Modern.js will pass the default bootstrap function as an imported parameter, and replace the default bootstrap with the exported function, so that developers can customize Mounting components to DOM nodes, or adding custom behavior before mounting. E.g:
+If there is an `index.[jt]sx` file in the entry, and the file exports a function by default, Modern.js will pass the default `bootstrap` function as a parameter and use the exported function to replace the default `bootstrap`. This way, developers can customize how components are mounted to DOM nodes or add custom behavior before mounting. For example:
 
 ```tsx
 export default (App: React.ComponentType, bootstrap: () => void) => {
@@ -144,12 +150,7 @@ export default (App: React.ComponentType, bootstrap: () => void) => {
 };
 ```
 
-:::warning
-Since the bootstrap function needs to be compatible with React17 and React18, you need to manually pass in ReactDOM parameters when calling the bootstrap function.
-
-:::
-
-The content of the file generated by Modern.js is as follows:
+At this point, the generated file content of Modern.js is as follows:
 
 ```js
 import React from 'react';
@@ -180,9 +181,9 @@ export default AppWrapper;
 
 ### Build Mode Entry
 
-Build mode refers to the ability not to use any Modern.js runtime, and the developer defines the entry of the project Webpack completely by himself.
+Build mode refers to not using any Modern.js runtime capabilities and completely defining the project's webpack entry by the developer.
 
-If `index.[jt]sx` exists in the entry and there is no default export function, then this file is the real Webpack entry file. This is similar to [Create React App](https://github.com/facebook/create-react-app), you need to mount components to DOM nodes, add hot update code, etc. For example:
+If there is an `index.[jt]sx` file in the entry and it does not export a default function, then this file is the real webpack entry file. Similar to [Create React App](https://github.com/facebook/create-react-app), you need to mount the component to the DOM node by yourself, add hot update code, etc. For example:
 
 ```js title=src/index.jsx
 import React from 'react';
@@ -192,13 +193,13 @@ import App from './App';
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-Modern.js **not recommended** new project to use this method, this method loses some capabilities of the framework, such as the `runtime` configuration in the **`modern.config.js` file will no longer take effect**. But this method will be very useful when the project is migrated from other frameworks to Modern.js, such as CRA, or webpack that is manually built by yourself.
+Modern.js **does not recommend** using this method for new projects, as it loses some of the framework's capabilities, such as the `runtime` configuration in the `modern.config.js` file will no longer take effect. However, this method can be very useful when migrating projects from other frameworks to Modern.js, such as CRA, or manually building webpack.
 
-## Specify Entry Using Configuration
+## Specifying Entry Using Configuration
 
-Most existing projects are not built according to the directory convention of Modern.js. If you want to change to the directory structure agreed by Modern.js, there will be a certain migration cost.
+Most existing projects are not built according to the directory structure of Modern.js. If you want to change to the directory structure of Modern.js, there will be certain migration costs.
 
-In this case, instead of generating the entry using file conventions, you can manually configure the entry in `modern.config.[jt]s`.
+In this case, in addition to using file conventions to generate entries, you can manually configure the entry in `modern.config.[jt]s`.
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -213,11 +214,11 @@ export default defineConfig({
 });
 ```
 
-### Disable Default Entries
+### Disable Default Entry Scanning
 
-When using a custom entry, part of the project structure may happen to hit the directory convention of Modern.js, but in fact this part of the directory is not the real entry.
+When using custom entries, part of the project structure may coincidentally hit the directory conventions of Modern.js, but in fact, this part of the directory is not the real entry.
 
-Modern.js provides `disableDefaultEntries` config to disable default entry scanning rules. When you need to customize the entry, you generally need to use `disableDefaultEntries` with `entries`. In this way, some existing projects can be quickly migrated without modifying the directory structure.
+Modern.js provides the `disableDefaultEntries` configuration to disable the default entry scanning rules. When you need to customize the entry, you generally need to use `disableDefaultEntries` in combination with `entries`. This way, some existing projects can be quickly migrated without modifying the directory structure.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/docs/en/guides/get-started/glossary.mdx

@@ -6,9 +6,9 @@ sidebar_position: 4
 
 ## BFF
 
-BFF stands for "Backend For Frontend". It is an architectural pattern where a dedicated backend service is created for frontend applications.
+BFF is short for "Backend For Frontend". It is an architecture pattern that involves creating a backend service for frontend applications.
 
-The BFF service acts as an intermediary between the frontend application and the backend APIs, providing a tailored API for the frontend to consume. This allows the frontend developers to have more control over the data and functionality that they need, without having to rely on a monolithic backend API to provide coresponding capabilities.
+The BFF service acts as an intermediary between the frontend application and the server API, and can provide customized APIs for the frontend to use. This allows frontend developers to have more control over the data and functionality they need, without relying on the backend service to provide the corresponding capabilities.
 
 ## Bundler
 
@@ -24,15 +24,15 @@ import Builder from '@modern-js/builder-doc/docs/en/shared/builder.md';
 
 ## CSR
 
-CSR stands for "Client-Side Rendering". It means that pages are rendered directly in the browser using JavaScript. All the logic, data fetching, templating and routing is done on the client rather than the server.
+CSR stands for "Client-Side Rendering". It means that the page is rendered in the browser using JavaScript, and logic such as data fetching, templates, and routing is completed on the client side rather than the server.
 
-In CSR, the server sends an empty HTML shell to the client along with some JavaScript bundles, which then fetches data from the server's APIs and populates the page with dynamic content.
+In CSR, the server sends an empty HTML shell and some JavaScript scripts to the browser, and the browser fetching data from the server's API and renders dynamic content to the page.
 
 ## Garfish
 
-[Garfish](https://garfish.bytedance.net/) is a set of micro front-end solutions mainly used to solve problems such as cross-team collaboration and technical system diversification of web applications.
+[Garfish](https://garfish.bytedance.net/) is a micro-frontend solution mainly used to solve problems such as cross-team collaboration and diversified technology systems in web applications.
 
-Starting from the architectural level, it integrates several independently delivered front-end applications. These front-end applications can be developed, tested and deployed independently, but from the user's point of view they are still a cohesive single product.
+Starting from the architecture level, it combines multiple independently delivered frontend applications into a whole. These frontend applications can be developed, tested, and deployed independently, but in the user's perspective, they are still cohesive single products.
 
 ## Rspack
 
@@ -42,19 +42,19 @@ import Rspack from '@modern-js/builder-doc/docs/en/shared/rspack.md';
 
 ## SSR
 
-SSR stands for "Server-Side Rendering". It is a technique where the server generates the HTML of a web page and sends it to the client, instead of sending just an empty HTML shell and relying on JavaScript to populate the page.
+SSR stands for "Server-Side Rendering". It means that the HTML of the web page is generated by the server and sent to the client, rather than sending only an empty HTML shell and relying on JavaScript to generate the page content.
 
-In traditional client-side rendering, the server sends an empty HTML shell to the client along with some JavaScript bundles, which then fetches data from the server's APIs and populates the page with dynamic content. This can result in a slower initial load time, which can be detrimental to user experience and SEO.
+In traditional client-side rendering, the server sends an empty HTML shell and some JavaScript scripts to the client, and then fetching data from the server's API and fills the page with dynamic content. This leads to slow initial page loading times and is not conducive to user experience and SEO.
 
-With SSR, the server generates the HTML with the dynamic content already populated, and sends it to the client. This can result in a faster initial load time and better SEO, as search engines can crawl the fully rendered page.
+With SSR, the server generates HTML that already contains dynamic content and sends it to the client. This makes the initial page loading faster and more SEO-friendly, as search engines can crawl the rendered page.
 
 ## SSG
 
-SSG stands for "Static Site Generation". It is a technique where a web page is pre-rendered into static HTML, and then served directly to the client without the need for a server to generate the HTML on the fly.
+SSG stands for "Static Site Generation". It means that web pages are pre-rendered as static HTML and served directly to the client, without the need for the server to generate HTML in real-time.
 
-In traditional SSR, the server generates the HTML on the fly each time a user requests a page. With SSG, the HTML is generated ahead of time during the build process and can be served directly from a CDN or other static hosting service.
+In traditional SSR, the server generates HTML in real-time every time a user requests a page. With SSG, HTML can be generated in advance during the build process and hosted on a CDN or other static resource service.
 
-SSG can provide faster load times and less server overhead to traditional SSR, as there is no need to maintain a server to generate the HTML on the fly. However, it is not suitable for websites that require dynamic content, as the HTML is generated during the build process and cannot be updated in real-time.
+Compared to traditional SSR, SSG can provide faster loading speeds and less server-side overhead, as there is no need to maintain a server to generate HTML in real-time. However, SSG is not suitable for websites that require dynamic content, as the HTML is generated during the build process and does not support real-time updates.
 
 ## SWC
 

package/docs/en/guides/get-started/introduction.mdx

@@ -7,7 +7,7 @@ sidebar_position: 1
 
 **Modern.js is an open source web engineering system from ByteDance**, which provides multiple solutions to help developers solve problems in different development scenarios.
 
-Currently, Modern.js includes three solutions, each targeting at different development scenarios: web application development, npm package development, and document site development:
+Currently, Modern.js includes three solutions, targeting web application development, npm package development, and document site development:
 
 import { SolutionCards } from '@site/src/components/SolutionCards';
 
@@ -31,40 +31,37 @@ import { SolutionCards } from '@site/src/components/SolutionCards';
   ]}
 />
 
-As a part of the Modern.js engineering system, each of these solutions can be used separately and has its own independent documentation site. Developers can choose one or more solutions as needed.
+As part of the Modern.js engineering system, each of the above solutions can be used separately and has its own independent documentation site. Developers can choose one or more solutions as needed.
 
 ## About Documentation
 
-**This documentation site corresponds to the Modern.js framework**, which is used to developing web applications.
+**The current documentation site corresponds to the Modern.js framework**, which is used to developing web applications.
 
-- If you are developing an npm package, please refer to the [Modern.js Module](https://modernjs.dev/module-tools/en) documentation.
-- If you are developing a document site, please refer to the [Modern.js Doc](https://modernjs.dev/doc-tools) documentation.
-- If you want to use the Modern.js's builder engine to implement a web framework, please refer to the [Modern.js Builder](https://modernjs.dev/builder/en) documentation.
+- If you need to develop an npm package, please refer to the [Modern.js Module](https://modernjs.dev/module-tools) documentation.
+- If you need to develop a documentation site, please refer to the [Modern.js Doc](https://modernjs.dev/doc-tools/) documentation.
+- If you need to implement a web development framework based on the Modern.js build engine, please refer to the [Modern.js Builder](https://modernjs.dev/builder) documentation.
 
 :::tip
-As the Modern.js framework is the most widely used, in this documentation site, we will omit the "framework" and simply call it as Modern.js.
+Since the Modern.js framework is the most widely used, in this documentation site, we will omit "framework" and directly refer to it as Modern.js.
 :::
 
 ## Modern.js Framework
 
 **The Modern.js framework is a progressive web framework based on React**. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.
 
-Modern.js can provide developers with the ultimate **development experience**, making the application get better **user experience**.
+Modern.js can provide developers with an ultimate **Development Experience** and enable applications to have better **User Experience**.
 
-In the process of developing React applications, developers often need to design implementations for certain functions, or use other libraries and frameworks to solve these problems.
+In the process of developing React applications, developers usually need to design implementation plans for certain features or use other libraries and frameworks to solve these problems. Modern.js supports all configurations and tools needed by React applications, and has built-in **additional features and optimizations**. Developers can use React to build the UI of the application, and then gradually adopt the features of Modern.js to solve common application requirements, such as routing, data acquisition, and state management.
 
-Modern.js supports all the configuration and tools required by React applications, and has additional features and optimisations built in. Developers can use React to build the UI of the application, and then gradually adopt Modern.js functions to solve common application requirements, such as routing, data fetching, state management, etc.
+It mainly includes the following features:
 
-It mainly contains the following features:
-
-- 🚀 **Rust Bundler**: Easily switch to Rspack bundler with faster build speed.
-- 🪜 **Progressive**: Create projects with the most streamlined templates, gradually turn on plugin capabilities through generators, and customize solutions.
-- 🏠 **Integration**: The development is unique to the production environment Web Server, CSR and SSR are isomorphic development, and the function as the API service call.
-- 📦 **Out Of The Box**: Default TS support, built-in build core, ESLint, debugging tools, full functionality can be tested.
-- 🌏 **Ecology**: Self-developed state management, micro frontend, module packaging, Monorepo solution and other peripheral requirements.
-- 🕸 **Routing Modes**: Contains controlled routing, routing based on file conventions (nested routing), configurable routing, etc.
-- 🚀 **Independently Build Core**: Support a variety of packaging tools, deep optimization bundle.
+- 🚀 **Rust Bundler**: Provides support for dual bundlers, easily switch to the Rspack for faster build speed.
+- 🪜 **Progressive**: Create projects with the most streamlined templates, gradually enable plugin features through the generator, and customize solutions.
+- 🏠 **Integration**: Development and production environment web server are unique, CSR and SSR are isomorphic development, and API service calls are functions as interfaces.
+- 📦 **Out Of The Box**: Default TS support, built-in build, ESLint, debugging tools, fully functional and testable.
+- 🌏 **Ecology**: Self-developed state management, micro-frontend, module packaging, Monorepo solutions, and other peripheral needs.
+- 🕸 **Routing Modes**: Includes self-controlled routing, file-convention-based routing (nested routing), etc.
 
 ## Next
 
-If you want to know how to use Modern.js, you can try [Create your first app](/tutorials/first-app/c01-start), or read [Quick Start](/guides/get-started/quick-start).
+If you want to learn how to use the Modern.js framework, you can try to [create your first application](/tutorials/first-app/c01-start), or read the [Quick Start](/guides/get-started/quick-start) guide.