@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/zh/intlayer_with_nextjs_compiler.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-06
-title: Next.js i18n - 将现有的 Next.js 应用程序转换为多语言应用程序 2026
-description: 了解如何使用 Intlayer 编译器将现有的 Next.js 应用程序转换为多语言。按照文档进行国际化 (i18n) 并使用 AI 进行翻译。
+updatedAt: 2026-05-31
+title: "Next.js i18n - 翻译你的应用的完整指南"
+description: "告别 i18next。2026 年构建多语言 (i18n) Next.js 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
   - 国际化
   - 文档
@@ -81,7 +81,9 @@ history:
 
 ## 在 Next.js 应用程序中设置 Intlayer 的分步指南
 
-### 步骤 1：安装依赖项
+<Steps>
+
+<Step number={1} title="安装依赖项">
 
 使用您偏好的包管理器安装必要的包：
 
@@ -117,7 +119,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="配置您的项目">
 
 创建一个配置文件来定义应用程序的语言：
 
@@ -174,7 +178,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：
 
@@ -190,29 +196,9 @@ 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>
 
-### 配置 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()],
-  ],
-};
-```
-
-### 步骤 4：页面中的语言环境检测
+<Step number={4} title="页面中的语言环境检测">
 
 清空 `RootLayout` 的内容，并将其替换为以下示例：
 
@@ -255,7 +241,9 @@ const RootLayout = async ({
 export default RootLayout;
 ```
 
-### 步骤 5：声明您的内容（自动）
+</Step>
+
+<Step number={5} title="声明您的内容（自动）">
 
 启用编译器后，您**不再需要**手动声明内容字典（例如 `.content.ts` 文件）。
 
@@ -350,6 +338,160 @@ export default async function Page() {
 - 而 **`IntlayerServerProvider`** 用于在服务器端向子组件提供语言环境。
 
   > 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={8} title="本地化路由代理中间件" isOptional={true}>
+
+如果您希望自动将用户重定向到其偏好的语言环境，请建立代理解析中间件：
+
+```typescript fileName="src/proxy.ts"
+export { intlayerProxy as proxy } from "next-intlayer/proxy";
+
+export const config = {
+  matcher:
+    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
+};
+```
+
+> `intlayerProxy` 用于检测用户的首选语言环境，并根据 [配置文件设置](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md) 将其重定向到适当的 URL。此外，它还支持将用户的首选语言环境保存在 cookie 中。
+> </Step>
+
+<Step number={1} title="提取组件内容" isOptional={true}>
+
+如果您有现有的代码库，转换数千个文件可能会非常耗时。
+
+为了简化此过程，Intlayer 提出了 [编译器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/compiler.md) / [提取器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/extract.md) 来转换您的组件并提取内容。
+
+要进行设置，您可以在 `intlayer.config.ts` 文件中添加 `compiler` 部分：
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... 您的其他配置
+  compiler: {
+    /**
+     * 指示是否应启用编译器。
+     */
+    enabled: true,
+
+    /**
+     * 定义输出文件路径
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * 指示在转换后是否应保存组件。这样，编译器只需运行一次即可转换应用程序，然后即可将其删除。
+     */
+    saveComponents: false,
+
+    /**
+     * 字典键前缀
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+<Tabs>
+ <Tab value='提取命令'>
+
+运行提取器以转换组件并提取内容
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bun x intlayer extract
+```
+
+ </Tab>
+ <Tab value='Babel 编译器'>
+
+```bash packageManager="npm"
+npm install @intlayer/babel --save-dev
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/babel --save-dev
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/babel --save-dev
+```
+
+```bash packageManager="bun"
+bun add @intlayer/babel --dev
+```
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  getExtractPluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // 将组件内容提取到字典中
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+  ],
+};
+```
+
+```bash packageManager="npm"
+npm run build # 或 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 或 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 或 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Or bun run dev
+```
+
+ </Tab>
+</Tabs>
+</Step>
+
+</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 步：填写缺失的翻译
 
@@ -389,21 +531,6 @@ bun x intlayer fill         # 填写缺失的翻译
 
 > 有关更多详细信息，请参阅 [CLI 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/ci.md)
 
-### (可选) 步骤 8：本地化路由代理中间件
-
-如果您希望自动将用户重定向到其偏好的语言环境，请建立代理解析中间件：
-
-```typescript fileName="src/proxy.ts"
-export { intlayerProxy as proxy } from "next-intlayer/proxy";
-
-export const config = {
-  matcher:
-    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
-};
-```
-
-> `intlayerProxy` 用于检测用户的首选语言环境，并根据 [配置文件设置](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md) 将其重定向到适当的 URL。此外，它还支持将用户的首选语言环境保存在 cookie 中。
-
 ### (可选) 第 9 步：更改内容语言环境
 
 在 Next.js 中更改内容语言环境的最推荐方法是使用 `Link` 组件将用户重定向到包含相应语言环境的路由。这将利用 Next.js 的预取功能，并避免页面强制刷新。
@@ -528,119 +655,6 @@ Intlayer 使用模块扩展 (module augmentation) 来利用 TypeScript 的优势
 
 阅读 [Intlayer VS Code 扩展文档](https://intlayer.org/doc/vs-code-extension) 以了解更多关于扩展使用的详细说明。
 
-### (可选) 步骤 1 : 提取组件内容
-
-如果您有现有的代码库，转换数千个文件可能会非常耗时。
-
-为了简化此过程，Intlayer 提出了 [编译器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/compiler.md) / [提取器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/extract.md) 来转换您的组件并提取内容。
-
-要进行设置，您可以在 `intlayer.config.ts` 文件中添加 `compiler` 部分：
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... 您的其他配置
-  compiler: {
-    /**
-     * 指示是否应启用编译器。
-     */
-    enabled: true,
-
-    /**
-     * 定义输出文件路径
-     */
-    output: ({ fileName, extension }) => `./${fileName}${extension}`,
-
-    /**
-     * 指示在转换后是否应保存组件。这样，编译器只需运行一次即可转换应用程序，然后即可将其删除。
-     */
-    saveComponents: false,
-
-    /**
-     * 字典键前缀
-     */
-    dictionaryKeyPrefix: "",
-  },
-};
-
-export default config;
-```
-
-<Tabs>
- <Tab value='提取命令'>
-
-运行提取器以转换组件并提取内容
-
-```bash packageManager="npm"
-npx intlayer extract
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer extract
-```
-
-```bash packageManager="yarn"
-yarn intlayer extract
-```
-
-```bash packageManager="bun"
-bun x intlayer extract
-```
-
- </Tab>
- <Tab value='Babel 编译器'>
-
-```bash packageManager="npm"
-npm install @intlayer/babel --save-dev
-```
-
-```bash packageManager="pnpm"
-pnpm add @intlayer/babel --save-dev
-```
-
-```bash packageManager="yarn"
-yarn add @intlayer/babel --save-dev
-```
-
-```bash packageManager="bun"
-bun add @intlayer/babel --dev
-```
-
-```js fileName="babel.config.js"
-const {
-  intlayerExtractBabelPlugin,
-  getExtractPluginOptions,
-} = require("@intlayer/babel");
-
-module.exports = {
-  presets: ["next/babel"],
-  plugins: [
-    // 将组件内容提取到字典中
-    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
-  ],
-};
-```
-
-```bash packageManager="npm"
-npm run build # 或 npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # 或 pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # 或 yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Or bun run dev
-```
-
- </Tab>
-</Tabs>
-
 ### 进一步深入
 
 您可以实现 [可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md) 或使用 [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md) 来实现内容的外部管理。

package/docs/zh/intlayer_with_nextjs_no_locale_path.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-06
-title: Next.js i18n - 如何翻译Next.js 16 应用（页面路径中不包含 [locale]） 2026
-description: 了解如何在页面路径中不包含 [locale] 的情况下，让你的 Next.js 16 网站支持多语言。按照文档进行国际化 (i18n) 并进行翻译。
+updatedAt: 2026-05-31
+title: "Next.js 16 i18n - 翻译你的应用的完整指南"
+description: "告别 i18next。2026 年构建多语言 (i18n) Next.js 16 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
   - 国际化
   - 文档
@@ -53,19 +53,41 @@ history:
 
 <TOC/>
 
-## 什么是 Intlayer？
+## 为什么选择 Inlayer 而不是替代品？
 
-**Intlayer** 是一个创新的开源国际化（i18n）库，旨在简化现代 Web 应用的多语言支持。Intlayer 与最新的 **Next.js 16** 框架无缝集成，包括其强大的 **App Router**。它针对 **Server Components** 进行了优化以实现高效渲染，并且与 [**Turbopack**](https://nextjs.org/docs/architecture/turbopack) 完全兼容。
+与“next-intl”或“i18next”等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：
 
-使用 Intlayer，您可以：
+**完整的 Next.js 覆盖**
 
-- **通过组件级的声明式字典，轻松管理翻译。**
-- **动态本地化元数据**、路由和内容。
-- **在客户端和服务器端组件中都能访问翻译。**
-- **通过自动生成的类型确保 TypeScript 支持**，提升自动补全和错误检测。
-- **利用高级功能**，如动态语言检测和切换。
+Intlayer 经过优化，可以与 **服务器组件** 配合使用，以实现高效渲染，并且与 [**Turbopack**](https://nextjs.org/docs/architecture/turbopack) 完全兼容。它不会阻止静态渲染，并提供中间件以及扩展国际化 (i18n) 所需的所有功能。
 
-> Intlayer 与 Next.js 12、13、14 和 16 兼容。如果您使用 Next.js Page Router，可参考此 [指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_nextjs_page_router.md)。对于使用 App Router 的 Next.js 12、13、14，请参考此 [指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_nextjs_14.md)。
+> Intlayer 兼容 Next.js 12、13、14、15 和 16。如果您使用 Next.js Pages Router，可以参考此[指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_page_router.md)。
+> 区域设置路由对于 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)。
+
+**捆绑尺寸**
+
+不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
+
+**可维护性**
+
+确定应用程序内容的范围**有利于大型应用程序的维护**。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有**完全类型化 (fully typed)**，以确保您的内容的准确性。
+
+**人工智能代理**
+
+共置内容**减少大型语言模型 (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) 更加流畅。
+
+**自动化**
+
+使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个**编译器**来自动提取内容，以及一个[网络平台](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)来帮助**在后台翻译**。
+
+**表现**
+
+将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。
+
+**无需开发即可扩展**
+
+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)** 来帮助您管理多语言内容**实时**，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。
 
 ---
 
@@ -103,7 +125,9 @@ bun x intlayer init
 
 将 Intlayer 与 Next.js 集成的包。它为 Next.js 的国际化提供了 context providers（上下文提供者）和 hooks（钩子）。此外，它还包含用于将 Intlayer 集成到 Webpack 或 Turbopack 的 Next.js 插件，以及用于检测用户首选 locale、管理 cookies 和处理 URL 重定向的 proxy。
 
-### 步骤 2：配置您的项目
+<Steps>
+
+<Step number={2} title="配置您的项目">
 
 下面是我们将创建的最终结构：
 
@@ -157,94 +181,9 @@ export default config;
 ```
 
 > 通过此配置文件，您可以设置本地化 URL、代理重定向、cookie 名称、内容声明的位置和扩展名、在控制台禁用 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
+> </Step>
 
-### 第 3 步：在 Next.js 配置中集成 Intlayer
-
-配置您的 Next.js 设置以使用 Intlayer：
-
-```typescript fileName="next.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { NextConfig } from "next";
-import { withIntlayer } from "next-intlayer/server";
-
-const nextConfig: NextConfig = {
-  /* 在此处填写配置选项 */
-};
-
-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 的环境变量。此外，它还提供别名以优化性能，并确保与 server components 的兼容性。
-
-> `withIntlayer()` 函数是一个返回 Promise 的函数。它允许在构建开始前准备 intlayer 字典。如果你想与其他插件一起使用它，可以对其使用 await。示例：
->
-> ```ts
-> const nextConfig = await withIntlayer(nextConfig);
-> const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);
->
-> export default nextConfigWithOtherPlugins;
-> ```
->
-> 如果你想以同步方式使用它，可以使用 `withIntlayerSync()` 函数。示例：
->
-> ```ts
-> const nextConfig = withIntlayerSync(nextConfig);
-> const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);
->
-> export default nextConfigWithOtherPlugins;
-> ```
->
-> Intlayer 会根据命令行标志 `--webpack`、`--turbo` 或 `--turbopack` 以及你当前的 **Next.js** 版本自动检测项目是使用 **webpack** 还是 **Turbopack**。
->
-> 自 `next>=16` 起，如果你使用 **Rspack**，必须通过禁用 Turbopack 明确强制 Intlayer 使用 webpack 配置：
->
-> ```ts
-> withRspack(withIntlayer(nextConfig, { enableTurbopack: false }));
-> ```
-
-### 第4步：定义动态 locale 路由
-
-从 `RootLayout` 中删除所有内容，并用下面的代码替换：
-
-```tsx {3} fileName="src/app/layout.tsx" codeFormat={["typescript", "esm"]}
-import type { Metadata } from "next";
-import type { ReactNode } from "react";
-import "./globals.css";
-import { IntlayerClientProvider, LocalPromiseParams } from "next-intlayer";
-import { getHTMLTextDir, getIntlayer } from "intlayer";
-import { getLocale } from "next-intlayer/server";
-export { generateStaticParams } from "next-intlayer";
-
-export const generateMetadata = async (): Promise<Metadata> => {
-  const locale = await getLocale();
-  const { title, description, keywords } = getIntlayer("metadata", locale);
-
-  return {
-    title,
-    description,
-    keywords,
-  };
-};
-
-const RootLayout = async ({
-  children,
-}: Readonly<{
-  children: ReactNode;
-}>) => {
-  const locale = await getLocale();
-
-  return (
-    <html lang={locale} dir={getHTMLTextDir(locale)}>
-      <IntlayerClientProvider defaultLocale={locale}>
-        <body>{children}</body>
-      </IntlayerClientProvider>
-    </html>
-  );
-};
-
-export default RootLayout;
-```
-
-### 步骤 5：声明您的内容
+<Step number={5} title="声明您的内容">
 
 创建并管理您的内容声明以存储翻译：
 
@@ -362,7 +301,9 @@ export default pageContent;
 
 > 有关详细信息，请参阅 [内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
 
-### 步骤 6：在代码中使用内容
+</Step>
+
+<Step number={6} title="在代码中使用内容">
 
 在应用程序中随处访问你的内容字典：
 
@@ -464,7 +405,9 @@ export const ServerComponentExample: FC = () => {
 
 > 若要了解有关 `useIntlayer` hook 的更多信息，请参阅 [文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/next-intlayer/useIntlayer.md)。
 
-### （可选）步骤 7：配置 Proxy 以进行 locale 检测
+</Step>
+
+<Step number={7} title="配置 Proxy 以进行 locale 检测">
 
 设置 Proxy 以检测用户的首选 locale：
 
@@ -488,7 +431,9 @@ import { customProxy } from "@utils/customProxy";
 export const proxy = multipleProxies([intlayerProxy, customProxy]);
 ```
 
-### （可选）步骤 8：更改您内容的语言
+</Step>
+
+<Step number={8} title="更改您内容的语言">
 
 要在 Next.js 中更改内容的语言，推荐的方法是使用 `Link` 组件将用户重定向到相应的本地化页面。`Link` 组件支持页面预取，这有助于避免整页重新加载。
 
@@ -574,7 +519,9 @@ export const myServerAction = async () => {
 >
 > 这可确保基于可用上下文选择最合适的 locale。
 
-### （可选）步骤 10：优化你的 bundle 大小
+</Step>
+
+<Step number={10} title="优化你的 bundle 大小">
 
 在使用 `next-intlayer` 时，字典默认会被包含到每个页面的 bundle 中。为了优化 bundle 大小，Intlayer 提供了一个可选的 SWC 插件，它使用宏智能替换 `useIntlayer` 调用。这样只有实际使用这些字典的页面的 bundle 才会包含相应字典。
 
@@ -601,6 +548,95 @@ bun add @intlayer/swc --dev
 > 注意：该包默认不安装，因为 SWC 插件在 Next.js 中仍然是实验性的。将来可能会发生变化。
 
 > 注意：如果你将选项设置为 `importMode: 'dynamic'` 或 `importMode: 'fetch'`，它将依赖 Suspense，因此你必须在一个 `Suspense` 边界中包裹你的 `useIntlayer` 调用。这意味着你不能在页面 / 布局组件的顶层直接使用 `useIntlayer`。
+> </Step>
+
+</Steps>
+
+### 第 3 步：在 Next.js 配置中集成 Intlayer
+
+配置您的 Next.js 设置以使用 Intlayer：
+
+```typescript fileName="next.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { NextConfig } from "next";
+import { withIntlayer } from "next-intlayer/server";
+
+const nextConfig: NextConfig = {
+  /* 在此处填写配置选项 */
+};
+
+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 的环境变量。此外，它还提供别名以优化性能，并确保与 server components 的兼容性。
+
+> `withIntlayer()` 函数是一个返回 Promise 的函数。它允许在构建开始前准备 intlayer 字典。如果你想与其他插件一起使用它，可以对其使用 await。示例：
+>
+> ```ts
+> const nextConfig = await withIntlayer(nextConfig);
+> const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);
+>
+> export default nextConfigWithOtherPlugins;
+> ```
+>
+> 如果你想以同步方式使用它，可以使用 `withIntlayerSync()` 函数。示例：
+>
+> ```ts
+> const nextConfig = withIntlayerSync(nextConfig);
+> const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);
+>
+> export default nextConfigWithOtherPlugins;
+> ```
+>
+> Intlayer 会根据命令行标志 `--webpack`、`--turbo` 或 `--turbopack` 以及你当前的 **Next.js** 版本自动检测项目是使用 **webpack** 还是 **Turbopack**。
+>
+> 自 `next>=16` 起，如果你使用 **Rspack**，必须通过禁用 Turbopack 明确强制 Intlayer 使用 webpack 配置：
+>
+> ```ts
+> withRspack(withIntlayer(nextConfig, { enableTurbopack: false }));
+> ```
+
+### 第4步：定义动态 locale 路由
+
+从 `RootLayout` 中删除所有内容，并用下面的代码替换：
+
+```tsx {3} fileName="src/app/layout.tsx" codeFormat={["typescript", "esm"]}
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import "./globals.css";
+import { IntlayerClientProvider, LocalPromiseParams } from "next-intlayer";
+import { getHTMLTextDir, getIntlayer } from "intlayer";
+import { getLocale } from "next-intlayer/server";
+export { generateStaticParams } from "next-intlayer";
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const locale = await getLocale();
+  const { title, description, keywords } = getIntlayer("metadata", locale);
+
+  return {
+    title,
+    description,
+    keywords,
+  };
+};
+
+const RootLayout = async ({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) => {
+  const locale = await getLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <IntlayerClientProvider defaultLocale={locale}>
+        <body>{children}</body>
+      </IntlayerClientProvider>
+    </html>
+  );
+};
+
+export default RootLayout;
+```
 
 ### 在 Turbopack 上监视字典更改