@intlayer/docs 9.4.0-canary.0 → 9.4.1

package/docs/zh/packages/intlayer/getIntlayer.md

@@ -0,0 +1,197 @@
+---
+createdAt: 2026-08-23
+updatedAt: 2026-08-23
+title: getIntlayer 函数文档 | intlayer
+description: 了解如何使用 intlayer package 中的 getIntlayer 函数
+keywords:
+  - getIntlayer
+  - dictionary
+  - content
+  - selector
+  - Intlayer
+  - intlayer
+  - Internationalization
+  - Documentation
+  - JavaScript
+  - TypeScript
+slugs:
+  - doc
+  - packages
+  - intlayer
+  - getIntlayer
+history:
+  - version: 9.4.0
+    date: 2026-08-23
+    changes: "Initial documentation"
+author: aymericzip
+---
+
+# 文档：`intlayer` 中的 `getIntlayer` 函数
+
+## 描述
+
+`getIntlayer` 函数通过其键选择一个字典，并返回针对给定区域设置解释的内容。它是 `useIntlayer` 钩子的框架无关对应物：相同的内容、相同的选择器，但可在 React 上下文不可用的任何地方使用 — Node 脚本、服务器函数、路由加载器、元数据构建器、Express/Fastify 处理程序、测试。
+
+它读取由 Intlayer 在 `.intlayer/` 中生成的字典，因此 `key` 参数是从您自己的内容声明中类型化和自动完成的，返回的对象从每个叶子节点都是完全类型化的。
+
+**主要特性：**
+
+- 类型化的字典键和类型化的返回内容
+- 解释每个内容节点（`t()`、`enu()`、`cond()`、`insert()`、`nest()`、`md()`、`html()`、`file()`、`gender()`）
+- 接受区域设置或选择器对象（集合、变体）
+- 结果根据 `key + locale + selector` 进行记忆化
+- 在开发中当字典缺失时回退到安全代理，而不是崩溃
+
+---
+
+## 函数签名
+
+```typescript
+getIntlayer(
+  key: DictionaryKeys,                        // 必需
+  localeOrSelector?: LocalesValues | DictionarySelector, // 可选
+  plugins?: Plugins[]                         // 可选
+): DeepTransformContent<...>
+```
+
+---
+
+## 参数
+
+- `key: DictionaryKeys`
+  - **Description**: 要读取的字典的键，如在您的内容文件中声明的那样。
+  - **Type**: `DictionaryKeys` — 每个声明的字典键的联合。
+  - **Required**: Yes
+
+- `localeOrSelector: LocalesValues | DictionarySelector`
+  - **Description**: 用于解释内容的语言环境，或用于[动态字典](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dynamic_dictionaries/index.md)的选择器对象。
+    - `'fr'` — 一个语言环境
+    - `{ item: 2 }` — 一个[集合](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dynamic_dictionaries/collections.md)项目（省略 `item` 以获取每个项目作为数组）
+    - `{ variant: 'black-friday' }` — 一个命名的[变体](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dynamic_dictionaries/variants.md)（省略以使用 `default` 版本）
+    - `{ variant: { id: 'prod_abc', userId: '123' } }` — 一个结构化变体
+    - 任何选择器都可以携带一个语言环境：`{ item: 2, locale: 'fr' }`
+  - **Type**: `LocalesValues | DictionarySelector`
+  - **Required**: No (Optional) — 默认为配置的 `defaultLocale`。
+
+- `plugins: Plugins[]`
+  - **Description**: 自定义节点转换器，替换基础解释器插件。仅用于高级用法；省略它以保持默认行为。
+  - **Type**: `Plugins[]`
+  - **Required**: No (Optional)
+
+### 返回值
+
+- **Type**: 字典的解释内容，根据您的声明进行类型化。
+- **Description**: 一个纯对象，镜像您字典的 `content` 字段，其中每个 Intlayer 节点都已解析为请求的语言环境的最终值。
+
+---
+
+## 示例用法
+
+### 基本用法
+
+```typescript fileName="src/app.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: t({
+      zh: "你好",
+      en: "Hello",
+      fr: "Bonjour",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
+import { getIntlayer } from "intlayer";
+
+const { title } = getIntlayer("app", "fr"); // "Bonjour"
+```
+
+### 不指定语言
+
+省略语言参数会使用你在[配置](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)中声明的 `defaultLocale` 来解释内容。
+
+```typescript
+import { getIntlayer } from "intlayer";
+
+const { title } = getIntlayer("app"); // 使用默认语言解释
+```
+
+### 在服务器处理程序内
+
+```typescript fileName="src/routes/greeting.ts" codeFormat="typescript"
+import { getIntlayer, getLocale } from "intlayer";
+
+export const greetingHandler = async (request: Request) => {
+  const locale = await getLocale({
+    getHeader: (name) => request.headers.get(name) ?? undefined,
+  });
+
+  const { title } = getIntlayer("app", locale);
+
+  return Response.json({ title });
+};
+```
+
+### 使用选择器（集合和变体）
+
+```typescript
+import { getIntlayer } from "intlayer";
+
+// 单个集合项
+const secondPost = getIntlayer("blog-post", { item: 2, locale: "fr" });
+
+// 集合的所有项，作为有序数组
+const allPosts = getIntlayer("blog-post", { locale: "fr" });
+
+// 命名变体
+const banner = getIntlayer("banner", { variant: "black-friday", locale: "fr" });
+```
+
+---
+
+## 行为说明
+
+### 缓存
+
+结果在模块级缓存中进行了记忆化处理，缓存键由 `key + locale + selector` 组成。重复调用 `getIntlayer("app", "fr")` 只会解释一次字典，之后返回同一个对象。
+
+### 缺失的字典
+
+在开发过程中，请求一个没有生成字典的键会记录一次警告并返回一个安全的回退代理：读取 `content.title` 会产生字符串 `"app.title"` 而不是抛出错误。这使页面在修复缺失声明时保持可用。运行 Intlayer 构建（或开发服务器）以生成字典。
+
+### Bundle size
+
+`getIntlayer` 读取合并的字典，其中包含**每个**语言环境。在客户端 bundles 中，[构建插件](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/bundle_optimization.md)重写调用，以便只传输所需的内容。当你在渲染之外读取内容（元数据、加载器、服务器函数）并希望按需加载单个语言环境时，请使用 [`getIntlayerAsync`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getIntlayerAsync.md)。
+
+---
+
+## 相关函数
+
+- [`getIntlayerAsync`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getIntlayerAsync.md): 异步版本，加载单个语言块。
+- [`getDictionary`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getDictionary.md): 解释你自己传递的字典对象，而不是按键查找。
+- [`useIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useIntlayer.md): React hook 等效版本，从 provider 读取语言设置。
+
+---
+
+## TypeScript
+
+```typescript
+function getIntlayer<
+  const T extends DictionaryKeys,
+  const A extends LocalesValues | DictionarySelector = DeclaredLocales,
+>(
+  key: T,
+  localeOrSelector?: A,
+  plugins?: Plugins[]
+): DeepTransformContent<
+  DictionaryRegistryResult<T, A>,
+  IInterpreterPluginState,
+  ExtractSelectorLocale<A>
+>;
+```

package/docs/zh/packages/intlayer/getIntlayerAsync.md

@@ -0,0 +1,141 @@
+---
+createdAt: 2026-08-23
+updatedAt: 2026-08-23
+title: getIntlayerAsync 函数文档 | intlayer
+description: 了解如何使用 intlayer package 中的 getIntlayerAsync 函数
+keywords:
+  - getIntlayerAsync
+  - dictionary
+  - dynamic import
+  - metadata
+  - bundle optimization
+  - Intlayer
+  - intlayer
+  - Internationalization
+  - Documentation
+  - JavaScript
+  - TypeScript
+slugs:
+  - doc
+  - packages
+  - intlayer
+  - getIntlayerAsync
+history:
+  - version: 9.4.0
+    date: 2026-08-23
+    changes: "Initial documentation"
+author: aymericzip
+---
+
+# 文档：`intlayer` 中的 `getIntlayerAsync` 函数
+
+## 描述
+
+`getIntlayerAsync` 函数通过其键选择一个字典，并为给定的语言环境解析其内容，**仅加载该语言环境**。
+
+它是 [`getIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getIntlayer.md) 的异步对应物，用于在渲染之外读取字典的地方 — 路由 `head` / 元数据构建器、加载器、服务器函数。
+
+而 `getIntlayer` 拉取包含每个语言环境的合并字典，[构建插件](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/bundle_optimization.md)（`@intlayer/babel`、`@intlayer/swc`）会将此调用重写为 `getDictionaryAsync(loaderMap, key, locale)`，指向 `.intlayer/dynamic_dictionaries/` 中的各语言环境块。因此，bundle 只会包含实际请求的语言环境。
+
+没有这些插件 — 未优化的构建 — 调用会通过同步字典注册表解析：内容相同，但没有各语言环境的拆分。
+
+**主要特性：**
+
+- 与 `getIntlayer` 相同的类型化键、选择器和返回内容
+- 在优化构建中仅加载请求的语言环境块
+- 针对同一块的并发调用共享单个加载
+- 可安全用于 `async` 元数据构建器、加载器和服务器函数
+
+---
+
+## 函数签名
+
+```typescript
+getIntlayerAsync(
+  key: DictionaryKeys,                        // 必需
+  localeOrSelector?: LocalesValues | DictionarySelector, // 可选
+  plugins?: Plugins[]                         // 可选
+): Promise<DeepTransformContent<...>>
+```
+
+---
+
+## 参数
+
+- `key: DictionaryKeys`
+  - **描述**: 要读取的字典的键，如您的内容文件中声明的那样。
+  - **类型**: `DictionaryKeys` — 每个声明的字典键的并集。
+  - **必需**: 是
+
+- `localeOrSelector: LocalesValues | DictionarySelector`
+  - **描述**: 用于解释内容的区域设置，或用于[动态字典](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dynamic_dictionaries/index.md)的选择器对象。
+    - `'fr'` — 一个区域设置
+    - `{ item: 2 }` — 一个[集合](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dynamic_dictionaries/collections.md)项（省略 `item` 以获取每个项作为数组）
+    - `{ variant: 'black-friday' }` — 一个命名的[变体](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dynamic_dictionaries/variants.md)（省略以使用 `default` 变体）
+    - `{ variant: { id: 'prod_abc', userId: '123' } }` — 一个结构化变体
+    - 任何选择器都可以携带一个区域设置: `{ item: 2, locale: 'fr' }`
+  - **类型**: `LocalesValues | DictionarySelector`
+  - **必需**: 否（可选）— 默认为配置的 `defaultLocale`。
+
+- `plugins: Plugins[]`
+  - **描述**: 替换基础解释器插件的自定义节点转换器。仅限高级使用。
+  - **类型**: `Plugins[]`
+  - **必需**: 否（可选）
+
+### 返回值
+
+- **类型**: `Promise<Content>` — 一个 promise，解析为字典的解释内容，类型由你的声明决定。
+
+---
+
+## 使用示例
+
+### 基本用法
+
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
+import { getIntlayerAsync } from "intlayer";
+
+const { title } = await getIntlayerAsync("app", "fr"); // "Bonjour"
+```
+
+---
+
+## `getIntlayer` vs `getIntlayerAsync`
+
+|                    | [`getIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getIntlayer.md) | `getIntlayerAsync`          |
+| ------------------ | --------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| Returns            | 内容                                                                                                            | 内容的 Promise              |
+| Dictionary loaded  | 合并的字典（所有语言）                                                                                          | 仅请求的语言的块            |
+| Best suited for    | 渲染、同步代码路径                                                                                              | 元数据、加载器、服务器函数  |
+| Requires a plugin? | 否                                                                                                              | 否 — 按语言拆分需要构建插件 |
+
+两者接受相同的参数并返回相同的内容：在两者之间切换只会改变**何时**加载和**加载多少**。
+
+---
+
+## 相关函数
+
+- [`getIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getIntlayer.md): 同步等效函数，读取合并的字典。
+- [`getDictionaryAsync`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getDictionaryAsync.md): 构建插件重写此调用的较低级函数。
+- [`getLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getLocale.md): 检测传入请求的语言环境。
+
+---
+
+## TypeScript
+
+```typescript
+function getIntlayerAsync<
+  const T extends DictionaryKeys,
+  const A extends LocalesValues | DictionarySelector = DeclaredLocales,
+>(
+  key: T,
+  localeOrSelector?: A,
+  plugins?: Plugins[]
+): Promise<
+  DeepTransformContent<
+    DictionaryRegistryResult<T, A>,
+    IInterpreterPluginState,
+    ExtractSelectorLocale<A>
+  >
+>;
+```

package/docs/zh/packages/intlayer/getLocaleLang.md

@@ -57,8 +57,6 @@ getLocaleLang(Locales.FRENCH); // 输出: "fr"
 
 ## 边界情况
 
-- **未提供区域设置：**
-
 - 当 `locale` 为 `undefined` 时，函数返回空字符串。
 
 - **格式错误的区域设置字符串：**

package/docs/zh/packages/intlayer/getLocalizedPath.md

@@ -31,6 +31,8 @@ author: aymericzip
 
 `getLocalizedPath` 函数根据提供的 locale 和重写规则，将 canonical path（应用内路径，例如 `/about`、`/product/[id]`）解析为其本地化等价路径。它对于生成按语言变化的对 SEO 友好的 URL 非常有用。
 
+它是 [`getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getLocalizedUrl.md) 的相对路径对应版本 — 对于相对输入，两者都返回相同的值。与 `getLocalizedUrl` 不同的是，它永远不会返回绝对 URL：`domains` 配置被忽略，因此从其自己的域提供的区域设置仍然会产生一个路径。接受绝对输入，但其来源会被删除 — 仅保留其路径、查询字符串和哈希。
+
 **关键特性：**
 
 - 支持使用 `[param]` 语法的动态路由参数。
@@ -60,11 +62,6 @@ getLocalizedPath(
   - **类型**：`string`
   - **必填**：是
 
-- `locale: Locales`
-  - **描述**：目标语言环境，用于本地化路径。
-  - **类型**：`Locales`
-  - **必填**：是
-
 ### 可选参数
 
 - `rewriteRules?: RoutingConfig['rewrite']`
@@ -72,6 +69,15 @@ getLocalizedPath(
   - **类型**：`RoutingConfig['rewrite']`
   - **默认值**：`configuration.routing.rewrite`
 
+- `options?: object`
+  - **Description**: 路由覆盖。每个条目都默认使用你项目的配置。
+  - **Type**: `object`
+
+  - `options.locales?: Locales[]` — 支持的语言环境。**默认值**: `configuration.internationalization.locales`
+  - `options.defaultLocale?: Locales` — 默认语言环境。**默认值**: `configuration.internationalization.defaultLocale`
+  - `options.mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params'` — 语言环境在路径中的显示方式。**默认值**: `configuration.routing.mode`
+  - `options.rewrite?: RoutingConfig['rewrite']` — 自定义重写规则。**默认值**: `configuration.routing.rewrite`
+
 ---
 
 ## 返回值
@@ -79,6 +85,28 @@ getLocalizedPath(
 - **类型**：`string`
 - **描述**：为指定语言环境生成的本地化路径。
 
+该类型是从您配置中声明的重写规则缩小的，因此编辑器显示的是解析后的路径而不是裸露的 `string`：
+
+```typescript codeFormat="typescript"
+// 配置: mode 'prefix-no-default', defaultLocale 'en',
+//                { '/about': { fr: '/a-propos' }, '/product/[id]': { fr: '/produit/[id]' } }
+const about = getLocalizedPath("/about", Locales.FRENCH);
+//    ^? '/fr/a-propos'
+const product = getLocalizedPath("/product/123", Locales.FRENCH);
+//    ^? '/fr/produit/123'
+const contact = getLocalizedPath("/contact", Locales.FRENCH);
+//    ^? '/fr/contact'  (没有重写规则匹配，仅应用前缀)
+const home = getLocalizedPath("/", Locales.FRENCH);
+//    ^? '/fr'
+```
+
+同样的收窄流入 [`getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/intlayer/getLocalizedUrl.md)，它在添加区域设置前缀之前应用重写规则。
+
+两种情况保持扩展为 `string`，因为它们在编译时无法解析：
+
+- 不是字符串字面量的路径（例如从变量构建的路径）；
+- 与使用多段或可选参数的规则匹配的路径（`[...slug]`、`[[...slug]]`、`:param?`）。
+
 ---
 
 ## 使用示例
@@ -126,8 +154,6 @@ getLocalizedPath("/contact", Locales.FRENCH, manualRules);
 // Output: "/contactez-nous"
 ```
 
----
-
 ### 省略 Locale
 
 当未提供 locale 时，路径将针对配置的默认 locale 进行本地化：

package/docs/zh/packages/intlayer/getLocalizedUrl.md

@@ -34,6 +34,14 @@ author: aymericzip
 
 `getLocalizedUrl` 函数通过在给定的 URL 前添加指定的语言环境前缀来生成本地化的 URL。它可以处理绝对 URL 和相对 URL，确保根据配置应用正确的语言环境前缀。
 
+**主要特性:**
+
+- 只需要 2 个参数：`url` 和 `currentLocale`
+- 可选的 `options` 对象，包含 `locales`、`defaultLocale` 和 `mode`
+- 使用您项目的国际化配置作为默认值
+- 可以用最少的参数用于简单情况，或完全自定义用于复杂场景
+- 支持多种路由模式：`prefix-no-default`、`prefix-all`、`no-prefix` 和 `search-params`
+
 ---
 
 ## 函数签名
@@ -138,36 +146,6 @@ getLocalizedUrl(
 // 输出: 对于默认（英语）环境为 "/about"
 ```
 
-```javascript codeFormat="esm"
-import { getLocalizedUrl, Locales } from "intlayer";
-
-getLocalizedUrl(
-  "/about",
-  Locales.FRENCH,
-  [Locales.ENGLISH, Locales.FRENCH],
-  Locales.ENGLISH,
-  false
-);
-
-// 输出: 对于法语区域，结果为 "/fr/about"
-// 输出: 对于默认（英语）区域，结果为 "/about"
-```
-
-```javascript codeFormat="commonjs"
-const { getLocalizedUrl, Locales } = require("intlayer");
-
-getLocalizedUrl(
-  "/about",
-  Locales.FRENCH,
-  [Locales.ENGLISH, Locales.FRENCH],
-  Locales.ENGLISH,
-  false
-);
-
-// 输出: 对于法语区域，结果为 "/fr/about"
-// 输出: 对于默认（英语）区域，结果为 "/about"
-```
-
 ### 部分配置覆盖
 
 您也可以仅提供部分可选参数。该函数将对您未指定的任何参数使用您的项目配置：
@@ -244,6 +222,12 @@ getLocalizedUrl(
 - **不支持的语言环境：**
   - 对于未列在 `locales` 中的语言环境，函数不会添加任何前缀。
 
+- **路由模式:**
+  - `'prefix-no-default'`: 默认语言没有前缀，其他语言有前缀 (例如, `/about`, `/fr/about`)
+  - `'prefix-all'`: 所有语言都有前缀 (例如, `/en/about`, `/fr/about`)
+  - `'no-prefix'`: URL 中没有语言前缀（语言在其他地方处理）
+  - `'search-params'`: 通过查询参数指定语言 (例如, `/about?locale=fr`)
+
 ---
 
 ## 在应用中的使用

package/docs/zh/packages/intlayer/getMultilingualUrls.md

@@ -31,6 +31,14 @@ author: aymericzip
 
 `getMultilingualUrls` 函数通过在给定的 URL 前添加每个支持的语言环境前缀来生成多语言 URL 的映射。它可以处理绝对和相对 URL，根据提供的配置或默认值应用适当的语言环境前缀。
 
+**主要功能：**
+
+- 仅需 1 个参数：`url`
+- 可选的 `options` 对象包含 `locales`、`defaultLocale` 和 `mode`
+- 使用您的项目国际化配置作为默认值
+- 支持多种路由模式：`prefix-no-default`、`prefix-all`、`no-prefix` 和 `search-params`
+- 返回一个映射对象，其中所有语言区域作为键，对应的 URL 作为值
+
 ---
 
 ## 函数签名
@@ -139,8 +147,6 @@ getMultilingualUrls(
 // }
 ```
 
----
-
 ### 不同的路由模式
 
 ```typescript
@@ -206,6 +212,12 @@ getMultilingualUrls("/dashboard", {
 - **不支持的语言：**
   - 仅考虑 `locales` 数组中提供的语言来生成 URL。
 
+- **路由模式：**
+  - `'prefix-no-default'`：默认语言没有前缀，其他语言有前缀（例如 `/dashboard`、`/fr/dashboard`）
+  - `'prefix-all'`：所有语言都有前缀（例如 `/en/dashboard`、`/fr/dashboard`）
+  - `'no-prefix'`：URL 中没有语言前缀（所有语言返回相同 URL）
+  - `'search-params'`：通过查询参数指定语言（例如 `/dashboard?locale=fr`）
+
 ---
 
 ## 在应用中的使用

package/docs/zh/packages/intlayer/getPrefix.md

@@ -77,8 +77,6 @@ type GetPrefixResult = {
     - **类型**：`Locales`
     - **默认值**：[`项目配置`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md#middleware)
 
-  - `options.mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params'`
-
 - **描述**：用于处理本地化的 URL 路由模式。如果未提供，则使用项目配置中设置的模式。
 - **类型**：`'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params'`
 - **默认值**：[项目配置](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md#middleware)

package/docs/zh/packages/intlayer/getTranslation.md

@@ -31,6 +31,8 @@ author: aymericzip
 
 `getTranslationContent` 函数从一组可自定义的语言内容中检索对应特定语言环境的内容。如果未找到指定的语言环境，则默认返回项目中配置的默认语言环境的内容。
 
+有关如何声明翻译的更多详情，请参阅 [翻译文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/translation.md)。
+
 ## 参数
 
 - `languageContent: CustomizableLanguageContent<Content>`

package/docs/zh/packages/next-intlayer/t.md

@@ -158,6 +158,23 @@ const greeting = t(translations);
 
 #### 示例：
 
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
+```tsx codeFormat={["typescript", "esm", "commonjs"]}
+import type { FC, ReactNode } from "react";
+import type { Locales } from "intlayer";
+import { IntlayerProvider } from "next-intlayer/server";
+
+const Page: FC<{ locale: Locales; children: ReactNode }> = ({
+  locale,
+  children,
+}) => <IntlayerProvider locale={locale}>{children}</IntlayerProvider>;
+```
+
+ </Tab>
+ <Tab label='Intlayer <9.4' value='<9.4'>
+
 ```tsx codeFormat={["typescript", "esm", "commonjs"]}
 import type { FC } from "react";
 import type { Locales } from "intlayer";
@@ -173,6 +190,9 @@ const Page: FC<{ locale: Locales }> = ({ locale }) => (
 );
 ```
 
+ </Tab>
+</Tabs>
+
 ---
 
 ## 常见错误与故障排除

package/docs/zh/packages/next-intlayer/useIntlayer.md

@@ -79,6 +79,35 @@ author: aymericzip
 
 以下示例展示了如何在 Next.js 页面中实现 `useIntlayer` 钩子，根据应用程序当前的语言环境动态加载本地化内容：
 
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
+```tsx fileName="src/pages/[locale]/index.tsx" codeFormat={["typescript", "esm"]}
+import { ClientComponentExample } from "@components/ClientComponentExample";
+import { ServerComponentExample } from "@components/ServerComponentExample";
+import { type NextPageIntlayer } from "next-intlayer";
+import { useIntlayer } from "next-intlayer";
+import { IntlayerProvider } from "next-intlayer/server";
+
+const HomePage: NextPageIntlayer = async ({ params }) => {
+  const { locale } = await params;
+
+  // 获取主页内容
+  const content = useIntlayer("homepage", locale);
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <p>{content.introduction}</p>
+      <ClientComponentExample />
+      <ServerComponentExample />
+    </IntlayerProvider>
+  );
+};
+```
+
+ </Tab>
+ <Tab label='Intlayer <9.4' value='<9.4'>
+
 ```tsx fileName="src/pages/[locale]/index.tsx" codeFormat={["typescript", "esm"]}
 import { ClientComponentExample } from "@components/ClientComponentExample";
 import { ServerComponentExample } from "@components/ServerComponentExample";
@@ -104,6 +133,9 @@ const HomePage: NextPageIntlayer = async ({ params }) => {
 };
 ```
 
+ </Tab>
+</Tabs>
+
 ```tsx fileName="src/components/ClientComponentExample.tsx" codeFormat={["typescript", "esm"]}
 "use-client";
 

package/docs/zh/packages/next-intlayer/useLocale.md

@@ -104,6 +104,8 @@ const LocaleSwitcher: FC = () => {
 
 ## 返回值
 
+当你调用 `useLocale` hook 时，它会返回一个包含以下属性的对象：
+
 - **`locale`**：当前在 React 上下文中设置的语言环境。
 - **`defaultLocale`**：配置中定义的主要语言环境。
 - **`availableLocales`**：配置中定义的所有可用语言环境列表。

package/docs/zh/packages/react-intlayer/useDictionary.md

@@ -30,8 +30,6 @@ author: aymericzip
 
 ## React 中的示例用法
 
-以下是如何在 React 组件中使用 `useDictionary` 钩子的示例：
-
 ```tsx fileName="./ComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useDictionary } from "react-intlayer";