@intlayer/docs 8.12.4 → 9.0.0-canary.10

package/docs/zh/intlayer_with_nextjs_15.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 15 i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Next.js 15 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -28,6 +28,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "初始化历史"
+author: aymericzip
 ---
 
 # 使用Intlayer翻译您的Next.js 15 | 国际化(i18n)
@@ -64,11 +65,16 @@ history:
 
 请参阅 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-next-15-template)。
 
+## 目录
+
+<TOC/>
+
 ## 为什么选择 Inlayer 而不是替代品？
 
 与“next-intl”或“i18next”等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：
 
-**完整的 Next.js 覆盖**
+<AccordionGroup>
+<Accordion header="完整的 Next.js 覆盖">
 
 Intlayer 经过优化，可以与 **服务器组件** 配合使用，以实现高效渲染，并且与 [**Turbopack**](https://nextjs.org/docs/architecture/turbopack) 完全兼容。它不会阻止静态渲染，并提供中间件以及扩展国际化 (i18n) 所需的所有功能。
 
@@ -76,56 +82,89 @@ 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>
+
 ---
 
 ## 在 Next.js 应用中设置 Intlayer 的分步指南
 
-### 第一步：安装依赖
+<Steps>
+
+<Step number={1} title="安装依赖">
 
 使用 npm 安装所需的包：
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--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**
@@ -136,7 +175,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="配置您的项目">
 
 Here is the final structure that we will make:
 
@@ -188,7 +229,9 @@ export default config;
 
 > 通过此配置文件，你可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
 
-### 第三步：在你的 Next.js 配置中集成 Intlayer
+</Step>
+
+<Step number={3} title="在你的 Next.js 配置中集成 Intlayer">
 
 配置你的 Next.js 以使用 Intlayer：
 
@@ -205,7 +248,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 环境变量。此外，它还提供别名以优化性能，并确保与服务器组件的兼容性。
 
-### 第4步：定义动态本地化路由
+</Step>
+
+<Step number={4} title="定义动态本地化路由">
 
 清空 `RootLayout` 中的所有内容，并替换为以下代码：
 
@@ -263,7 +308,9 @@ export default LocaleLayout;
 
 > `generateStaticParams` 确保您的应用程序为所有语言环境预构建必要的页面，从而减少运行时计算并提升用户体验。更多详情，请参阅 [Next.js 关于 generateStaticParams 的文档](https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#generate-static-params)。
 
-### 第5步：声明您的内容
+</Step>
+
+<Step number={5} title="声明您的内容">
 
 创建并管理您的内容声明以存储翻译：
 
@@ -310,7 +357,9 @@ export default pageContent;
 
 > 更多详情，请参考[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
 
-### 第6步：在代码中使用内容
+</Step>
+
+<Step number={6} title="在代码中使用内容">
 
 在整个应用程序中访问您的内容字典：
 
@@ -420,6 +469,8 @@ export const ServerComponentExample: FC = () => {
 
 <Steps>
 
+</Step>
+
 <Step number={7} title="配置中间件以检测语言环境">
 
 设置中间件以检测用户的首选语言环境：
@@ -836,6 +887,22 @@ bun add @intlayer/swc --dev
 
 </Steps>
 
+### 在 Turbopack 上监视字典更改
+
+当使用 `next dev --turbopack` 命令将 Turbopack 用作开发服务器时，默认情况下不会自动检测字典更改。
+
+出现此限制是因为 Turbopack 无法并行运行 webpack 插件来监视内容文件中的更改。要解决此问题，您需要使用 `intlayer watch` 命令同时运行开发服务器和 Intlayer 构建监视器。
+
+```json5 fileName="package.json"
+{
+  // ... 您现有的 package.json 配置
+  "scripts": {
+    // ... 您现有的脚本配置
+    "dev": "intlayer watch --with 'next dev --turbopack'",
+  },
+}
+```
+
 ### 配置 TypeScript
 
 Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库更健壮。

package/docs/zh/intlayer_with_nextjs_16.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 16 i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Next.js 16 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -30,6 +30,7 @@ history:
   - version: 7.0.0
     date: 2025-06-29
     changes: "初始化历史记录"
+author: aymericzip
 ---
 
 # 使用 Intlayer 翻译您的 Next.js 16 网站 | 国际化 (i18n)
@@ -74,7 +75,8 @@ history:
 
 与“next-intl”或“i18next”等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：
 
-**完整的 Next.js 覆盖**
+<AccordionGroup>
+<Accordion header="完整的 Next.js 覆盖">
 
 Intlayer 经过优化，可以与 **服务器组件** 配合使用，以实现高效渲染，并且与 [**Turbopack**](https://nextjs.org/docs/architecture/turbopack) 完全兼容。它不会阻止静态渲染，并提供中间件以及扩展国际化 (i18n) 所需的所有功能。
 
@@ -82,56 +84,89 @@ 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>
+
 ---
 
 ## 在 Next.js 应用程序中设置 Intlayer 的分步指南
 
-### 第 1 步：安装依赖项
+<Steps>
+
+<Step number={1} title="安装依赖项">
 
 使用 npm 安装必要的包：
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--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**
@@ -142,7 +177,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="配置您的项目">
 
 这是我们将创建的最终结构：
 
@@ -194,7 +231,9 @@ export default config;
 
 > 通过此配置文件，您可以设置本地化 URL、代理重定向、cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
 
-### 第 3 步：在 Next.js 配置中集成 Intlayer
+</Step>
+
+<Step number={3} title="在 Next.js 配置中集成 Intlayer">
 
 配置您的 Next.js 设置以使用 Intlayer：
 
@@ -237,7 +276,9 @@ export default withIntlayer(nextConfig);
 > withRspack(withIntlayer(nextConfig, { enableTurbopack: false }));
 > ```
 
-### 第 4 步：定义动态语言环境路由
+</Step>
+
+<Step number={4} title="定义动态语言环境路由">
 
 从 `RootLayout` 中删除所有内容，并将其替换为以下代码：
 
@@ -300,7 +341,9 @@ export default LocaleLayout;
 
 > Intlayer 与 `export const dynamic = 'force-static';` 配合使用，以确保为所有语言环境预构建页面。
 
-### 第 5 步：声明您的内容
+</Step>
+
+<Step number={5} title="声明您的内容">
 
 创建并管理您的内容声明以存储翻译：
 
@@ -346,7 +389,9 @@ export default pageContent;
 
 > 有关更多详细信息，请参阅[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
 
-### 第 6 步：在代码中利用内容
+</Step>
+
+<Step number={6} title="在代码中利用内容">
 
 在整个应用程序中访问您的内容字典：
 
@@ -435,7 +480,9 @@ export const ServerComponentExample: FC = () => {
 
 > 如果您的应用程序已经存在，您可以结合使用 [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) 在一秒钟内转换成干个组件。
 
-### （可选）第 7 步：配置代理进行语言环境检测
+</Step>
+
+<Step number={7} title="配置代理进行语言环境检测" isOptional={true}>
 
 设置代理以检测用户首选的语言环境：
 
@@ -459,7 +506,9 @@ import { customProxy } from "@utils/customProxy";
 export const proxy = multipleProxies([intlayerProxy, customProxy]);
 ```
 
-### （可选）第 8 步：元数据的国际化
+</Step>
+
+<Step number={8} title="元数据的国际化" isOptional={true}>
 
 在您想要国际化元数据（例如页面标题）的情况下，您可以使用 Next.js 提供的 `generateMetadata` 函数。在其中，您可以从 `getIntlayer` 函数中检索内容来翻译您的元数据。
 
@@ -594,7 +643,9 @@ export const generateMetadata = async ({
 
 > 在 [Next.js 官方文档](https://nextjs.org/docs/app/building-your-application/optimizing/metadata) 上了解更多关于元数据优化的信息。
 
-### （可选）第 9 步：sitemap.xml 和 robots.txt 的国际化
+</Step>
+
+<Step number={9} title="sitemap.xml 和 robots.txt 的国际化" isOptional={true}>
 
 要对您的 `sitemap.xml` 和 `robots.txt` 进行国际化，您可以使用 Intlayer 提供的 `getMultilingualUrls` 函数。此函数允许您为站点地图生成多语言 URL。
 
@@ -657,7 +708,9 @@ export default robots;
 
 > 在 [Next.js 官方文档](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap) 上了解更多关于站点地图优化的信息。在 [Next.js 官方文档](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots) 上了解更多关于 robots.txt 优化的信息。
 
-### （可选）第 10 步：更改内容的语言
+</Step>
+
+<Step number={10} title="更改内容的语言" isOptional={true}>
 
 要在 Next.js 中更改内容的语言，推荐的方法是使用 `Link` 组件将用户重定向到相应的本地化页面。`Link` 组件支持页面预取，这有助于避免全页面重新加载。
 
@@ -748,7 +801,9 @@ return <button onClick={() => setLocale(Locales.FRENCH)}>更改为法语</button
 > - [`dir` 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/dir)
 > - [`aria-current` 属性](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
-### （可选）第 11 步：创建本地化链接组件
+</Step>
+
+<Step number={11} title="创建本地化链接组件" isOptional={true}>
 
 为了确保您的应用程序导航尊重当前语言环境，您可以创建一个自定义的 `Link` 组件。此组件会自动为内部 URL 添加当前语言的前缀。例如，当讲法语的用户点击“关于”页面的链接时，他们会被重定向到 `/fr/about` 而不是 `/about`。
 
@@ -816,7 +871,9 @@ export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
 
 通过在整个应用程序中集成此 `Link` 组件，您可以维持连贯且具有语言意识的用户体验，同时还能从改进的 SEO 和可用性中获益。
 
-### （可选）第 12 步：在 Server Actions 中获取当前语言环境
+</Step>
+
+<Step number={12} title="在 Server Actions 中获取当前语言环境" isOptional={true}>
 
 如果您在 Server Action 中需要活动语言环境（例如，为了本地化电子邮件或运行语言环境感知逻辑），请从 `next-intlayer/server` 调用 `getLocale`：
 
@@ -841,7 +898,9 @@ export const myServerAction = async () => {
 >
 > 这确保了根据可用上下文选择最合适的语言环境。
 
-### （可选）第 13 步：优化您的Bundle 大小
+</Step>
+
+<Step number={13} title="优化您的Bundle 大小" isOptional={true}>
 
 使用 `next-intlayer` 时，默认情况下每个页面的包中都会包含字典。为了优化Bundle 大小，Intlayer 提供了一个可选的 SWC 插件，该插件可以使用宏智能地替换 `useIntlayer` 调用。这确保了字典仅包含在实际使用它们的页面的包中。
 
@@ -869,73 +928,9 @@ bun add @intlayer/swc --dev
 
 > 注意：如果您将选项设置为 `importMode: 'dynamic'` 或 `importMode: 'fetch'`（在 `dictionary` 配置中），它将依赖于 Suspense，因此您必须将 `useIntlayer` 调用包装在 `Suspense` 边界中。这意味着，您将无法直接在页面/布局组件的顶层使用 `useIntlayer`。
 
-### 在 Turbopack 上监视字典更改
-
-当使用 Turbopack 作为您的开发服务器并运行 `next dev` 命令时，默认情况下不会自动检测字典更改。
-
-出现这种限制是因为 Turbopack 无法并行运行 webpack 插件以监视内容文件中的更改。要解决此问题，您需要使用 `intlayer watch` 命令同时运行开发服务器和 Intlayer 构建监视器。
-
-```json5 fileName="package.json"
-{
-  // ... 您的现有 package.json 配置
-  "scripts": {
-    // ... 您的现有 scripts 配置
-    "dev": "intlayer watch --with 'next dev'",
-  },
-}
-```
-
-> 如果您使用的是 next-intlayer@<=6.x.x，则需要保留 `--turbopack` 标志以使 Next.js 16 应用程序在 Turbopack 下正常工作。我们建议使用 next-intlayer@>=7.x.x 以避免此限制。
-
-### 配置 TypeScript
-
-Intlayer 使用模块扩充来利用 TypeScript 的优势，并使您的代码库更强大。
-
-![自动补全](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![翻译错误](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-确保您的 TypeScript 配置包含自动生成的类型。
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 您的现有 TypeScript 配置
-  "include": [
-    // ... 您的现有 TypeScript 配置
-    ".intlayer/**/*.ts", // 包含自动生成的类型
-  ],
-}
-```
-
-### Git 配置
-
-建议忽略 Intlayer 生成的文件。这可以避免将它们提交到您的 Git 仓库。
-
-为此，您可以将以下指令添加到您的 `.gitignore` 文件中：
-
-```plaintext fileName=".gitignore"
-# 忽略 Intlayer 生成的文件
-.intlayer
-```
-
-### VS Code 扩展
-
-为了改善您使用 Intlayer 的开发体验，您可以安装官方的 **Intlayer VS Code 扩展**。
-
-[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-此扩展提供：
-
-- 翻译键的**自动补全**。
-- 缺失翻译的**实时错误检测**。
-- 已翻译内容的**内联预览**。
-- 轻松创建和更新翻译的**快速操作**。
-
-有关如何使用该扩展的更多详细信息，请参阅 [Intlayer VS Code 扩展文档](https://intlayer.org/doc/vs-code-extension)。
-
-<Steps>
+</Step>
 
-<Step number={1} title="提取组件内容" isOptional={true}>
+<Step number={14} title="提取组件内容" isOptional={true}>
 
 如果您有现有的代码库，转换数千个文件可能会非常耗时。
 
@@ -998,6 +993,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
 ```
@@ -1051,6 +1048,70 @@ bun run build # Or bun run dev
 
 </Steps>
 
+### 在 Turbopack 上监视字典更改
+
+当使用 Turbopack 作为您的开发服务器并运行 `next dev` 命令时，默认情况下不会自动检测字典更改。
+
+出现这种限制是因为 Turbopack 无法并行运行 webpack 插件以监视内容文件中的更改。要解决此问题，您需要使用 `intlayer watch` 命令同时运行开发服务器和 Intlayer 构建监视器。
+
+```json5 fileName="package.json"
+{
+  // ... 您的现有 package.json 配置
+  "scripts": {
+    // ... 您的现有 scripts 配置
+    "dev": "intlayer watch --with 'next dev'",
+  },
+}
+```
+
+> 如果您使用的是 next-intlayer@<=6.x.x，则需要保留 `--turbopack` 标志以使 Next.js 16 应用程序在 Turbopack 下正常工作。我们建议使用 next-intlayer@>=7.x.x 以避免此限制。
+
+### 配置 TypeScript
+
+Intlayer 使用模块扩充来利用 TypeScript 的优势，并使您的代码库更强大。
+
+![自动补全](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![翻译错误](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+确保您的 TypeScript 配置包含自动生成的类型。
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 您的现有 TypeScript 配置
+  "include": [
+    // ... 您的现有 TypeScript 配置
+    ".intlayer/**/*.ts", // 包含自动生成的类型
+  ],
+}
+```
+
+### Git 配置
+
+建议忽略 Intlayer 生成的文件。这可以避免将它们提交到您的 Git 仓库。
+
+为此，您可以将以下指令添加到您的 `.gitignore` 文件中：
+
+```plaintext fileName=".gitignore"
+# 忽略 Intlayer 生成的文件
+.intlayer
+```
+
+### VS Code 扩展
+
+为了改善您使用 Intlayer 的开发体验，您可以安装官方的 **Intlayer VS Code 扩展**。
+
+[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+此扩展提供：
+
+- 翻译键的**自动补全**。
+- 缺失翻译的**实时错误检测**。
+- 已翻译内容的**内联预览**。
+- 轻松创建和更新翻译的**快速操作**。
+
+有关如何使用该扩展的更多详细信息，请参阅 [Intlayer VS Code 扩展文档](https://intlayer.org/doc/vs-code-extension)。
+
 ### 深入了解
 
 要深入了解，您可以实现[可视化编辑器](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) 外化您的内容。