@intlayer/docs 7.0.4-canary.0 → 7.0.5

package/blog/zh/intlayer_with_i18next.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-12-24
-updatedAt: 2025-06-29
-title: Intlayer 和 i18next
-description: 将 Intlayer 与 i18next 集成以实现最佳国际化。比较两个框架并了解如何配置它们。
+updatedAt: 2025-10-29
+title: 如何使用 Intlayer 自动化您的 i18next JSON 翻译
+description: 使用 Intlayer 和 i18next 自动化您的 JSON 翻译，提升 JavaScript 应用程序的国际化水平。
 keywords:
   - Intlayer
   - i18next
@@ -14,149 +14,114 @@ keywords:
   - Next.js
   - JavaScript
   - TypeScript
+  - 迁移
+  - 集成
 slugs:
   - blog
   - intlayer-with-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: 更改为 syncJSON 插件
 ---
 
-# 国际化与 Intlayer 和 i18next
+# 如何使用 Intlayer 自动化您的 i18next JSON 翻译
 
-i18next 是一个开源国际化 (i18n) 框架，旨在用于 JavaScript 应用程序。它广泛用于管理翻译、定位和软件项目中的语言切换。然而，它有一些限制，可能会使可扩展性和开发变得复杂。
+## 什么是 Intlayer？
 
-Intlayer 是另一个国际化框架，解决了这些限制，提供了一种更灵活的内容声明和管理方法。让我们探讨一下 i18next 和 Intlayer 之间的主要区别，以及如何为最佳国际化配置两者。
+**Intlayer** 是一个创新的开源国际化库，旨在解决传统 i18n 解决方案的不足。它为 JavaScript 应用程序中的内容管理提供了一种现代化的方法。
 
-## Intlayer 与 i18next：主要区别
+请参阅我们博客文章中的具体比较：[next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md)。
 
-### 1. 内容声明
+## 为什么要将 Intlayer 与 i18next 结合使用？
 
-使用 i18next 时，翻译字典必须在特定文件夹中声明，这可能会使应用程序的可扩展性变得复杂。相比之下，Intlayer 允许内容在与组件相同的目录中声明。这有几个优点：
+虽然 Intlayer 提供了一个出色的独立 i18n 解决方案（请参阅我们的[Next.js 集成指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_nextjs_16.md)），但您可能出于以下几个原因想将其与 i18next 结合使用：
 
-- **简化内容编辑**：用户不必为了编辑而查找正确的字典，从而减少错误的机会。
-- **自动适应**：如果组件更改位置或被删除，Intlayer 会自动检测并适应。
+1. **现有代码库**：您已经有一个成熟的 i18next 实现，并希望逐步迁移到 Intlayer 以获得更好的开发者体验。
+2. **遗留需求**：您的项目需要兼容现有的 i18next 插件或工作流程。
+3. **团队熟悉度**：您的团队熟悉 i18next，但希望获得更好的内容管理。
 
-### 2. 配置复杂性
+**为此，Intlayer 可以作为 i18next 的适配器来实现，帮助您在 CLI 或 CI/CD 流水线中自动化 JSON 翻译，测试翻译内容等。**
 
-配置 i18next 可能很复杂，尤其是在与服务器组件集成或为 Next.js 等框架配置中间件时。Intlayer 简化了这一过程，提供了更直接的配置。
+本指南将向您展示如何利用 Intlayer 优越的内容声明系统，同时保持与 i18next 的兼容性。
 
-### 3. 翻译字典的一致性
+## 目录
 
-确保翻译字典在不同语言之间的一致性在使用 i18next 时可能会面临挑战。这种不一致性如果处理不当，可能导致应用程序崩溃。Intlayer 通过对翻译内容施加约束来解决这个问题，确保没有翻译遗漏，并且翻译内容准确。
+<TOC/>
 
-### 4. TypeScript 集成
+## 使用 i18next 设置 Intlayer 的分步指南
 
-Intlayer 与 TypeScript 的集成更好，允许在代码中自动建议内容，从而提高开发效率。
+### 第一步：安装依赖项
 
-### 5. 跨应用共享内容
+安装必要的包：
 
-Intlayer 促进了跨多个应用程序和共享库的内容声明文件共享。这个功能使得在更大的代码库中维护一致的翻译变得更容易。
-
-## 如何使用 Intlayer 生成 i18next 字典
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-### 配置 Intlayer 以导出 i18next 字典
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-> 重要提示
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
+```
 
-> i18next 字典的导出当前处于测试阶段，并不确保与其他框架的 1:1 兼容性。建议遵循基于 Intlayer 的配置以最小化问题。
+**包描述：**
 
-要导出 i18next 字典，您需要适当地配置 Intlayer。以下是如何设置 Intlayer 以导出 Intlayer 和 i18next 字典的示例。
+- **intlayer**：用于国际化管理、内容声明和构建的核心库
+- **@intlayer/sync-json-plugin**：用于将 Intlayer 内容声明导出为兼容 i18next 的 JSON 格式的插件
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-import { Locales, type IntlayerConfig } from "intlayer";
+### 步骤 2：实现 Intlayer 插件以包装 JSON
 
-const config: IntlayerConfig = {
-  content: {
-    // 指示 Intlayer 将导出 Intlayer 和 i18next 字典
-    dictionaryOutput: ["intlayer", "i18next"],
-    // 从项目根目录到导出 i18n 字典的目录的相对路径
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
+创建一个 Intlayer 配置文件以定义支持的语言环境：
 
-export default config;
-```
+**如果你还想导出 i18next 的 JSON 词典**，请添加 `syncJSON` 插件：
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // 指示 Intlayer 将导出 Intlayer 和 i18next 字典
-    dictionaryOutput: ["intlayer", "i18next"],
-    // 从项目根目录到导出 i18n 字典的目录的相对路径
-    i18nextResourcesDir: "./i18next/dictionaries",
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
   },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
+    }),
+  ],
 };
 
 export default config;
 ```
 
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
+`syncJSON` 插件会自动包装 JSON。它会读取和写入 JSON 文件，而不会改变内容结构。
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // 指示 Intlayer 将导出 Intlayer 和 i18next 字典
-    dictionaryOutput: ["intlayer", "i18next"],
-    // 从项目根目录到导出 i18n 字典的目录的相对路径
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
+如果你想让 JSON 与 intlayer 内容声明文件（`.content` 文件）共存，Intlayer 会按以下方式处理：
 
-module.exports = config;
-```
+    1. 加载 JSON 和内容声明文件，并将它们转换为 intlayer 字典。
 
-通过在配置中包含 'i18next'，Intlayer 生成专用的 i18next 字典，除此之外，还有 Intlayer 字典。请注意，移除 'intlayer' 可能导致与 React-Intlayer 或 Next-Intlayer 的兼容性破坏。
+2. 如果 JSON 文件和内容声明文件之间存在冲突，Intlayer 将合并所有字典。合并的优先级取决于插件的优先级以及内容声明文件的优先级（所有这些都是可配置的）。
 
-### 将字典导入到您的 i18next 配置中
+如果使用 CLI 翻译 JSON，或使用 CMS 进行更改，Intlayer 会使用新的翻译更新 JSON 文件。
 
-要将生成的字典导入到您的 i18next 配置中，可以使用 'i18next-resources-to-backend'。以下是如何导入您的 i18next 字典的示例：
+## Git 配置
 
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-// i18n/client.ts
+建议忽略自动生成的 Intlayer 文件：
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next
-  // 您的 i18next 配置
-  .use(
-    resourcesToBackend(
-      (language: string, namespace: string) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
+```plaintext fileName=".gitignore"
+# 忽略 Intlayer 生成的文件
+.intlayer
 ```
 
-```javascript fileName="i18n/client.mjs" codeFormat="esm"
-// i18n/client.mjs
-
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+这些文件可以在构建过程中重新生成，无需提交到版本控制。
 
-i18next
-  // 您的 i18next 配置
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+### VS Code 扩展
 
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-// i18n/client.cjs
+为了提升开发者体验，请安装官方的 **Intlayer VS Code 扩展**：
 
-const i18next = require("i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
+[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-i18next
-  // 您的 i18next 配置
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/zh/intlayer_with_next-i18next.md

@@ -1,367 +1,143 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
-title: Intlayer和next-i18next
-description: 与Next.js应用程序的next-i18next集成Intlayer
+updatedAt: 2025-10-29
+title: Intlayer 与 next-i18next
+description: 将 Intlayer 与 next-i18next 集成，实现全面的 Next.js 国际化解决方案
 keywords:
   - i18next
   - next-i18next
   - Intlayer
   - 国际化
-  - 文档
+  - 博客
   - Next.js
   - JavaScript
   - React
 slugs:
   - blog
   - intlayer-with-next-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: 更改为 syncJSON 插件并全面重写
 ---
 
-# Next.js 国际化 (i18n) 与 next-i18next 和 Intlayer
+# 使用 next-i18next 和 Intlayer 实现 Next.js 国际化（i18n）
 
-both next-i18next 和 Intlayer 是为 Next.js 应用程序设计的开源国际化 (i18n) 框架。它们广泛用于软件项目中的翻译、地方化和语言切换管理。
+## 目录
 
-这两种解决方案包括三个主要概念：
+<TOC/>
 
-1. **内容声明**：定义应用程序可翻译内容的方法。
-   - 在 `i18next` 的情况下称为 `resource`，内容声明是一个结构化的 JSON 对象，包含一种或多种语言翻译的键值对。有关更多信息，请参阅 [i18next 文档](https://www.i18next.com/translation-function/essentials)。
-   - 在 `Intlayer` 的情况下称为 `content declaration file`，内容声明可以是导出结构化数据的 JSON、JS 或 TS 文件。有关更多信息，请参阅 [Intlayer 文档](https://intlayer.org/fr/doc/concept/content)。
+## 什么是 next-i18next？
 
-2. **工具**：构建和解释应用程序中的内容声明的工具，例如 `getI18n()`、`useCurrentLocale()` 或 `useChangeLocale()` 对于 next-i18next，以及 `useIntlayer()` 或 `useLocale()` 对于 Intlayer。
+**next-i18next** 是 Next.js 应用中最流行的国际化（i18n）框架之一。它构建于强大的 **i18next** 生态系统之上，为管理 Next.js 项目的翻译、本地化和语言切换提供了全面的解决方案。
 
-3. **插件和中间件**：用于管理 URL 重定向、打包优化等功能，例如 next-i18next 的 `next-i18next/middleware` 或 Intlayer 的 `intlayerMiddleware`。
+然而，next-i18next 也存在一些挑战：
 
-## Intlayer vs. i18next：主要区别
+- **配置复杂**：设置 next-i18next 需要多个配置文件，并且需要仔细设置服务器端和客户端的 i18n 实例。
+- **翻译分散**：翻译文件通常存储在与组件分开的目录中，导致维护一致性更加困难。
+- **手动命名空间管理**：开发者需要手动管理命名空间，并确保正确加载翻译资源。
+- **类型安全有限**：TypeScript 支持需要额外配置，并且不提供翻译的自动类型生成。
 
-要探索 i18next 和 Intlayer 之间的区别，请查看我们的 [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/zh/i18next_vs_next-intl_vs_intlayer.md) 博客文章。
+## 什么是 Intlayer？
 
-## 如何使用 Intlayer 生成 next-i18next 字典
+**Intlayer** 是一个创新的开源国际化库，旨在解决传统 i18n 解决方案的不足。它为 Next.js 应用提供了一种现代化的内容管理方法。
 
-### 为什么在 next-i18next 中使用 Intlayer？
+请参阅我们博客文章中的具体对比：[next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md)。
 
-Intlayer 内容声明文件通常提供更好的开发者体验。由于两个主要优点，它们更灵活且可维护：
+## 为什么将 Intlayer 与 next-i18next 结合使用？
 
-1. **灵活的放置**：Intlayer 内容声明文件可以放置在应用程序的文件树中的任何位置，简化了重复或删除组件管理，而无需留下未使用的内容声明。
+虽然 Intlayer 提供了一个出色的独立 i18n 解决方案（请参阅我们的[Next.js 集成指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_nextjs_16.md)），但您可能出于以下几个原因希望将其与 next-i18next 结合使用：
 
-   示例文件结构：
+1. **现有代码库**：您已经有一个成熟的 next-i18next 实现，并希望逐步迁移到 Intlayer 以获得更好的开发者体验。
+2. **遗留需求**：您的项目需要兼容现有的 i18next 插件或工作流程。
+3. **团队熟悉度**：您的团队对 next-i18next 很熟悉，但希望获得更好的内容管理。
 
-   ```bash codeFormat="typescript"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts # 内容声明文件
-               └── index.tsx
-   ```
+**为此，Intlayer 可以作为 next-i18next 的适配器来实现，帮助在 CLI 或 CI/CD 流水线中自动化您的 JSON 翻译，测试您的翻译内容等。**
 
-   ```bash codeFormat="esm"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.mjs # 内容声明文件
-               └── index.mjx
-   ```
+本指南将向您展示如何利用 Intlayer 优越的内容声明系统，同时保持与 next-i18next 的兼容性。
 
-   ```bash codeFormat="cjs"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.cjs # 内容声明文件
-               └── index.cjx
-   ```
+---
 
-   ```bash codeFormat="json"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.json # 内容声明文件
-               └── index.jsx
-   ```
+## 使用 next-i18next 设置 Intlayer 的分步指南
 
-2. **集中翻译**：Intlayer 将所有翻译存储在一个文件中，确保没有翻译缺失。当使用 TypeScript 时，缺失的翻译会被自动检测并报告为错误。
+### 第一步：安装依赖
 
-### 安装
+使用您喜欢的包管理器安装所需的包：
 
 ```bash packageManager="npm"
-npm install intlayer i18next next-i18next i18next-resources-to-backend
+npm install intlayer @intlayer/sync-json-plugin
 ```
 
-```bash packageManager="yarn"
-yarn add intlayer i18next next-i18next i18next-resources-to-backend
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
 ```
 
-```bash packageManager="pnpm"
-pnpm add intlayer i18next next-i18next i18next-resources-to-backend
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-### 配置 Intlayer 导出 i18next 字典
+**包说明：**
+
+- **intlayer**：内容声明和管理的核心库
+- **next-intlayer**：带有构建插件的 Next.js 集成层
+- **i18next**：核心国际化框架
+- **next-i18next**：i18next 的 Next.js 封装器
+- **i18next-resources-to-backend**：i18next 的动态资源加载
+- **@intlayer/sync-json-plugin**：将 Intlayer 内容声明同步为 i18next JSON 格式的插件
 
-> 导出 i18next 资源并不能确保与其他框架的 1:1 兼容。建议坚持使用基于 Intlayer 的配置以减少问题。
+### 第2步：实现 Intlayer 插件以封装 JSON
 
-要导出 i18next 资源，请在 `intlayer.config.ts` 文件中配置 Intlayer。示例配置：
+创建一个 Intlayer 配置文件以定义支持的语言环境：
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+**如果你还想为 i18next 导出 JSON 词典**，请添加 `syncJSON` 插件：
+
+```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 
 const config: IntlayerConfig = {
   internationalization: {
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    dictionaryOutput: ["i18next"],
-    i18nextResourcesDir: "./i18next/resources",
-  },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+    }),
+  ],
 };
 
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  content: {
-    dictionaryOutput: ["i18next"],
-    i18nextResourcesDir: "./i18next/resources",
-  },
-};
-
-export default config;
-```
+`syncJSON` 插件会自动包装 JSON。它会读取和写入 JSON 文件，而不会改变内容结构。
 
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
+如果你想让 JSON 与 intlayer 内容声明文件（`.content` 文件）共存，Intlayer 会按以下方式处理：
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  content: {
-    dictionaryOutput: ["i18next"],
-    i18nextResourcesDir: "./i18next/resources",
-  },
-};
+    1. 加载 JSON 和内容声明文件，并将它们转换为 intlayer 字典。
 
-module.exports = config;
-```
+2. 如果 JSON 文件和内容声明文件之间存在冲突，Intlayer 将合并所有字典。合并的优先级取决于插件的优先级以及内容声明文件的优先级（所有这些都是可配置的）。
 
-以下是文档其余部分的续写和更正：
+如果使用 CLI 翻译 JSON，或使用 CMS 进行更改，Intlayer 将使用新的翻译更新 JSON 文件。
 
 ---
 
-### 将字典导入到您的 i18next 配置中
-
-要将生成的资源导入到您的 i18next 配置中，请使用 `i18next-resources-to-backend`。以下是示例：
-
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next.use(
-  resourcesToBackend(
-    (language: string, namespace: string) =>
-      import(`../i18next/resources/${language}/${namespace}.json`)
-  )
-);
-```
-
-```javascript fileName="i18n/client.mjs" codeFormat="esm"
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next.use(
-  resourcesToBackend(
-    (language, namespace) =>
-      import(`../i18next/resources/${language}/${namespace}.json`)
-  )
-);
-```
+## Git 配置
 
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-const i18next = require("i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
+将生成的文件排除在版本控制之外：
 
-i18next.use(
-  resourcesToBackend(
-    (language, namespace) =>
-      import(`../i18next/resources/${language}/${namespace}.json`)
-  )
-);
+```plaintext fileName=".gitignore"
+# 忽略 Intlayer 生成的文件
+.intlayer
+intl
 ```
 
-### 内容声明
+这些文件会在构建过程中自动重新生成，无需提交到您的代码仓库。
 
-各种格式的内容声明文件示例：
+### VS Code 扩展
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
-import { t, type Dictionary } from "intlayer";
+为了提升开发者体验，请安装官方的 **Intlayer VS Code 扩展**：
 
-const content = {
-  key: "my-content",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-} satisfies Dictionary;
-
-export default content;
-```
+[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const content = {
-  key: "my-content",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-module.exports = {
-  key: "my-content",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "my-content",
-  "content": {
-    "myTranslatedContent": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "Hello World",
-        "fr": "Bonjour le monde",
-        "es": "Hola Mundo"
-      }
-    }
-  }
-}
-```
-
-### 构建 next-i18next 资源
-
-要构建 next-i18next 资源，请运行以下命令：
-
-```bash packageManager="npm"
-npx run intlayer build
-```
-
-```bash packageManager="yarn"
-yarn intlayer build
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer build
-```
-
-这将生成资源在 `./i18next/resources` 目录中。预期的输出：
-
-```bash
-.
-└── i18next
-    └── resources
-       └── en
-           └── my-content.json
-       └── fr
-           └── my-content.json
-       └── es
-           └── my-content.json
-```
-
-注意：i18next 命名空间对应 Intlayer 声明键。
-
-### 实现 Next.js 插件
-
-配置完成后，实施 Next.js 插件，以便在 Intlayer 内容声明文件更新时重新构建 i18next 资源。
-
-```typescript fileName="next.config.mjs"
-import { withIntlayer } from "next-intlayer/server";
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default withIntlayer(nextConfig);
-```
-
-### 在 Next.js 组件中使用内容
-
-实施 Next.js 插件后，您可以在组件中使用内容：
-
-```typescript fileName="src/components/myComponent/index.tsx" codeFormat="typescript"
-import type { FC } from "react";
-import { useTranslation } from "react-i18next";
-
-const IndexPage: FC = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <h1>{t("my-content.title")}</h1>
-      <p>{t("my-content.description")}</p>
-    </div>
-  );
-};
-
-export default IndexPage;
-```
-
-```jsx fileName="src/components/myComponent/index.mjx" codeFormat="esm"
-import { useTranslation } from "react-i18next";
-
-const IndexPage = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <h1>{t("my-content.title")}</h1>
-      <p>{t("my-content.description")}</p>
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/myComponent/index.cjx" codeFormat="commonjs"
-const { useTranslation } = require("react-i18next");
-
-const IndexPage = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <h1>{t("my-content.title")}</h1>
-      <p>{t("my-content.description")}</p>
-    </div>
-  );
-};
-```
+[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)