@intlayer/docs 9.0.0-canary.2 → 9.0.0-canary.20

package/docs/zh/intlayer_with_nextjs_compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Next.js 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -84,32 +84,54 @@ author: aymericzip
 
 <Steps>
 
+<Steps>
+
 <Step number={1} title="安装依赖项">
 
 使用您偏好的包管理器安装必要的包：
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> `--interactive` 标志是可选的。如果您是 AI 代理，请使用 `intlayer-cli init`。
+
+> 该命令将检测您的环境并安装所需的软件包。例如：
+
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
 npm install @intlayer/babel --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
 pnpm add @intlayer/babel --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
 yarn add @intlayer/babel --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer next-intlayer
 bun add @intlayer/babel --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -189,9 +211,7 @@ export default config;
 import type { NextConfig } from "next";
 import { withIntlayer } from "next-intlayer/server";
 
-const nextConfig: NextConfig = {
-  /* 这里可选填写额外的 Next.js 配置 */
-};
+const nextConfig: NextConfig = {/* 这里可选填写额外的 Next.js 配置 */};
 
 export default withIntlayer(nextConfig);
 ```
@@ -199,7 +219,30 @@ export default withIntlayer(nextConfig);
 > Next.js 插件 `withIntlayer()` 用于将 Intlayer 与 Next.js 集成。它确保字典文件的构建，并在开发模式下监视它们。它在 [Webpack](https://webpack.js.org/) 或 [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) 环境中定义 Intlayer 环境变量。此外，它还提供别名以优化性能，并保留与服务器组件的兼容性。
 > </Step>
 
-<Step number={4} title="页面中的语言环境检测">
+<Step number={4} title="配置 Babel">
+
+Intlayer 编译器需要 Babel 来提取和优化您的内容。更新您的 `babel.config.js`（或 `babel.config.json`）以包含 Intlayer 插件：
+
+```typescript fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getOptimizePluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
+};
+```
+
+</Step>
+
+<Step number={5} title="页面中的语言环境检测">
 
 清空 `RootLayout` 的内容，并将其替换为以下示例：
 
@@ -244,7 +287,7 @@ export default RootLayout;
 
 </Step>
 
-<Step number={5} title="声明您的内容（自动）">
+<Step number={6} title="声明您的内容（自动）">
 
 启用编译器后，您**不再需要**手动声明内容字典（例如 `.content.ts` 文件）。
 
@@ -341,6 +384,46 @@ export default async function Page() {
   > Layout and page cannot share a common server context because the server context system is based on a per-request data store (via [React's cache](https://react.dev/reference/react/cache) mechanism), causing each "context" to be re-created for different segments of the application. Placing the provider in a shared layout would break this isolation, preventing the correct propagation of the server context values to your server components.
   > </Step>
 
+<Step number={7} title="填写缺失的翻译" isOptional={true}>
+
+Intlayer 提供了一个 CLI 工具来帮助您填写缺失的翻译。您可以使用 `intlayer` 命令来测试并从您的代码中填写缺失的翻译。
+
+```bash packageManager="npm"
+npx intlayer test         # 测试是否有缺失的翻译
+```
+
+```bash packageManager="yarn"
+yarn intlayer test         # 测试是否有缺失的翻译
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer test         # 测试是否有缺失的翻译
+```
+
+```bash packageManager="bun"
+bun x intlayer test         # 测试是否有缺失的翻译
+```
+
+```bash packageManager="npm"
+npx intlayer fill         # 填写缺失的翻译
+```
+
+```bash packageManager="yarn"
+yarn intlayer fill         # 填写缺失的翻译
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer fill         # 填写缺失的翻译
+```
+
+```bash packageManager="bun"
+bun x intlayer fill         # 填写缺失的翻译
+```
+
+> 有关更多详细信息，请参阅 [CLI 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/ci.md)
+
+</Step>
+
 <Step number={8} title="本地化路由代理中间件" isOptional={true}>
 
 如果您希望自动将用户重定向到其偏好的语言环境，请建立代理解析中间件：
@@ -357,7 +440,89 @@ export const config = {
 > `intlayerProxy` 用于检测用户的首选语言环境，并根据 [配置文件设置](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md) 将其重定向到适当的 URL。此外，它还支持将用户的首选语言环境保存在 cookie 中。
 > </Step>
 
-<Step number={1} title="提取组件内容" isOptional={true}>
+<Step number={9} title="更改内容语言环境" isOptional={true}>
+
+在 Next.js 中更改内容语言环境的最推荐方法是使用 `Link` 组件将用户重定向到包含相应语言环境的路由。这将利用 Next.js 的预取功能，并避免页面强制刷新。
+
+```tsx fileName="src/components/localeSwitcher/LocaleSwitcher.tsx"
+"use client";
+
+import type { FC } from "react";
+import { Locales, getHTMLTextDir, getLocaleName } from "intlayer";
+import { useLocale } from "next-intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>
+      <div id="localePopover" popover="auto">
+        {availableLocales.map((localeItem) => (
+          <button
+            key={localeItem}
+            aria-current={locale === localeItem ? "page" : undefined}
+            onClick={() => setLocale(localeItem)}
+          >
+            <span>
+              {/* 语言环境 - 例如：ZH */}
+              {localeItem}
+            </span>
+            <span>
+              {/* 语言环境自身的名称 - 例如：中文 */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* 当前语言环境下的名称 - 例如：Francés（当当前语言环境为 Locales.SPANISH 时） */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* 英语下的名称 - 例如：Chinese */}
+              {getLocaleName(localeItem, Locales.ENGLISH)}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+```
+
+> 另一种方法是使用 `useLocale` 钩子提供的 `setLocale` 函数。该函数不支持页面预取。有关更多详细信息，请查看 [`useLocale` 钩子文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/next-intlayer/useLocale.md)。
+
+</Step>
+
+<Step number={10} title="优化包体积" isOptional={true}>
+
+使用 `next-intlayer` 时，字典默认会包含在每个页面的包中。为了优化包体积，Intlayer 提供了一个可选的 SWC 插件，它利用宏智能地优化 `useIntlayer` 调用。这确保了字典仅包含在实际使用它们的页面的包中。
+
+要启用此优化，请安装 `@intlayer/swc` 包。安装后，`next-intlayer` 会自动检测并使用该插件：
+
+```bash packageManager="npm"
+npm install @intlayer/swc --save-dev
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/swc --save-dev
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/swc --save-dev
+```
+
+```bash packageManager="bun"
+bun add @intlayer/swc --dev
+```
+
+> 注意：此优化仅适用于 Next.js 13 及以上版本。
+
+> 注意：由于 Next.js SWC 插件仍处于试验阶段，该包默认未安装。未来可能会有所改变。
+
+> 注意：如果您设置了 `importMode: 'dynamic'` 或 `importMode: 'fetch'`（在字典配置中），它将依赖于 Suspense，因此您需要将 `useIntlayer` 调用包裹在 `Suspense` 边界内。这意味着您无法直接在页面/布局组件的顶层使用 `useIntlayer`。
+
+</Step>
+
+<Step number={11} title="提取组件内容" isOptional={true}>
 
 如果您有现有的代码库，转换数千个文件可能会非常耗时。
 
@@ -420,6 +585,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel 编译器'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 ```bash packageManager="npm"
 npm install @intlayer/babel --save-dev
 ```
@@ -473,142 +640,7 @@ bun run build # Or bun run dev
 
 </Steps>
 
-### 配置 Babel
-
-Intlayer 编译器需要 Babel 来提取和优化您的内容。更新您的 `babel.config.js`（或 `babel.config.json`）以包含 Intlayer 插件：
-
-```typescript fileName="babel.config.js"
-const {
-  intlayerExtractBabelPlugin,
-  intlayerOptimizeBabelPlugin,
-  getExtractPluginOptions,
-  getOptimizePluginOptions,
-} = require("@intlayer/babel");
-
-module.exports = {
-  presets: ["next/babel"],
-  plugins: [
-    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
-    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
-  ],
-};
-```
-
-### (可选) 第 7 步：填写缺失的翻译
-
-Intlayer 提供了一个 CLI 工具来帮助您填写缺失的翻译。您可以使用 `intlayer` 命令来测试并从您的代码中填写缺失的翻译。
-
-```bash packageManager="npm"
-npx intlayer test         # 测试是否有缺失的翻译
-```
-
-```bash packageManager="yarn"
-yarn intlayer test         # 测试是否有缺失的翻译
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer test         # 测试是否有缺失的翻译
-```
-
-```bash packageManager="bun"
-bun x intlayer test         # 测试是否有缺失的翻译
-```
-
-```bash packageManager="npm"
-npx intlayer fill         # 填写缺失的翻译
-```
-
-```bash packageManager="yarn"
-yarn intlayer fill         # 填写缺失的翻译
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer fill         # 填写缺失的翻译
-```
-
-```bash packageManager="bun"
-bun x intlayer fill         # 填写缺失的翻译
-```
-
-> 有关更多详细信息，请参阅 [CLI 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/ci.md)
-
-### (可选) 第 9 步：更改内容语言环境
-
-在 Next.js 中更改内容语言环境的最推荐方法是使用 `Link` 组件将用户重定向到包含相应语言环境的路由。这将利用 Next.js 的预取功能，并避免页面强制刷新。
-
-```tsx fileName="src/components/localeSwitcher/LocaleSwitcher.tsx"
-"use client";
-
-import type { FC } from "react";
-import { Locales, getHTMLTextDir, getLocaleName } from "intlayer";
-import { useLocale } from "next-intlayer";
-
-export const LocaleSwitcher: FC = () => {
-  const { locale, availableLocales, setLocale } = useLocale();
-
-  return (
-    <div>
-      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>
-      <div id="localePopover" popover="auto">
-        {availableLocales.map((localeItem) => (
-          <button
-            key={localeItem}
-            aria-current={locale === localeItem ? "page" : undefined}
-            onClick={() => setLocale(localeItem)}
-          >
-            <span>
-              {/* 语言环境 - 例如：ZH */}
-              {localeItem}
-            </span>
-            <span>
-              {/* 语言环境自身的名称 - 例如：中文 */}
-              {getLocaleName(localeItem, locale)}
-            </span>
-            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* 当前语言环境下的名称 - 例如：Francés（当当前语言环境为 Locales.SPANISH 时） */}
-              {getLocaleName(localeItem)}
-            </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* 英语下的名称 - 例如：Chinese */}
-              {getLocaleName(localeItem, Locales.ENGLISH)}
-            </span>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
-```
-
-> 另一种方法是使用 `useLocale` 钩子提供的 `setLocale` 函数。该函数不支持页面预取。有关更多详细信息，请查看 [`useLocale` 钩子文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/next-intlayer/useLocale.md)。
-
-### (可选) 第 10 步：优化包体积
-
-使用 `next-intlayer` 时，字典默认会包含在每个页面的包中。为了优化包体积，Intlayer 提供了一个可选的 SWC 插件，它利用宏智能地优化 `useIntlayer` 调用。这确保了字典仅包含在实际使用它们的页面的包中。
-
-要启用此优化，请安装 `@intlayer/swc` 包。安装后，`next-intlayer` 会自动检测并使用该插件：
-
-```bash packageManager="npm"
-npm install @intlayer/swc --save-dev
-```
-
-```bash packageManager="pnpm"
-pnpm add @intlayer/swc --save-dev
-```
-
-```bash packageManager="yarn"
-yarn add @intlayer/swc --save-dev
-```
-
-```bash packageManager="bun"
-bun add @intlayer/swc --dev
-```
-
-> 注意：此优化仅适用于 Next.js 13 及以上版本。
-
-> 注意：由于 Next.js SWC 插件仍处于试验阶段，该包默认未安装。未来可能会有所改变。
-
-> 注意：如果您设置了 `importMode: 'dynamic'` 或 `importMode: 'fetch'`（在字典配置中），它将依赖于 Suspense，因此您需要将 `useIntlayer` 调用包裹在 `Suspense` 边界内。这意味着您无法直接在页面/布局组件的顶层使用 `useIntlayer`。
+</Steps>
 
 ### TypeScript 配置
 

package/docs/zh/intlayer_with_nextjs_no_locale_path.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 16 i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Next.js 16 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -31,7 +31,7 @@ author: aymericzip
 
 <Tabs defaultTab="video">
   <Tab label="视频" value="video">
-  
+
 <iframe title="适用于 Next.js 的最佳 i18n 解决方案？探索 Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/e_PPG7PTqGU?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
   </Tab>
@@ -98,24 +98,44 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 
 使用 npm 安装所需的包：
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> `--interactive` 标志是可选的。如果您是 AI 代理，请使用 `intlayer-cli init`。
+
+> 该命令将检测您的环境并安装所需的软件包。例如：
+
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer next-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -563,9 +583,7 @@ bun add @intlayer/swc --dev
 import type { NextConfig } from "next";
 import { withIntlayer } from "next-intlayer/server";
 
-const nextConfig: NextConfig = {
-  /* 在此处填写配置选项 */
-};
+const nextConfig: NextConfig = {/* 在此处填写配置选项 */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/zh/intlayer_with_nextjs_page_router.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js Page Router i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Next.js Page Router 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -58,11 +58,16 @@ author: aymericzip
   </Tab>
 </Tabs>
 
+## 目录
+
+<TOC/>
+
 ## 为什么选择 Inlayer 而不是替代品？
 
 与“next-intl”或“i18next”等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：
 
-**完整的 Next.js 覆盖**
+<AccordionGroup>
+<Accordion header="完整的 Next.js 覆盖">
 
 Intlayer 经过优化，可以与 **服务器组件** 配合使用，以实现高效渲染，并且与 [**Turbopack**](https://nextjs.org/docs/architecture/turbopack) 完全兼容。它不会阻止静态渲染，并提供中间件以及扩展国际化 (i18n) 所需的所有功能。
 
@@ -70,56 +75,93 @@ Intlayer 经过优化，可以与 **服务器组件** 配合使用，以实现
 > 区域设置路由对于 SEO、Bundle 大小和性能很有用。如果不需要，可以参考这个[指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md)。
 > 对于带有 App Router 的 Next.js 12、13、14 和 15，请参阅此[指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_14.md)。
 
-**捆绑尺寸**
+</Accordion>
+
+<Accordion header="捆绑尺寸">
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
-**可维护性**
+</Accordion>
+
+<Accordion header="可维护性">
 
 确定应用程序内容的范围**有利于大型应用程序的维护**。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有**完全类型化 (fully typed)**，以确保您的内容的准确性。
 
-**人工智能代理**
+</Accordion>
+
+<Accordion header="人工智能代理">
 
 共置内容**减少大型语言模型 (LLM) 所需的上下文**。 Intlayer 还附带了一套工具，例如用于测试缺失翻译的 **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 和 **[agent技能](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**，使 AI 代理的开发者体验 (DX) 更加流畅。
 
-**自动化**
+</Accordion>
+
+<Accordion header="自动化">
 
 使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个**编译器**来自动提取内容，以及一个[网络平台](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)来帮助**在后台翻译**。
 
-**表现**
+</Accordion>
+
+<Accordion header="表现">
 
 将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。
 
-**无需开发即可扩展**
+</Accordion>
+
+<Accordion header="无需开发即可扩展">
 
 Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)**和一个**[完整的 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** 来帮助您管理多语言内容**实时**，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## 使用 Page Router 在 Next.js 应用中设置 Intlayer 的分步指南
 
-### 第一步：安装依赖
+<Steps>
+
+<Step number={1} title="安装依赖">
 
 使用您喜欢的包管理器安装必要的包：
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> `--interactive` 标志是可选的。如果您是 AI 代理，请使用 `intlayer-cli init`。
+
+> 该命令将检测您的环境并安装所需的软件包。例如：
+
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer next-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -130,7 +172,9 @@ bun x intlayer init
 
   将 Intlayer 与 Next.js 集成的包。它提供了 Next.js 国际化的上下文提供者和钩子。此外，还包含用于将 Intlayer 集成到 [Webpack](https://webpack.js.org/) 或 [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) 的 Next.js 插件，以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的中间件。
 
-### 第2步：配置您的项目
+</Step>
+
+<Step number={2} title="配置您的项目">
 
 创建一个配置文件以定义您的应用程序支持的语言：
 
@@ -154,7 +198,9 @@ export default config;
 
 > 通过此配置文件，您可以设置本地化的 URL、中间件重定向、Cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
 
-### 第 3 步：将 Intlayer 集成到 Next.js 配置中
+</Step>
+
+<Step number={3} title="将 Intlayer 集成到 Next.js 配置中">
 
 修改您的 Next.js 配置以集成 Intlayer：
 
@@ -171,7 +217,9 @@ export default withIntlayer(nextConfig);
 
 > `withIntlayer()` Next.js 插件用于将 Intlayer 集成到 Next.js 中。它确保内容声明文件的构建，并在开发模式下监视这些文件。它在 [Webpack](https://webpack.js.org/) 或 [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) 环境中定义 Intlayer 环境变量。此外，它提供别名以优化性能，并确保与服务器组件的兼容性。
 
-### 第四步：配置中间件以检测语言环境
+</Step>
+
+<Step number={4} title="配置中间件以检测语言环境">
 
 设置中间件以自动检测并处理用户的首选语言环境：
 
@@ -186,7 +234,9 @@ export const config = {
 
 > 调整 `matcher` 参数以匹配您的应用程序路由。更多详情，请参阅 [Next.js 关于配置 matcher 的文档](https://nextjs.org/docs/app/building-your-application/routing/middleware)。
 
-### 第5步：定义动态本地化路由
+</Step>
+
+<Step number={5} title="定义动态本地化路由">
 
 实现动态路由，根据用户的语言环境提供本地化内容。
 
@@ -345,7 +395,9 @@ export const getStaticPaths: GetStaticPaths = () => {
 
 > `getStaticPaths` 和 `getStaticProps` 确保您的应用程序在 Next.js 页面路由中预构建所有本地化所需的页面。此方法减少了运行时计算，从而提升用户体验。更多详情，请参阅 Next.js 文档中的 [`getStaticPaths`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths) 和 [`getStaticProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props)。
 
-### 第6步：声明您的内容
+</Step>
+
+<Step number={6} title="声明您的内容">
 
 创建并管理您的内容声明以存储翻译。
 
@@ -397,7 +449,9 @@ export default homeContent;
 
 有关声明内容的更多信息，请参阅[内容声明指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
 
-### 第7步：在代码中使用内容
+</Step>
+
+<Step number={7} title="在代码中使用内容">
 
 在整个应用程序中访问您的内容字典以显示翻译内容。
 
@@ -466,6 +520,8 @@ const ComponentExample = () => {
 
 <Steps>
 
+</Step>
+
 <Step number={8} title="元数据的国际化">
 
 如果您想要国际化您的元数据，例如页面标题，可以使用 Next.js 页面路由器提供的 `getStaticProps` 函数。在该函数内部，您可以通过 `getIntlayer` 函数获取内容以翻译您的元数据。