@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/vi/dictionary/html.md

@@ -24,7 +24,7 @@ history:
     changes: "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
   - version: 8.5.0
     date: 2026-03-24
-    changes: "move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/html`"
+    changes: "Chuyển import từ `{{framework}}-intlayer` sang `{{framework}}-intlayer/html`"
   - version: 8.0.0
     date: 2026-01-22
     changes: "Thêm HTMLRenderer / useHTMLRenderer / tiện ích renderHTML"
@@ -245,7 +245,7 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
-  
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "react-intlayer/html";
 
@@ -261,9 +261,28 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
     );
     ```
 
+    Bạn cũng có thể sử dụng trình render HTML của riêng mình:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "react-intlayer/html";
+
+    export const AppProvider = ({ children }) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('react-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
+
   </Tab>
   <Tab label="Vue" value="vue">
-  
+
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
     import { intlayer } from "vue-intlayer";
@@ -283,9 +302,32 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
     app.mount("#app");
     ```
 
+    Bạn cũng có thể sử dụng trình render HTML của riêng mình:
+
+    ```typescript fileName="main.ts"
+    import { createApp, h } from "vue";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerHTML } from "vue-intlayer/html";
+    import App from "./App.vue";
+
+    const app = createApp(App);
+
+    app.use(intlayer);
+    app.use(intlayerHTML, {
+      renderHTML: async (html) => {
+        const { renderHTML } = await import('vue-intlayer/html');
+        return renderHTML(html);
+      },
+    });
+
+    app.mount("#app");
+    ```
+
+    > Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
+
   </Tab>
   <Tab label="Svelte" value="svelte">
-   
+
     ```svelte fileName="App.svelte"
     <script lang="ts">
       import { HTMLProvider } from "svelte-intlayer/html";
@@ -301,9 +343,28 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
     </HTMLProvider>
     ```
 
+    Bạn cũng có thể sử dụng trình render HTML của riêng mình:
+
+    ```svelte fileName="App.svelte"
+    <script lang="ts">
+      import { HTMLProvider } from "svelte-intlayer/html";
+    </script>
+
+    <HTMLProvider
+      renderHTML={async (html) => {
+        const { renderHTML } = await import('svelte-intlayer/html');
+        return renderHTML(html);
+      }}
+    >
+      <slot />
+    </HTMLProvider>
+    ```
+
+    > Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
+
   </Tab>
   <Tab label="Preact" value="preact">
-   
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer/html";
 
@@ -318,9 +379,28 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
     );
     ```
 
+    Bạn cũng có thể sử dụng trình render HTML của riêng mình:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "preact-intlayer/html";
+
+    export const AppProvider = ({ children }) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('preact-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
+
   </Tab>
   <Tab label="Solid" value="solid">
-   
+
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer/html";
 
@@ -335,6 +415,25 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
     );
     ```
 
+    Bạn cũng có thể sử dụng trình render HTML của riêng mình:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "solid-intlayer/html";
+
+    export const AppProvider = (props) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('solid-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {props.children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
+
   </Tab>
   <Tab label="Angular" value="angular">
 
@@ -353,6 +452,25 @@ Bạn có thể cấu hình cách render HTML ở mức toàn cục cho toàn b
     };
     ```
 
+    Bạn cũng có thể sử dụng trình render HTML của riêng mình:
+
+    ```typescript fileName="app.config.ts"
+    import { createIntlayerHTMLProvider } from "angular-intlayer/html";
+
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        createIntlayerHTMLProvider({
+          renderHTML: async (html) => {
+            const { renderHTML } = await import('angular-intlayer/html');
+            return renderHTML(html);
+          },
+        }),
+      ],
+    };
+    ```
+
+    > Import trình render HTML của bạn theo cách động là một cách tốt để giảm kích thước bundle của ứng dụng.
+
   </Tab>
 </Tabs>
 
@@ -401,9 +519,9 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
 
   </Tab>
   <Tab label="Vue" value="vue">
-   
+
     #### Thành phần `<HTMLRenderer />`
-   
+
     ```vue
     <script setup>
     import { HTMLRenderer } from "vue-intlayer/html";
@@ -416,9 +534,9 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
 
   </Tab>
   <Tab label="Svelte" value="svelte">
-  
+
     #### Thành phần `<HTMLRenderer />`
-   
+
     ```svelte
     <script lang="ts">
     import { HTMLRenderer } from "svelte-intlayer/html";
@@ -450,9 +568,9 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
 
   </Tab>
   <Tab label="Preact" value="preact">
-   
+
     #### Thành phần `<HTMLRenderer />`
-   
+
     ```tsx
     import { HTMLRenderer } from "preact-intlayer/html";
 
@@ -481,9 +599,9 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
 
   </Tab>
   <Tab label="Solid" value="solid">
-   
+
     #### Thành phần `<HTMLRenderer />`
-   
+
     ```tsx
     import { HTMLRenderer } from "solid-intlayer/html";
 
@@ -516,13 +634,13 @@ Nếu bạn cần kết xuất chuỗi HTML thô hoặc muốn kiểm soát nhi
     Render một chuỗi HTML bằng cách sử dụng dịch vụ.
 
     ```typescript
-    import { IntlayerHTMLService } from "angular-intlayer";
+    import { IntlayerHTMLService } from "angular-intlayer/html";
 
     export class MyComponent {
       constructor(private markdownService: IntlayerHTMLService) {}
 
       renderHTML(html: string) {
-        return this.markdownService.renderMarkdown(html);
+        return this.markdownService.renderHTML(html);
       }
     }
     ```

package/docs/vi/dictionary/insertion.md

@@ -98,20 +98,6 @@ Khi tích hợp với React Intlayer hoặc Next Intlayer, bạn chỉ cần cun
   </Tab>
 </Tabs>
 
-```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "my_key",
-  "content": {
-    "myInsertion": {
-      "nodeType": "insertion",
-      "insertion": "Xin chào, tôi tên là {{name}} và tôi {{age}} tuổi!",
-    },
-    "myInsertion2": "Xin chào, tôi tên là {{name}} và tôi {{age}} tuổi!", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
-  },
-}
-```
-
 ## Sử dụng Nội dung Chèn với React Intlayer
 
 Để sử dụng nội dung chèn trong một component React, hãy import và sử dụng hook `useIntlayer` từ package `react-intlayer`. Hook này lấy nội dung theo key được chỉ định và cho phép bạn truyền vào một đối tượng ánh xạ mỗi placeholder trong nội dung với giá trị bạn muốn hiển thị.

package/docs/vi/dictionary/markdown.md

@@ -492,7 +492,7 @@ Các tiện ích này **chỉ render các chuỗi Markdown thô** và độc l
 
 <Tabs group="framework">
   <Tab label="React" value="react">
-  
+
     #### Component `<MarkdownRenderer />`
 
     Render một chuỗi Markdown với các tùy chọn cụ thể.
@@ -531,7 +531,7 @@ Các tiện ích này **chỉ render các chuỗi Markdown thô** và độc l
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
-  
+
     #### Component `<MarkdownRenderer />`
 
     Render một chuỗi Markdown với các tùy chọn cụ thể.
@@ -957,21 +957,38 @@ Các tiện ích này **chỉ render các chuỗi Markdown thô** và độc l
   </Tab>
   <Tab label="Angular" value="angular">
 
-    ```typescript fileName="app.module.ts"
-    import { NgModule } from '@angular/core';
-    import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';
+    ```typescript fileName="app.config.ts"
+    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
+
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        createIntlayerMarkdownProvider({
+          components: {
+            h1: { class: "text-2xl font-bold" },
+          },
+        }),
+      ],
+    };
+    ```
+
+
+    > Hỗ trợ MDX — bất kỳ tên component nào được sử dụng bên trong Markdown của bạn (ví dụ: `<MyCustomJSXComponent />`) đều được phân giải dựa trên bản đồ `components`.
+
+    Bạn cũng có thể sử dụng trình render markdown của riêng mình:
+
+    ```typescript fileName="app.config.ts"
+    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
 
-    @NgModule({
-      imports: [
-        IntlayerMarkdownModule.forRoot({
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        createIntlayerMarkdownProvider({
           renderMarkdown: async (md) => {
             const { renderMarkdown } = await import('angular-intlayer/markdown');
             return renderMarkdown(md);
-          }
-        })
-      ]
-    })
-    export class AppModule {}
+          },
+        }),
+      ],
+    };
     ```
 
     > Việc nhập trình render Markdown của bạn một cách động là một cách tuyệt vời để giảm dung lượng bundle của ứng dụng.
@@ -1047,7 +1064,7 @@ const MyComponent = () => {
 ```
 
   </Tab>
- 
+
   <Tab label="Vue" value="vue">
 
 Vue có một thành phần `<Suspense>` được tích hợp sẵn. Bọc thành phần kết xuất nội dung Markdown trong ranh giới `<Suspense>`.

package/docs/vi/dictionary/plurial.md

@@ -35,10 +35,72 @@ Không giống như [`enu`](https://github.com/aymericzip/intlayer/blob/main/doc
 
 ## Khi nào nên sử dụng `plural` so với `enu`
 
+To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+
+To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+## Thiết lập nội dung số nhiều
+
+Để thiết lập nội dung số nhiều trong dự án Intlayer của bạn, hãy tạo một mô-đun nội dung sử dụng trợ giúp `plural`. Danh mục `other` là bắt buộc và được sử dụng làm phương án dự phòng khi một ngôn ngữ không xác định danh mục cụ thể hơn.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      vi: plural({
+        other: "{{count}} vị trí đang tuyển",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "vi": {
+          "nodeType": "plural",
+          "plural": {
+            "other": "{{count}} vị trí đang tuyển"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+> Các danh mục được hỗ trợ là `zero`, `one`, `two`, `few`, `many`, `other`. Bạn chỉ cần khai báo các danh mục mà ngôn ngữ mục tiêu của bạn sử dụng, Intlayer sẽ quay lại `other` khi không có danh mục cụ thể nào khớp.
+>
+> Trình giữ chỗ `{{count}}` được thay thế tự động bằng số lượng bạn chuyển vào lúc thực thi. Bạn cũng có thể bao gồm các trình giữ chỗ khác (xem [Trình giữ chỗ tùy chỉnh](#custom-placeholders) bên dưới).
+
+## Sử dụng nội dung số nhiều với React Intlayer
+
 <Tabs group="framework">
   <Tab label="React" value="react">
 
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+Để sử dụng nội dung số nhiều bên trong một thành phần React, hãy truy xuất nó thông qua hook `useIntlayer` và gọi nó với một số lượng. Ngôn ngữ đang hoạt động và số lượng được kết hợp để chọn danh mục CLDR phù hợp.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -60,7 +122,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Next.js" value="nextjs">
 
-To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Để sử dụng nội dung số nhiều trong Next.js Client Components, hãy truy xuất nó thông qua hook `useIntlayer` và gọi nó với một số lượng. Dưới đây là một ví dụ:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 "use client";
@@ -84,7 +146,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Vue" value="vue">
 
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Để sử dụng nội dung số nhiều trong các thành phần Vue, hãy truy xuất nó qua hook `useIntlayer` và gọi nó với một số lượng. Dưới đây là một ví dụ:
 
 ```vue fileName="**/*.vue"
 <script setup lang="ts">
@@ -105,7 +167,7 @@ const { totalOpenings } = useIntlayer("total_openings");
   </Tab>
   <Tab label="Svelte" value="svelte">
 
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
+Để sử dụng nội dung số nhiều trong các thành phần Svelte, hãy lấy nó thông qua hook `useIntlayer` và gọi nó với một số lượng. Store được truy cập bằng `$`. Dưới đây là một ví dụ:
 
 ```svelte fileName="**/*.svelte"
 <script lang="ts">
@@ -124,17 +186,22 @@ const content = useIntlayer("total_openings");
   </Tab>
   <Tab label="Preact" value="preact">
 
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Để sử dụng nội dung số nhiều trong các thành phần Preact, hãy lấy nó thông qua hook `useIntlayer` và gọi nó với một số lượng. Dưới đây là một ví dụ:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
 
 const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
   const { totalOpenings } = useIntlayer("total_openings");
 
   return (
     <div>
+      {/* Trong tiếng Anh:                                  */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
       <p>{totalOpenings(count)}</p>
     </div>
   );
@@ -146,7 +213,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Solid" value="solid">
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Để sử dụng nội dung số nhiều trong các component SolidJS, hãy truy xuất nó thông qua hook `useIntlayer` và gọi nó với một count. Dưới đây là một ví dụ:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { Component } from "solid-js";
@@ -168,7 +235,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Angular" value="angular">
 
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Để sử dụng nội dung số nhiều trong các thành phần Angular, hãy truy xuất nó thông qua hook `useIntlayer` và gọi nó với một count. Dưới đây là một ví dụ:
 
 ```typescript fileName="app.component.ts" codeFormat="typescript"
 import { Component, Input } from "@angular/core";
@@ -187,119 +254,20 @@ export class OpeningsComponent {
 
   content = useIntlayer("total_openings");
 }
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
-
-  </Tab>
-</Tabs>
-
-## Thiết lập nội dung số nhiều
-
-Để thiết lập nội dung số nhiều trong dự án Intlayer của bạn, hãy tạo một mô-đun nội dung sử dụng trợ giúp `plural`. Danh mục `other` là bắt buộc và được sử dụng làm phương án dự phòng khi một ngôn ngữ không xác định danh mục cụ thể hơn.
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { plural, t, type Dictionary } from "intlayer";
-
-const openingsContent = {
-  key: "total_openings",
-  content: {
-    totalOpenings: t({
-      en: plural({
-        one: "{{count}} opening",
-        other: "{{count}} openings",
-      }),
-      vi: plural({
-        other: "{{count}} vị trí đang tuyển",
-      }),
-    }),
-  },
-} satisfies Dictionary;
-
-export default openingsContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "total_openings",
-  "content": {
-    "totalOpenings": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} opening",
-            "other": "{{count}} openings"
-          }
-        },
-        "vi": {
-          "nodeType": "plural",
-          "plural": {
-            "other": "{{count}} vị trí đang tuyển"
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-> Các danh mục được hỗ trợ là `zero`, `one`, `two`, `few`, `many`, `other`. Bạn chỉ cần khai báo các danh mục mà ngôn ngữ mục tiêu của bạn sử dụng, Intlayer sẽ quay lại `other` khi không có danh mục cụ thể nào khớp.
->
-> Trình giữ chỗ `{{count}}` được thay thế tự động bằng số lượng bạn chuyển vào lúc thực thi. Bạn cũng có thể bao gồm các trình giữ chỗ khác (xem [Trình giữ chỗ tùy chỉnh](#custom-placeholders) bên dưới).
-
-## Sử dụng nội dung số nhiều với React Intlayer
-
-Để sử dụng nội dung số nhiều bên trong một thành phần React, hãy truy xuất nó thông qua hook `useIntlayer` và gọi nó với một số lượng. Ngôn ngữ đang hoạt động và số lượng được kết hợp để chọn danh mục CLDR phù hợp.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      {/* Trong tiếng Anh:                                  */}
-      {/*  count=0  → "0 openings"   (other)           */}
-      {/*  count=1  → "1 opening"    (one)             */}
-      {/*  count=2  → "2 openings"   (other)           */}
-      {/*  count=21 → "21 openings"  (other)           */}
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
 ```
 
 Bạn có thể gọi hàm được trả về theo hai cách tương đương:
 
+Để sử dụng nội dung số nhiều với `vanilla-intlayer`, hãy lấy nó thông qua hook `useIntlayer` và gọi nó với một số lượng. Dưới đây là một ví dụ:
+
 ```tsx
 totalOpenings(21); // viết tắt: chỉ số lượng
 totalOpenings({ count: 21 }); // dạng đầy đủ
 ```
 
+  </Tab>
+</Tabs>
+
 ## Trình giữ chỗ tùy chỉnh
 
 Chuỗi số nhiều có thể bao gồm các trình giữ chỗ khác ngoài `{{count}}`. Chuyển chúng dưới dạng đối tượng cùng với `count`:

package/docs/vi/dynamic_dictionaries/variants.md

@@ -523,6 +523,27 @@ Thay vào đó, hãy khai báo biến thể một lần trên provider, y như `
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
+    <Tabs>
+      <Tab label="Intlayer >=9.4" value=">=9.4">
+
+        ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+        import { IntlayerProvider } from "next-intlayer/server";
+
+        export default async function Layout({ children, params }) {
+          const { locale } = await params;
+          const schoolType = await getSchoolType();
+
+          return (
+            <IntlayerProvider locale={locale} variant={schoolType}>
+              {children}
+            </IntlayerProvider>
+          );
+        }
+        ```
+
+      </Tab>
+      <Tab label="Intlayer <9.4" value="<9.4">
+
     ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
     import { IntlayerServerProvider } from "next-intlayer/server";
     import { IntlayerClientProvider } from "next-intlayer";
@@ -541,6 +562,9 @@ Thay vào đó, hãy khai báo biến thể một lần trên provider, y như `
     }
     ```
 
+      </Tab>
+    </Tabs>
+
   </Tab>
   <Tab label="Vue" value="vue">
     ```ts fileName="main.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}