@modern-js/main-doc 2.4.0 → 2.6.0

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

@@ -0,0 +1,69 @@
+---
+title: Rspack Start
+sidebar_position: 12
+---
+
+# Rspack Start
+
+[Rspack](https://www.rspack.org/) is a Rust-based web bundler developed by the ByteDance Web Infra team. The core architecture of Rspack is aligned with the implementation of webpack, and provides out-of-the-box support for commonly used build features.
+
+Rspack optimizes compilation performance by:
+
+- Highly LTO optimized Native code.
+- Take full advantage of multi-core, and the entire compilation process is fully optimized for multi-threading.
+- On-demand compilation based on request (Lazy Compilation), reducing the number of modules per compilation to improve the speed of cold start.
+
+## Initializing an rspack project
+
+The Modern.js generator provides an interactive question-and-answer interface to initialize a project. To create an rspack project, simply select the **rspack** build tool by running:
+
+```bash
+$ npx @modern-js/create myapp
+? Please select the solution you want to create: Web App Solution
+? Development Language: TS
+? Package Management Tool: pnpm
+? Build Tools: rspack
+```
+
+After the project is created, you can experience the project by running `pnpm run dev`. For more project information, please refer to [Quick Start](/guides/get-started/quick-start.html).
+
+:::tip
+When using rspack as the bundler, the following features are currently not supported:
+
+- Server-side rendering (SSR)
+- Static Site Generation (SSG)
+- Micro Frontend.
+- Storybook debugging.
+
+:::
+
+## Migrating from webpack to rspack
+
+You can enable rspack build by running `pnpm run new`:
+
+```bash
+$ pnpm run new
+? Action： Enable features
+? Enable features： Enable rspack Build
+```
+
+After executing the command, enable the rspack build in `modern.config.ts`:
+
+```ts title=modern.config.ts
+import appTools, { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig<'rspack'>({
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: 'experimental-rspack',
+    }),
+  ],
+});
+```
+
+:::tip
+Migrating from webpack to rspack may have some differences in build and configuration capabilities. For more details, please refer to [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack)
+:::

package/en/guides/advanced-features/ssg.mdx

@@ -9,8 +9,8 @@ Static Site Generation is a solution for rendering complete static web pages at
 First need to execute `pnpm run new` to enable the SSG features:
 
 ```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「SSG」功能
+? Action Enable features
+? Enable features Enable SSG
 ```
 
 After execute script，register SSG plugin in `modern.config.ts`:
@@ -18,7 +18,6 @@ After execute script，register SSG plugin in `modern.config.ts`:
 ```ts title="modern.config.ts"
 import ssgPlugin from '@modern-js/plugin-ssg';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   output: {
     ssg: true,
@@ -38,14 +37,14 @@ For example, the following is a project directory structure using conventional r
 ```bash
 .
 ├── src
-│   └── routes
-│       ├── layout.tsx
-│       ├── page.tsx
-│       └── user
-│           ├── layout.tsx
-│           ├── page.tsx
-│           └── profile
-│               └── page.tsx
+│   └── routes
+│       ├── layout.tsx
+│       ├── page.tsx
+│       └── user
+│           ├── layout.tsx
+│           ├── page.tsx
+│           └── profile
+│               └── page.tsx
 ```
 
 The above file directory will generate the following three routes:
@@ -107,11 +106,11 @@ export default defineConfig({
 });
 ```
 
-run `pnpm run build` and `pnpm run serve`，access `http://localhost:8080/about`. In the Preview view, you can see that the page has been rendered。
+run `pnpm run build` and `pnpm run serve`，access `http://localhost:8080/about`. In the Preview view, you can see that the page has been rendered.
 
 Looking at the bundle file, a new `main/about/index.html` file has been added in the `dist/` directory.
 
 :::info
-The above only introduces the single entry, more related content can be viewed [SSG API](/configure/app/output/ssg)。
+The above only introduces the single entry, more related content can be viewed [SSG API](/configure/app/output/ssg).
 
 :::

package/en/guides/advanced-features/ssr.mdx

@@ -44,7 +44,7 @@ And it provides elegant degradation processing. Once the SSR request fails, it w
 However, developers still need to pay attention to the fallback of data, such as `null` values or data returns that do not as expect. Avoid React rendering errors or messy rendering results when SSR.
 
 :::info
-When using Data Loader, data fetching happens before rendering, Modern.js still supports fetching data when the component is rendered. See [Data Fetch](/guides/basic-features/data-fetch)。
+When using Data Loader, data fetching happens before rendering, Modern.js still supports fetching data when the component is rendered. See [Data Fetch](/guides/basic-features/data-fetch).
 
 :::
 
@@ -198,7 +198,7 @@ This is because in the previous request, the SPR has asynchronously obtained the
 It is conceivable that when `interval` is set to 1, users can have the responsive experience of a static page.
 
 :::info
-For more detail, see [`<PreRender>`](/apis/app/runtime/ssr/pre-render)。
+For more detail, see [`<PreRender>`](/apis/app/runtime/ssr/pre-render).
 
 :::
 
@@ -276,7 +276,7 @@ export const loader = () => {
 
 ### Independent File
 
-Both of the above methods will bring some burden to the developer. Modern.js based on [Nested Routing](/guides/basic-features/routes) developed and designed [Data Fetch](/guides/basic-features/data-fetch) to separate CSR and SSR code。
+Both of the above methods will bring some burden to the developer. Modern.js based on [Nested Routing](/guides/basic-features/routes) developed and designed [Data Fetch](/guides/basic-features/data-fetch) to separate CSR and SSR code.
 
 ## Remote Request
 

package/en/guides/advanced-features/testing.mdx

@@ -9,8 +9,8 @@ Modern.js inherits the testing capabilities of [Jest](https://jestjs.io/) by def
 First need to execute `pnpm run new` enable [unit test/integration test] features：
 
 ```
-? 请选择你想要的操作： 启用可选功能
-? 启用可选功能： 启用「单元测试 / 集成测试」功能
+? Action： Enable features
+? Enable features： Enable Unit Test / Integration Test
 ```
 
 After executing the above command, the `"test": "modern test"` command will be automatically generated in package.json.
@@ -20,7 +20,6 @@ register plugin in `modern.config.ts`:
 ```ts title="modern.config.ts"
 import testPlugin from '@modern-js/plugin-testing';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., testPlugin()],
 });
@@ -28,7 +27,7 @@ export default defineConfig({
 
 ## Test file
 
-Modern.js default recognized test file paths are: `<rootDir>/src/**/*.test.[jt]s?(x)` and `<rootDir>/tests/**/*.test.[jt]s?(x)`。
+Modern.js default recognized test file paths are: `<rootDir>/src/**/*.test.[jt]s?(x)` and `<rootDir>/tests/**/*.test.[jt]s?(x)`.
 
 If you need to customize the test directory, you can configure it with [tools.jest](/configure/app/tools/jest).
 
@@ -40,7 +39,7 @@ Modern.js test support [testing-library](https://testing-library.com/docs/). API
 import { render, screen } from '@modern-js/runtime/testing';
 ```
 
-Other Modern.js supported testing APIs can be found [here](/apis/app/runtime/testing/cleanup)。
+Other Modern.js supported testing APIs can be found [here](/apis/app/runtime/testing/cleanup).
 
 ## transform
 

package/en/guides/advanced-features/web-server.mdx

@@ -22,7 +22,6 @@ Modern.js 作为以客户端为中心的开发框架，对服务端的定制能
 ```ts title="modern.config.ts"
 import serverPlugin from '@modern-js/plugin-server';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., serverPlugin()],
 });

package/en/guides/basic-features/alias.mdx

@@ -23,10 +23,10 @@ For example, import the modules from the `src/common/` directory in the `src/App
 ```bash
 .
 ├── common
-│   ├── styles
-│   │   └── base.css
-│   └── utils
-│       └── index.ts
+│   ├── styles
+│   │   └── base.css
+│   └── utils
+│       └── index.ts
 ├── App.tsx
 ```
 
@@ -62,4 +62,4 @@ export default defineConfig({
 });
 ```
 
-for more detail, see 【[API - source.alias](/configure/app/source/alias)】。
+For detailed usage, please refer to [source.alias documentation](/configure/app/source/alias).

package/en/guides/basic-features/data-fetch.mdx

@@ -81,16 +81,16 @@ When a routing file is passed through `[]`, it is passed as a [dynamic route](/g
 
 ```tsx
 // routes/user/[id]/page.loader.tsx
-import { LoaderArgs } from '@modern-js/runtime/router';
+import { LoaderFunctionArgs } from '@modern-js/runtime/router';
 
-export default async ({ params }: LoaderArgs) => {
+export default async ({ params }: LoaderFunctionArgs) => {
   const { id } = params;
   const res = await fetch(`https://api/user/${id}`);
   return res.json();
 };
 ```
 
-当访问 `/user/123` 时，`loader` 函数的参数为 `{ params: { id: '123' } }`。
+When accessing `/user/123`, the parameters of the `loader` function are `{ params: { id: '123' } }`.
 
 #### `request`
 
@@ -100,9 +100,9 @@ A common usage scenario is to obtain query parameters via `request`:
 
 ```tsx
 // routes/user/[id]/page.loader.ts
-import { LoaderArgs } from '@modern-js/runtime/router';
+import { LoaderFunctionArgs } from '@modern-js/runtime/router';
 
-export default async ({ request }: LoaderArgs) => {
+export default async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
   const userId = url.searchParams.get('id');
   return queryUser(userId);
@@ -220,6 +220,26 @@ Currently, only CSR is supported, so stay tuned for Streaming SSR.
 
 :::
 
+Add the following code to `user/layout.loader.ts`:
+
+```ts title="routes/user/layout.loader.ts"
+import { defer } from "@edenx/runtime/router"
+
+const loader = () =>
+defer({
+  userInfo: new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          age: 1,
+          name: 'user layout'
+        })
+      }, 1000)
+    })
+  })
+
+export default loader;
+```
+
 Add the following code to `user/layout.tsx`:
 
 ```tsx title="routes/user/layout.tsx"
@@ -230,13 +250,6 @@ import {
   Outlet
 } from '@modern-js/runtime/router';
 
-export const loader = () => {
-  return defer({
-    // fetchUserInfo 是一个异步函数，返回用户信息
-    userInfo: fetchUserInfo(),
-  })
-}
-
 export default function UserLayout() {
   const { userInfo } = useLoaderData() as {userInfo: Promise<UserInfo>};
   return (

package/en/guides/basic-features/env-vars.mdx

@@ -167,4 +167,4 @@ const foo = TWO;
 const foo = 1 + 1;
 ```
 
-In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above，at this time, we need use [`source.define`](/configure/app/source/define)。
+In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above，at this time, we need use [`source.define`](/configure/app/source/define).

package/en/guides/basic-features/html.mdx

@@ -4,7 +4,7 @@ sidebar_position: 9
 ---
 # HTML Template
 
-Modern.js provides **JSX syntax** and **HTML(Ejs) syntax** for customizing HTML template.
+Modern.js provides **JSX syntax** and **HTML(EJS) syntax** for customizing HTML template.
 
 ## JSX syntax
 
@@ -14,14 +14,14 @@ For example the following directory structure:
 
 ```bash
 .
-├── src
-│   ├── Document.tsx
-│   ├── entry-a
-│   │   ├── Document.tsx
-│   │   └── routes
-│   ├── entry-b
-│   │   └── routes
-│   └── modern-app-env.d.ts
+└── src
+    ├── Document.tsx
+    ├── entry-a
+    │   ├── Document.tsx
+    │   └── routes
+    ├── entry-b
+    │    └── routes
+    └── modern-app-env.d.ts
 ```
 
 `entry-a` will take precedence over the `Docoument.[jt]sx` file under the current entry. If the current entry does not have a `Document.[jt]sx` file, such as `entry-b`, it will look for the `Document.[jt]sx` file in the root directory.
@@ -42,7 +42,7 @@ These components are rendered:
 
 - `Body`：Provide the ability of native Body Element, which needs to contain the `<Root>` component internally, and also supports other elements as child elements at the same time, such as adding footers.
 
-- `Root`：React root element `<div id='root'></div>`。the default element id is `id = 'root'`, can set `props.rootId` to change the id。Child components can be added, and will also be rendered into HTML templates, which will be overwritten when React rendering is complete, generally used to implement global Loading.
+- `Root`：React root element `<div id='root'></div>`. the default element id is `id = 'root'`, can set `props.rootId` to change the id.Child components can be added, and will also be rendered into HTML templates, which will be overwritten when React rendering is complete, generally used to implement global Loading.
 
 - `Head`：Provides native Head Element capabilities and automatically populates `<meta>`, as well as the `<Scripts>` component.
 
@@ -193,7 +193,7 @@ In the application root directory, create the `config/html/` directory, which su
 </html>
 ```
 
-HTML Fragments support the use [Lodash template](https://lodash.com/docs/4.17.15#template)。
+HTML Fragments support the use [Lodash template](https://lodash.com/docs/4.17.15#template).
 
 For example, insert a script in `body.html`:
 

package/en/guides/basic-features/mock.mdx

@@ -40,7 +40,7 @@ export default {
 };
 ```
 
-when access `http://localhost:8080/api/getInfo`, the api will return json `{ "data": [1, 2, 3, 4] }`。
+when access `http://localhost:8080/api/getInfo`, the api will return json `{ "data": [1, 2, 3, 4] }`.
 
 ## Return Random Data
 
@@ -77,3 +77,23 @@ export default {
   },
 };
 ```
+
+## Use Mock On Demand
+
+Under the `config/mock/index.ts`, you can also export the `config` to control the Mock service.
+
+```ts
+type MockConfig = {
+  enable: ((req: IncomingMessage, res: ServerResponse) => boolean) | boolean;
+};
+
+export const config = {
+  enable: false
+}
+```
+
+Currently only the `enable` configuration is supported, through which developers can control whether to execute Mock.
+
+:::note
+After modifying `config`, there is no need to restart the service, which will take effect immediately.
+:::

package/en/guides/basic-features/proxy.mdx

@@ -6,7 +6,7 @@ sidebar_position: 5
 
 ## Local Proxy
 
-Modern.js provides a way to configure the development proxy in ['tools.devServer'] (/docs/configure/app/tools/dev-server). For example, to proxy the local interface to an online address:
+Modern.js provides a way to configure the development proxy in [tools.devServer](/configure/app/tools/dev-server). For example, to proxy the local interface to an online address:
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -28,7 +28,7 @@ export default defineConfig({
 when access `http://localhost:8080/go/api`, the response content is returned from [http://www.example.com/](http://www.example.com/).
 
 :::info
-For more detail, see [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)。
+For more detail, see [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware).
 
 :::
 

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

@@ -77,7 +77,7 @@ In order to facilitate the introduction of the relationship between `<Layout>` a
 .
 └── routes
     ├── blog
-    │   └── page.tsx
+    │   └── page.tsx
     ├── layout.tsx
     ├── page.tsx
     └── user
@@ -124,15 +124,15 @@ With a file directory named `[]`, the generated route will be used as a dynamic
 ```
 └── routes
     ├── [id]
-    │   └── page.tsx
+    │   └── page.tsx
     ├── blog
-    │   └── page.tsx
+    │   └── page.tsx
     └── page.tsx
 ```
 
 The `routes/[id]/page.tsx` file is converted to the `/:id` route. Except for the `/blog` route that exactly matches, all other `/xxx` will match this route.
 
-In component, you can get the corresponding named parameters through [useParams](/apis/app/runtime/router/#useparams).
+In component, you can get the corresponding named parameters through [useParams](/apis/app/runtime/router/router#useparams).
 
 ### Catch all routing
 
@@ -148,11 +148,11 @@ For example, the following directory structure:
 └── routes
     ├── $.tsx
     ├── blog
-    │   └── page.tsx
+    │   └── page.tsx
     └── page.tsx
 ```
 
-The `routes/$.tsx` component is rendered when accessing any path that does not match, and again, the remainder of the url can be captured in `$.tsx` using [useParams](/apis/app/runtime/router/#useparams).
+The `routes/$.tsx` component is rendered when accessing any path that does not match, and again, the remainder of the url can be captured in `$.tsx` using [useParams](/apis/app/runtime/router/router#useparams).
 
 ```ts title="$.tsx"
 import { useParams } from '@modern-js/runtime/router';
@@ -215,9 +215,9 @@ When the component exists in the routing directory, all routing switches under t
 .
 └── routes
     ├── blog
-    │   ├── [id]
-    │   │   └── page.tsx
-    │   └── page.tsx
+    │   ├── [id]
+    │   │   └── page.tsx
+    │   └── page.tsx
     ├── layout.tsx
     ├── loading.tsx
     └── page.tsx
@@ -225,6 +225,22 @@ When the component exists in the routing directory, all routing switches under t
 
 When a route jumps from `/` to `/blog`, if the JS Chunk of the `<Blog>` component is not loaded, the component UI exported in `loading.tsx` will be displayed first. But when jumping from `/blog` to `/blog/20220101`, it will not be displayed.
 
+### Redirect
+
+You can redirect routes by creating a [`data loader`](/guides/basic-features/data-fetch) file, Suppose you have the file `routes/user/page.tsx` and you want to redirect the route corresponding to this file, you can create the file `routes/user/page.loader.ts`:
+
+```ts title="routes/user/page.loader.ts"
+import { redirect } from "@edenx/runtime/router"
+
+export default () => {
+  const user = await getUser();
+  if(!user){
+    return redirect('/login');
+  }
+  return null;
+}
+```
+
 ### ErrorBoundary
 
 In each layer directory under `routes/`, the developer can also define a `error.tsx` file, and export a `<ErrorBoundary>` component by default.
@@ -235,7 +251,7 @@ When the component exists in a routing directory, the component render error is
 
 {/* Todo API 路由 */}
 
-Within the `<ErrorBoundary>` component, you can use [useRouteError](/apis/app/runtime/router/#useparams) to get the specific information of the error:
+Within the `<ErrorBoundary>` component, you can use [useRouteError](/apis/app/runtime/router/router#useparams) to get the specific information of the error:
 
 ```tsx
 import { useRouteError } from '@modern-js/runtime/router';
@@ -295,19 +311,17 @@ export default () => {
 When working with SSR, the browser side can get the data returned by `init` during SSR, and the developer can decide whether to retrieve the data on the browser side to overwrite the SSR data, for example:
 
 ```tsx title="src/routes/layout.tsx"
-import {
-  RuntimeContext,
-} from '@modern-js/runtime';
+import { RuntimeContext } from '@modern-js/runtime';
 
 export const init = (context: RuntimeContext) => {
-  if (process.env.JUPITER_TARGET === 'node') {
+  if (process.env.MODERN_TARGET === 'node') {
     return {
       message: 'Hello World By Server',
     }
   } else {
     const { context } = runtimeContext;
     const data = context.getInitData();
-    // 如果没有获取到期望的数据
+    // If do not get the expected data
     if (!data.message) {
       return {
         message: 'Hello World By Client'

package/en/guides/{basic-features → concept}/builder.mdx

@@ -1,7 +1,7 @@
 ---
-title: Builder
 sidebar_position: 2
 ---
+
 # Builder
 
 **Modern.js uses [Modern.js Builder](https://modernjs.dev/builder) to build your Web App.**
@@ -14,7 +14,7 @@ From the perspective of building, Modern.js is divided into three layers, from t
 
 - Upper-layer framework: Modern.js.
 - Universal build engine: Modern.js Builder.
-- Low-level bundlers: webpack and Rspack.
+- Low-level bundlers: webpack and rspack.
 
 <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ maxWidth: '540px' }} />
 

package/en/guides/concept/entries.mdx

@@ -1,7 +1,7 @@
 ---
-title: Entries
-sidebar_position: 2
+sidebar_position: 1
 ---
+
 # Entries
 
 Entries are Modern.js default file convention, and each entry in the project is a separate page, corresponding to a server level route.
@@ -15,11 +15,11 @@ Modern.js initialization project is a single entry, the project structure is as
 ```
 .
 ├── src
-│   ├── modern-app-env.d.ts
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
+│   ├── modern-app-env.d.ts
+│   └── routes
+│       ├── index.css
+│       ├── layout.tsx
+│       └── page.tsx
 ├── package.json
 ├── modern.config.ts
 ├── pnpm-lock.yaml
@@ -41,10 +41,10 @@ After execution, the `src/` directory will become the following structure:
 .
 ├── modern-app-env.d.ts
 ├── myapp
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
+│   └── routes
+│       ├── index.css
+│       ├── layout.tsx
+│       └── page.tsx
 └── new-entry
     └── routes
         ├── index.css

package/en/guides/css/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "CSS Solutions",
+  "position": 4,
+  "collapsed": false
+}

package/en/guides/{basic-features/css → css}/less-sass.mdx

@@ -12,6 +12,6 @@ sidebar_position: 4
 - If you need to customize the configuration of [sass-loader](https://github.com/webpack-contrib/sass-loader), please refer to the [tools.less](/configure/app/tools/sass).
 
 :::tip
-CSS files pre-compiled by Less and Sass will still undergo Modern.js build-in [PostCSS](https://postcss.org/) conversion, which has good browser compatibility. For related content, please refer to [[PostCSS](/guides/basic-features/css/postcss)].
+CSS files pre-compiled by Less and Sass will still undergo Modern.js build-in [PostCSS](https://postcss.org/) conversion, which has good browser compatibility. For related content, please refer to [[PostCSS](/guides/css/postcss)].
 
 :::

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

@@ -0,0 +1,34 @@
+---
+title: Introduction
+sidebar_position: 1
+---
+# Introduction
+
+## Modern.js Introduction
+
+**Modern.js** is a progressive modern web development framework based on React.
+
+The framework has a variety of built-in out-of-the-box tools, excellent build performance, zero-configuration rendering paradigm switching, and integrated API calls. Starting from three solutions (Application solutions, Module solutions, Monorepo solutions), it supports front-end research and development of a complete period.
+
+Modern.js is ByteDance's underlying front-end framework, which has directly or indirectly served thousands of applications, including middle and back-end, PC Web, H5 and other application scenarios. The framework covers a full life cycle, has a complete plugin system, and provides a high degree of customization capabilities. Support custom solutions exclusive to business lines through generator plugin, customize various functional extensions and business requirements, and help developers build applications faster.
+
+## Why Modern.js
+
+Modern.js can provide developers with the ultimate **Development Experience**，make the app 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.
+
+Modern.js support all the configuration and tools required by React applications, and have built-in **additional functions and optimizations**. 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 fetch, state management, etc.
+
+It mainly contains the following features:
+
+- 🪜 **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.
+
+## 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).

package/en/guides/get-started/quick-start.mdx

@@ -1,7 +1,8 @@
 ---
 title: Quick Start
-sidebar_position: 1
+sidebar_position: 2
 ---
+
 # Quick Start
 
 ## Environment
@@ -81,7 +82,6 @@ Features can be enabled through the configuration file, or the default behavior
 ```ts
 import { defineConfig } from '@modern-js/app-tools';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   runtime: {
     router: true,
@@ -129,9 +129,9 @@ The bundle is generated to `dist/` by default, and the directory structure is as
 .
 ├── asset-manifest.json
 ├── html
-│   └── main
+│   └── main
 ├── loader-routes
-│   └── main
+│   └── main
 ├── modern.config.json
 ├── route.json
 └── static

package/en/guides/get-started/upgrade.mdx

@@ -1,7 +1,8 @@
 ---
 title: Upgrade
-sidebar_position: 2
+sidebar_position: 3
 ---
+
 # Upgrade
 
 ## Upgrade with command