@modern-js/main-doc 2.19.2-alpha.0 → 2.21.0

package/docs/en/guides/topic-detail/generator/plugin/abstract.mdx

@@ -10,7 +10,7 @@ Modern.js provides an initialization template that is versatile and can meet som
 
 When you use Modern.js in depth, you will inevitably find that every time you create a project, you will make some similar changes specific to your own project, such as modifying the sample code, adding some configuration, enabling some functions, etc.
 
-The generator plugin can help you precipitate these individual or team-specific changes. Simply bring the `--plugin` parameter when executing `npx @modern-js/create` to avoid the need to repeatedly modify the project every time the project is created..
+The generator plugin can help you precipitate these individual or team-specific changes. Simply bring the `--plugin` parameter when executing `npx @modern-js/create@latest` to avoid the need to repeatedly modify the project every time the project is created..
 
 The generator plugin is based on the initialization template project provided by the Modern.js, providing methods to add, delete and modify templates, and modifying `package.json`, `modernConfig` configuration and opening functions in a fast way.
 

package/docs/en/guides/topic-detail/generator/plugin/develop.mdx

@@ -9,7 +9,7 @@ sidebar_position: 3
 Modern.js provides a generator plugin to create a generator plugin project, you can directly execute the following command to create:
 
 ```bash
-npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
+npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
 ```
 
 Different plugin types will ask different questions. You can choose the plugin type according to your needs.

package/docs/en/guides/topic-detail/generator/plugin/use.mdx

@@ -9,7 +9,7 @@ sidebar_position: 2
 You can use the generator plugin directly by executing the following command:
 
 ```bash
-npx @modern-js/create --plugin <pluginName>
+npx @modern-js/create@latest --plugin <pluginName>
 ```
 
 The plugin parameter supports multiple declarations, which means that multiple generator plugins are used at the same time.

package/docs/en/guides/topic-detail/generator/project.mdx

@@ -11,7 +11,7 @@ Modern.js provides `@modern-js/create` as a project generator for Modern.js proj
 There is no need to install `@modern-js/create` globally, just execute the tool directly with npx:
 
 ```bash
-npx @modern-js/create [projectDir]
+npx @modern-js/create@latest [projectDir]
 ```
 
 :::info
@@ -32,7 +32,7 @@ When executing the above command, the `projectDir` folder will be created in the
 Get the `@modern-js/create` tool version.
 
 ```bash
-$ npx @modern-js/create --version
+$ npx @modern-js/create@latest --version
 
 [INFO] @modern-js/create v2.0.0
 ```
@@ -52,7 +52,7 @@ By default, `@modern-js/create` will have interaction problems such as language
 This field is a JSON character string, for example when running a package manager:
 
 ```bash
-npx @modern-js/create --config '{"packageManager": "pnpm"}'
+npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
 ```
 
 Specific configuration information viewable [Project Configuration](/guides/topic-detail/generator/config/common).
@@ -105,7 +105,7 @@ For custom generator plugins, please refer to [Development Generator Plugin](/gu
 
 Specifies the microgenerator.
 
-By default, `@modern-js/create` will execute the microgenerator Modern.js framework build-in. If you need to execute a customized microgenerator, and you need to use the posture of `npx @modern-js/create`, you can use this parameter directly.
+By default, `@modern-js/create` will execute the microgenerator Modern.js framework build-in. If you need to execute a customized microgenerator, and you need to use the posture of `npx @modern-js/create@latest`, you can use this parameter directly.
 
 For custom microgenerators, please refer to [Develop Microgenerator](/guides/topic-detail/generator/codesmith/introduce).
 

package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -27,7 +27,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir masterApp && cd masterApp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After the project is created, we can enable the `micro frontend` through `pnpm run new`:
@@ -109,7 +109,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir masterApp && cd masterApp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After the project is created, we can enable the `micro frontend` function through `pnpm run new`:
@@ -137,7 +137,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir table && cd table
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:
@@ -186,7 +186,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir table && cd table
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:

package/docs/en/tutorials/first-app/c01-start.mdx

@@ -17,7 +17,7 @@ We create a new directory and initialize the project via the command line tool:
 
 ```bash
 mkdir myapp && cd myapp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 import InitApp from "@site-docs-en/components/init-app"

package/docs/zh/apis/app/runtime/router/router.mdx

@@ -106,6 +106,28 @@ function App() {
 }
 ```
 
+### useRouteError
+
+```ts
+export declare function useRouteError(): unknown;
+```
+
+`useRouteError` 返回离 ErrorBoundary 定义最近的路由渲染错误信息。
+
+```tsx
+import { useRouteError } from '@modern-js/runtime/router';
+const ErrorBoundary = () => {
+  const error = useRouteError();
+  return (
+    <div>
+      <h1>{error.status}</h1>
+      <h2>{error.message}</h2>
+    </div>
+  );
+};
+export default ErrorBoundary;
+```
+
 ## 组件
 
 ### Link

package/docs/zh/components/init-rspack-app.mdx

@@ -1,5 +1,5 @@
 ```bash
-$ npx @modern-js/create myapp
+$ npx @modern-js/create@latest myapp
 ? 请选择你想创建的工程类型：Web 应用
 ? 请选择开发语言：TS
 ? 请选择包管理工具：pnpm

package/docs/zh/components/ua-polyfill.mdx

@@ -0,0 +1,39 @@
+### 运行时按需 Polyfill
+
+Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) 信息的运行时按需 Polyfill 方案，相比于 Babel 优势如下：
+
+- 不会插入到代码中，只根据访问页面的设备，按需下发 Polyfill 代码 ，减少整体代码体积。
+- 相同浏览器会公用一份 Polyfill 代码。因此，随着项目越来越多，基于 UA 的 Polyfill 代码下发速度会越来越快，综合速度超过常规方案。
+
+可以通过微生成器开启该功能：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「基于 UA 的 Polyfill」功能
+```
+
+执行命令后，在 `modern.config.ts` 中注册 Polyfill 插件:
+
+```ts title="modern.config.ts"
+import polyfillPlugin from '@modern-js/plugin-polyfill';
+
+export default defineConfig({
+  plugins: [..., polyfillPlugin()],
+});
+```
+
+配置 `output.polyfill` 为 `ua` 并且执行 `pnpm run build && pnpm run serve` 启动服务器后，访问页面可以看到 HTML 产物中包含如下脚本:
+
+```js
+<script src="/__polyfill__" crossorigin></script>
+```
+
+在 Chrome 51 下访问页面可以看到 `http://localhost:8080/__polyfill__` 返回内容如下:
+
+![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
+
+:::caution 注意
+该功能只有在使用 Modern.js 内置的 Web Server 时才会生效。
+
+如果有自定义模版的需求，请参考 [HTML 模板](/guides/basic-features/html.html)。通过 `html.template` 或 `tools.html` 手动修改模版时，可能会导致该功能无法正确生效。
+:::

package/docs/zh/configure/app/output/temp-dir.mdx

@@ -0,0 +1,22 @@
+---
+sidebar_label: tempDir
+---
+
+# output.tempDir
+
+- **类型：** `string`
+- **默认值：** `''`
+
+项目开发或构建时，Modern.js 会生成真实的 Webpack 入口和 HTML 模板，并放在临时目录下。
+
+如果希望由多个配置同时启动某项目，可以通过该配置，将文件生成到不同的临时目录下，避免相互干扰。配置可以是相对路径或绝对路径，但应避免项目外的路径。
+
+示例
+
+```ts
+export default {
+  output: {
+    tempDir: path.join('node_modules', '.temp-dir'),
+  }
+}
+```

package/docs/zh/configure/app/security/nonce.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: nonce
+---
+
+# security.nonce
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [security.nonce](https://modernjs.dev/builder/api/config-security.html#securitynonce)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/security/nonce.md';
+
+<Main />

package/docs/zh/guides/advanced-features/compatibility.mdx

@@ -1,26 +1,25 @@
 ---
-title: 客户端兼容性
 sidebar_position: 5
 ---
-# 客户端兼容性
+
+# 浏览器兼容性
 
 ## Browserslist 配置
 
-Modern.js 支持在项目根目录 `package.json` 文件中的 `browserslist` 字段（或单独的 `.browserslistrc` 文件）指定项目覆盖的目标浏览器范围。该值会被 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 和 [`autoprefixer`](https://github.com/postcss/autoprefixer) 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。
+Modern.js 支持设置 Web 应用需要兼容的浏览器范围，你可以在 `.browserslistrc` 文件里设置 [Browserslist](https://browsersl.ist/) 的值。
 
-Modern.js 中默认值如下:
+当你创建一个新的 Modern.js 项目时，默认会包含一份 `.browserslistrc` 配置，这表示 JavaScript 代码会被编译至 ES6 格式。
 
-```js
-['> 0.01%', 'not dead', 'not op_mini all'];
+```yaml title=".browserslistrc"
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10
 ```
 
-可以在[这里](https://github.com/browserslist/browserslist)了解如何自定义浏览器范围。
-
-查看 Modern.js Builder 文档了解更多 [Browserslist](https://modernjs.dev/builder/guide/advanced/browserslist.html) 相关内容。
-
-:::note
-Modern.js 支持配置 [output.overrideBrowserslist](/configure/app/output/override-browserslist) 覆盖默认 browserslist 值。
-
+:::tip
+请查看 [Modern.js Builder - 设置浏览器范围](https://modernjs.dev/builder/guide/advanced/browserslist) 来了解更多内容。
 :::
 
 ## Polyfill
@@ -36,42 +35,6 @@ Modern.js 在编译时默认通过 [core-js](https://github.com/zloirock/core-js
 
 :::
 
-### 运行时按需 Polyfill
-
-Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) 信息的运行时按需 Polyfill 方案，相比于 Babel 优势如下：
-
-- 不会插入到代码中，只根据访问页面的设备，按需下发 Polyfill 代码 ，减少整体代码体积。
-- 相同浏览器会公用一份 Polyfill 代码。因此，随着项目越来越多，基于 UA 的 Polyfill 代码下发速度会越来越快，综合速度超过常规方案。
-
-可以通过微生成器开启该功能：
-
-```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「基于 UA 的 Polyfill」功能
-```
-
-执行命令后，在 `modern.config.ts` 中注册 Polyfill 插件:
+import UAPolyfill from '@site-docs/components/ua-polyfill';
 
-```ts title="modern.config.ts"
-import polyfillPlugin from '@modern-js/plugin-polyfill';
-
-export default defineConfig({
-  plugins: [..., polyfillPlugin()],
-});
-```
-
-配置 `output.polyfill` 为 `ua` 并且执行 `pnpm run build && pnpm run serve` 启动服务器后，访问页面可以看到 HTML 产物中包含如下脚本:
-
-```js
-<script src="/__polyfill__" crossorigin></script>
-```
-
-在 Chrome 51 下访问页面可以看到 `http://localhost:8080/__polyfill__` 返回内容如下:
-
-![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
-
-:::caution 注意
-该功能只有在使用 Modern.js 内置的 Web Server 时才会生效。
-
-如果有自定义模版的需求，请参考 [HTML 模板](/guides/basic-features/html.html)。通过 `html.template` 或 `tools.html` 手动修改模版时，可能会导致该功能无法正确生效。
-:::
+<UAPolyfill />

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

@@ -58,3 +58,40 @@ import appTools, { defineConfig } from '@modern-js/app-tools';
 :::tip
 从 webpack 迁移至 Rspack 时，存在一些构建能力和配置上的差异，详情可参考：[配置差异](https://modernjs.dev/builder/guide/advanced/rspack-start.html#从-webpack-迁移到-rspack)
 :::
+
+## Rspack 和 Modern.js 的版本关系
+
+通常情况下，Modern.js 内会集成 Rspack 的最新版本，通过 `npx modern upgrade` 即可将当前项目中的 Modern.js 相关依赖以及内置的 Rspack 更新至最新版本。
+
+但 Modern.js 对于 Rspack 的依赖方式为锁版本方式(非自动升级)，由于发版周期不同步等原因，可能会出现 Modern.js 内集成的 Rspack 版本落后于 Rspack 最新版本的情况。
+
+当你执行 dev / build 命令时，Modern.js 会自动打印当前使用的 Rspack 版本：
+
+![rspack_version_log](https://lf3-static.bytednsdoc.com/obj/eden-cn/6221eh7uhbfvhn/modern/img_v2_dfcf051f-21db-4741-a108-d9f7a82c3abg.png)
+
+#### 修改内置 Rspack 版本
+
+可以使用 pnpm / yarn / npm 等包管理工具自带的依赖升级功能来将 Rspack 强制升级到指定版本。
+
+以 pnpm 为例，可通过 `overrides` 以下依赖更新 Rspack 版本:
+
+```json title=package.json
+{
+  "pnpm": {
+    "overrides": {
+      "@rspack/core": "nightly",
+      "@rspack/dev-client": "nightly",
+      "@rspack/dev-middleware": "nightly",
+      "@rspack/plugin-html": "nightly",
+      "@rspack/postcss-loader": "nightly"
+    }
+  }
+}
+```
+
+:::tip Nightly 版本介绍
+每天，Rspack 会自动构建基于最新代码的 nightly 版本，用于测试和及早发现错误。
+通常情况下，这些版本是可用的。如果发现问题，我们会及时进行修复。但是，如果 Rspack 有一些 break change，需要 Modern.js 同步修改代码，那么我们建议等待下一个 Modern.js 版本再进行更新。
+:::
+
+如果想了解其他包管理工具锁定依赖版本的示例，可以参考：[锁定子依赖](/guides/get-started/upgrade.html#%E9%94%81%E5%AE%9A%E5%AD%90%E4%BE%9D%E8%B5%96)。

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

@@ -14,7 +14,7 @@ Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过
 Modern.js 推荐使用约定式路由做路由的管理，通过 Modern.js 的[约定式（嵌套）路由](/guides/basic-features/routes#约定式路由)，每个路由组件(`layout.ts` 或 `page.ts`)可以有一个同名的 `loader` 文件，该 `loader` 文件需要导出一个函数，函数会在组件渲染之前执行，为路由组件提供数据。
 
 :::info
-Modern.js v1 支持通过 [useLoader](#useloader旧版) 获取数据，这已经不是我们推荐的用法，除迁移过程外，不推荐两者混用。
+Modern.js v1 支持通过 [useLoader](#useloader（旧版）) 获取数据，这已经不是我们推荐的用法，除迁移过程外，不推荐两者混用。
 
 :::
 
@@ -22,7 +22,7 @@ Modern.js v1 支持通过 [useLoader](#useloader旧版) 获取数据，这已经
 
 路由组件如 `layout.ts` 或 `page.ts`，可以定义同名的 `loader` 文件，`loader` 文件中导出一个函数，该函数提供组件所需的数据，然后在路由组件中通过 `useLoaderData` 函数获取数据，如下面示例：
 
-```
+```bash
 .
 └── routes
     ├── layout.tsx
@@ -66,19 +66,19 @@ export default async (): Promise<ProfileData> => {
 在 SSR 环境下，不管是首屏，还是在客户端的导航，`loader` 函数只会在服务端执行，这里可以调用任意的 Node.js API，同时这里使用的任何依赖和代码都不会包含在客户端的 bundle 中。
 
 :::info
-在以后的版本中，Modern.js 可能会支持在 CSR 环境下，`loader` 函数也在服务端运行，以提高性能和安全性，所以这里建议尽可能地保证 loader 的纯粹，只做数据获取的场景。
+在以后的版本中，Modern.js 可能会支持在 CSR 环境下，`loader` 函数也在服务端运行，以提高性能和安全性，所以这里建议尽可能地保证 `loader` 的纯粹，只做数据获取的场景。
 
 :::
 
-当在客户端导航时，基于 Modern.js 的[约定式路由](/guides/basic-features/routes)，所有的 loader 函数会并行执行（请求），即当访问 `/user/profile` 时，`/user` 和 `/user/profile` 下的 loader 函数都会并行执行（请求），以提高客户端的性能。
+当在客户端导航时，基于 Modern.js 的[约定式路由](/guides/basic-features/routes)，所有的 `loader` 函数会并行执行（请求），即当访问 `/user/profile` 时，`/user` 和 `/user/profile` 下的 loader 函数都会并行执行（请求），以提高客户端的性能。
 
 ### `loader` 函数
 
 `loader` 函数有两个入参：
 
-#### `Params`
+#### `params`
 
-当路由文件通过 `[]` 时，会作为[动态路由](/guides/basic-features/routes#动态路由)，动态路由片段会作为参数传入 loader 函数：
+当路由文件通过 `[]` 时，会作为[动态路由](/guides/basic-features/routes#动态路由)，动态路由片段会作为参数传入 `loader` 函数：
 
 ```tsx
 // routes/user/[id]/page.loader.ts
@@ -149,7 +149,7 @@ async function loader() {
 
 ### 错误处理
 
-在 `loader` 函数中，可以通过 `throw error` 或者 `throw response` 的方式处理错误，当 `loader` 函数中有错误被抛出时，Modern.js 会停止执行当前 loader 中的代码，并将前端 UI 切换到定义的 [`ErrorBoundary`](/guides/basic-features/routes#错误处理) 组件：
+在 `loader` 函数中，可以通过 `throw error` 或者 `throw response` 的方式处理错误，当 `loader` 函数中有错误被抛出时，Modern.js 会停止执行当前 `loader` 中的代码，并将前端 UI 切换到定义的 [`ErrorBoundary`](/guides/basic-features/routes#错误处理) 组件：
 
 ```tsx
 // routes/user/profile/page.loader.ts
@@ -178,14 +178,14 @@ export default ErrorBoundary;
 
 ### 获取上层组件的数据
 
-很多场景下，子组件需要获取到祖先组件 loader 中的数据，你可以通过 `useRouteLoaderData` 方便地获取到祖先组件的数据：
+很多场景下，子组件需要获取到祖先组件 `loader` 中的数据，你可以通过 `useRouteLoaderData` 方便地获取到祖先组件的数据：
 
 ```tsx
 // routes/user/profile/page.tsx
 import { useRouteLoaderData } from '@modern-js/runtime/router';
 
 export default function UserLayout() {
-  // 获取 routes/user/layout.loader.ts 中 loader 返回的数据
+  // 获取 routes/user/layout.loader.ts 中 `loader` 返回的数据
   const data = useRouteLoaderData('user/layout');
   return (
     <div>
@@ -198,7 +198,7 @@ export default function UserLayout() {
 
 `userRouteLoaderData` 接受一个参数 `routeId`，在使用约定式路由时，Modern.js 会为你自动生成`routeId`，`routeId` 的值是对应组件相对于 `src/routes` 的路径，如上面的例子中，子组件想要获取 `routes/user/layout.tsx` 中 loader 返回的数据，`routeId` 的值就是 `user/layout`。
 
-在多 entry（MPA） 场景下，`routeId` 的值需要加上对应 entry 的 name，entry name 非指定情况下一般是 entry 目录名，如以下目录结构：
+在多入口（MPA） 场景下，`routeId` 的值需要加上对应入口的名称，入口名称非指定情况下一般是入口的目录名，如以下目录结构：
 
 ```bash
 .
@@ -211,7 +211,7 @@ export default function UserLayout() {
                 └── layout.tsx
 ```
 
-如果想获取 `entry1/routes/layout.tsx` 中 loader 返回的数据，`routeId` 的值就是 `entry1_layout`。
+如果想获取 `entry1/routes/layout.tsx` 中 `loader` 返回的数据，`routeId` 的值就是 `entry1_layout`。
 
 ### (WIP)Loading UI
 
@@ -341,11 +341,11 @@ export default async (): Promise<ProfileData> => {
 
 ### 常见问题
 
-1. loader 和 BFF 函数的关系
+1. `loader` 和 BFF 函数的关系
 
-在 CSR 项目中，loader 在客户端执行，在 loader 可以直接调用 BFF 函数进行接口请求。
+在 CSR 项目中，`loader` 在客户端执行，在 `loader` 可以直接调用 BFF 函数进行接口请求。
 
-在 SSR 项目中，每个 loader 也是一个服务端接口，我们推荐使用 loader 替代 http method 为 `get` 的 BFF 函数，作为接口层，避免多一层转发和执行。
+在 SSR 项目中，每个 `loader` 也是一个服务端接口，我们推荐使用 `loader` 替代 http method 为 `get` 的 BFF 函数，作为接口层，避免多一层转发和执行。
 
 
 ## useLoader（旧版）

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

@@ -18,7 +18,7 @@ Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，
 
 Modern.js 支持了业界流行的约定式路由模式：**嵌套路由**，使用嵌套路由时，页面的路由 与 UI 结构是相呼应的，我们将会详细介绍这种路由模式。
 
-```
+```bash
 /user/johnny/profile                  /user/johnny/posts
 +------------------+                  +-----------------+
 | User             |                  | User            |
@@ -154,7 +154,7 @@ export default () => {
 
 通过 `[]` 命名的文件目录，生成的路由会作为动态路由。例如以下文件目录：
 
-```
+```bash
 └── routes
     ├── [id]
     │   └── page.tsx
@@ -173,7 +173,7 @@ export default () => {
 
 通过 `[$]` 命名的文件目录，生成的路由会作为动态路由。例如以下文件目录：
 
-```
+```bash
 └── routes
     ├── user
     │   └── [id$]
@@ -199,7 +199,7 @@ export default () => {
 
 例如以下目录结构：
 
-```
+```bash
 └── routes
     ├── $.tsx
     ├── blog
@@ -222,7 +222,7 @@ params['*']; // => 'aaa/bbb'
 
 当目录名以 \_\_ 开头时，对应的目录名不会转换为实际的路由路径，例如以下文件目录：
 
-```
+```bash
 .
 └── routes
     ├── __auth
@@ -245,7 +245,7 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 
 因此 Modern.js 支持了通过 `.` 来分割路由片段，代替文件目录。例如，当需要 `/user/profile/2022/edit` 时，可以直接创建如下文件：
 
-```
+```bash
 └── routes
     ├── user.profile.[id].edit
     │      └── page.tsx
@@ -281,7 +281,7 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 
 当定义 `loading.tsx` 时，就相当于以下布局：
 
-```tsx title="当路由为 / 时"
+```tsx title=当路由为"/"时
 <Layout>
   <Suspense fallback={<Loading />}>
     <Page />
@@ -289,7 +289,7 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 </Layout>
 ```
 
-```tsx title="当路由为 /blog 时"
+```tsx title=当路由为"/blog"时
 <Layout>
   <Suspense fallback={<Loading />}>
     <BlogPage />
@@ -297,7 +297,7 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 </Layout>
 ```
 
-```tsx title="当路由为 /blog/123 时"
+```tsx title=当路由为"/blog/123"时
 <Layout>
   <Suspense fallback={<Loading />}>
     <BlogIdPage />
@@ -306,8 +306,8 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 ```
 
 :::info
-当目录的 layout 组件不存在时，该目录下的 loading 组件也不会生效。
-Modern.js 建议必须有根 layout 和根 loading。
+当目录的 Layout 组件不存在时，该目录下的 Loading 组件也不会生效。
+Modern.js 建议必须有根 Layout 和根 Loading。
 
 :::
 
@@ -317,7 +317,7 @@ Modern.js 建议必须有根 layout 和根 loading。
 
 ### 路由重定向
 
-可以通过创建 [`data loader`](/guides/basic-features/data-fetch) 文件做路由的重定向，如有文件 `routes/user/page.tsx`，想对这个文件对应的路由做重定向，可以创建 `routes/user/page.loader.ts` 文件：
+可以通过创建 [`Data Loader`](/guides/basic-features/data-fetch) 文件做路由的重定向，如有文件 `routes/user/page.tsx`，想对这个文件对应的路由做重定向，可以创建 `routes/user/page.loader.ts` 文件：
 
 ```ts title="routes/user/page.loader.ts"
 import { redirect } from '@modern-js/runtime/router';
@@ -335,13 +335,13 @@ export default () => {
 
 `routes/` 下每一层目录中，开发者同样可以定义一个 `error.tsx` 文件，默认导出一个 `<ErrorBoundary>` 组件。
 
-当有路由目录下存在该组件时，组件渲染出错会被 ErrorBoundary 组件捕获。当目录未定义 `layout.tsx` 文件时，`<ErrorBoundary>` 组件不会生效。
+当有路由目录下存在该组件时，组件渲染出错会被 `ErrorBoundary` 组件捕获。当目录未定义 `layout.tsx` 文件时，`<ErrorBoundary>` 组件不会生效。
 
 `<ErrorBoundary>` 可以返回出错时的 UI 视图，当前层级未声明 `<ErrorBoundary>` 组件时，错误会向上冒泡到更上层的组件，直到被捕获或抛出错误。同时，当组件出错时，只会影响捕获到该错误的路由组件及子组件，其他组件的状态和视图不受影响，可以继续交互。
 
 {/* Todo API 路由 */}
 
-在 `<ErrorBoundary>` 组件内，可以使用 [useRouteError](/apis/app/runtime/router/router#useparams) 获取的错误的具体信息：
+在 `<ErrorBoundary>` 组件内，可以使用 [useRouteError](/apis/app/runtime/router/router#userouteerror) 获取的错误的具体信息：
 
 ```tsx
 import { useRouteError } from '@modern-js/runtime/router';
@@ -359,7 +359,7 @@ export default ErrorBoundary;
 
 ### 运行时配置
 
-在每个根 `Layout` 组件中(`routes/layout.ts`)，可以动态地定义应用运行时配置：
+在每个根 `Layout` 组件中(`routes/layout.ts`)，可以动态地定义运行时配置：
 
 ```tsx title="src/routes/layout.tsx"
 // 定义运行时配置
@@ -447,29 +447,29 @@ export const init = (context: RuntimeContext) => {
 ### 预加载
 
 在约定式路由下， Modern.js 会根据路由，自动地对路由进行分片，当用户访问具体的路由时，会自动加载对应的分片，这样可以有效地减少首屏加载的时间。但这也带来了一个问题，当用户访问一个路由时，如果该路由对应的分片还未加载完成，就会出现白屏的情况。
-这种情况下你可以通过定义 `loading` 组件，在静态资源加载完成前，展示一个自定义的 `loading` 组件。
+这种情况下你可以通过定义 `Loading` 组件，在静态资源加载完成前，展示一个自定义的 `Loading` 组件。
 
 为了进一步提升用户体验，减少 loading 的时间，Modern.js 支持在 Link 组件上定义 `prefetch` 属性，可以提前对静态资源和数据进行加载， `prefetch` 属性有三个可选值：
 
-```
+```tsx
 <Link prefetch="intent" to="page">
 ```
 
 :::info
 - 该功能目前仅在 Webpack 项目中支持，Rspack 项目暂不支持。
-- 对数据的预加载目前只会预加载 SSR 项目中 [data loader](/guides/basic-features/data-fetch) 中返回的数据。
+- 对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data-fetch) 中返回的数据。
 
 :::
 
 - `none`， 默认值，不会做 prefetch，没有任何额外的行为。
-- `intent`，这是我们推荐大多数场景下使用的值，当你把鼠标放在 Link 上时，会自动开始加载对应的分片和 data loader 中定义的数据，当鼠标移开时，会自动取消加载。在我们的测试中，即使是快速点击，也能减少大约 200ms 的加载时间。
-- `render`，当 Link 组件渲染时，就会加载对应的分片和 data loader 中定义的数据。
+- `intent`，这是我们推荐大多数场景下使用的值，当你把鼠标放在 Link 上时，会自动开始加载对应的分片和 Data Loader 中定义的数据，当鼠标移开时，会自动取消加载。在我们的测试中，即使是快速点击，也能减少大约 200ms 的加载时间。
+- `render`，当 Link 组件渲染时，就会加载对应的分片和 Data Loader 中定义的数据。
 
 #### 常见问题
 
 1. 使用 `render` 和不根据路由做静态资源分片的区别？
 
-- 使用 `render` 可以指定哪些路由在首屏时，进行加载，同时你可以通过对渲染的控制，仅当 Link 组件进入到可视区域时，才对 Link 组件进行渲染。
+- 使用 `render` 可以指定哪些路由在首屏时，进行加载，同时你可以通过对渲染的控制，仅当 `Link` 组件进入到可视区域时，才对 `Link` 组件进行渲染。
 - 使用 `render`，仅在空闲时对静态资源进行加载，不会与首屏静态资源抢占网络。
 - 在 SSR 场景下，也会对数据进行预取。
 
@@ -484,7 +484,7 @@ import Practice from '@site-docs/components/routes-practice'
 
 ## 自控式路由
 
-以 `src/App.tsx` 为约定的入口，Modern.js 不会多路由做额外的操作，开发者可以自行使用 React Router 6 的 API 进行开发，例如：
+以 `src/App.tsx` 为约定的入口，Modern.js 不会对路由做额外的操作，开发者可以自行使用 [React Router 6](https://reactrouter.com/en/main) 的 API 进行开发，例如：
 
 ```ts title="src/App.tsx"
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';

package/docs/zh/guides/get-started/quick-start.mdx

@@ -18,13 +18,13 @@ Modern.js 提供了 `@modern-js/create` 生成器来创建项目，不要全局
 
 ```bash
 mkdir myapp && cd myapp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 也可以直接用新目录创建项目：
 
 ```bash
-npx @modern-js/create myapp
+npx @modern-js/create@latest myapp
 ```
 
 ## 初始化项目

package/docs/zh/guides/topic-detail/changesets/changelog.mdx

@@ -164,7 +164,7 @@ module.exports = {
 
 自定义 Changelog 还可以使用模块工程方案进行管理，提供通用方案。
 
-#### 使用 `npx @modern-js/create` 创建模块工程方案。
+#### 使用 `npx @modern-js/create@latest` 创建模块工程方案。
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块