@intlayer/docs 7.0.7 → 7.0.8-canary.0

package/docs/vi/dictionary/enumeration.md

@@ -0,0 +1,255 @@
+---
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
+title: Liệt kê
+description: Tìm hiểu cách khai báo và sử dụng các phép liệt kê trong trang web đa ngôn ngữ của bạn. Làm theo các bước trong tài liệu trực tuyến này để thiết lập dự án của bạn trong vài phút.
+keywords:
+  - Liệt kê
+  - Quốc tế hóa
+  - Tài liệu
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - enumeration
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Khởi tạo lịch sử
+---
+
+# Liệt kê / Phân số nhiều
+
+## Cách hoạt động của Liệt kê
+
+Trong Intlayer, phép liệt kê được thực hiện thông qua hàm `enu`, hàm này ánh xạ các khóa cụ thể tới nội dung tương ứng của chúng. Các khóa này có thể đại diện cho các giá trị số, phạm vi, hoặc các định danh tùy chỉnh. Khi sử dụng với React Intlayer hoặc Next Intlayer, nội dung phù hợp sẽ được tự động chọn dựa trên locale của ứng dụng và các quy tắc đã định nghĩa.
+
+## Thiết lập Liệt kê
+
+Để thiết lập phép liệt kê trong dự án Intlayer của bạn, bạn cần tạo một module nội dung bao gồm các định nghĩa liệt kê. Dưới đây là ví dụ về một phép liệt kê đơn giản cho số lượng xe hơi:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { enu, type Dictionary } from "intlayer";
+
+const carEnumeration = {
+  key: "car_count",
+  content: {
+    numberOfCar: enu({
+      "<-1": "Ít hơn âm một chiếc xe",
+      "-1": "Âm một chiếc xe",
+      "0": "Không có xe",
+      "1": "Một chiếc xe",
+      ">5": "Một vài chiếc xe",
+      ">19": "Nhiều chiếc xe",
+      "fallback": "Giá trị dự phòng", // Tùy chọn
+    }),
+  },
+} satisfies Dictionary;
+
+export default carEnumeration;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { enu } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const carEnumeration = {
+  key: "car_count",
+  content: {
+    numberOfCar: enu({
+      "<-1": "Ít hơn âm một chiếc xe",
+      "-1": "Âm một chiếc xe",
+      "0": "Không có xe",
+      "1": "Một chiếc xe",
+      ">5": "Một vài chiếc xe",
+      ">19": "Nhiều chiếc xe",
+      "fallback": "Giá trị dự phòng", // Tùy chọn
+    }),
+  },
+};
+
+export default carEnumeration;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { enu } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const carEnumeration = {
+  key: "car_count",
+  content: {
+    numberOfCar: enu({
+      "<-1": "Ít hơn âm một chiếc xe",
+      "-1": "Âm một chiếc xe",
+      "0": "Không có xe",
+      "1": "Một chiếc xe",
+      ">5": "Một vài chiếc xe",
+      ">19": "Nhiều chiếc xe",
+      "fallback": "Giá trị dự phòng", // Tùy chọn
+    }),
+  },
+};
+
+module.exports = carEnumeration;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "car_count",
+  "content": {
+    "numberOfCar": {
+      "nodeType": "enumeration",
+      "enumeration": {
+        "<-1": "Ít hơn âm một chiếc xe",
+        "-1": "Âm một chiếc xe",
+        "0": "Không có xe",
+        "1": "Một chiếc xe",
+        ">5": "Một vài chiếc xe",
+        ">19": "Nhiều chiếc xe",
+        "fallback": "Giá trị dự phòng" // Tùy chọn
+      }
+    }
+  }
+}
+```
+
+Trong ví dụ này, `enu` ánh xạ các điều kiện khác nhau tới nội dung cụ thể. Khi được sử dụng trong một component React, Intlayer có thể tự động chọn nội dung phù hợp dựa trên biến được cung cấp.
+
+> Thứ tự khai báo rất quan trọng trong các phép liệt kê của Intlayer. Khai báo hợp lệ đầu tiên sẽ được chọn. Nếu có nhiều điều kiện áp dụng, hãy đảm bảo chúng được sắp xếp đúng để tránh hành vi không mong muốn.
+
+> Nếu không khai báo giá trị dự phòng, hàm sẽ trả về `undefined` nếu không có khóa nào khớp.
+
+## Sử dụng Enumeration với React Intlayer
+
+Để sử dụng phép liệt kê trong một component React, bạn có thể tận dụng hook `useIntlayer` từ package `react-intlayer`. Hook này sẽ lấy nội dung chính xác dựa trên ID được chỉ định. Dưới đây là ví dụ về cách sử dụng:
+
+```tsx fileName="**/*.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const CarComponent: FC = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>
+        {
+          numberOfCar(0) // Kết quả: Không có xe
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(6) // Kết quả: Một vài chiếc xe
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Kết quả: Nhiều chiếc xe
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(0.01) // Kết quả: Giá trị dự phòng
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Kết quả: Nhiều xe
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(0.01) // Kết quả: Giá trị dự phòng
+        }
+      </p>
+    </div>
+  );
+};
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const CarComponent = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>
+        {
+          numberOfCar(0) // Kết quả: Không có xe
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(6) // Kết quả: Một vài chiếc xe
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Kết quả: Nhiều xe
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(0.01) // Kết quả: Giá trị dự phòng
+        }
+      </p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const CarComponent = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>
+        {
+          numberOfCar(0) // Kết quả: Không có xe
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(6) // Kết quả: Một vài chiếc xe
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Kết quả: Nhiều xe
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(0.01) // Kết quả: Giá trị dự phòng
+        }
+      </p>
+    </div>
+  );
+};
+
+module.exports = CarComponent;
+```
+
+Trong ví dụ này, component tự động điều chỉnh kết quả hiển thị dựa trên số lượng xe. Nội dung chính xác được chọn tự động, tùy thuộc vào phạm vi được chỉ định.
+
+## Tài nguyên bổ sung
+
+Để biết thêm thông tin chi tiết về cấu hình và cách sử dụng, hãy tham khảo các tài nguyên sau:
+
+- [Tài liệu CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_cli.md)
+- [Tài liệu React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_create_react_app.md)
+- [Tài liệu Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_15.md)
+
+Những tài nguyên này cung cấp thêm những hiểu biết sâu sắc về cách thiết lập và sử dụng Intlayer trong các môi trường khác nhau và với các framework đa dạng.

package/docs/vi/dictionary/file.md

@@ -0,0 +1,234 @@
+---
+createdAt: 2025-03-13
+updatedAt: 2025-06-29
+title: Tệp tin
+description: Tìm hiểu cách nhúng các tệp tin bên ngoài vào từ điển nội dung của bạn bằng cách sử dụng hàm `file`. Tài liệu này giải thích cách Intlayer liên kết và quản lý nội dung tệp tin một cách động.
+keywords:
+  - Tệp tin
+  - Quốc tế hóa
+  - Tài liệu
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - file
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Khởi tạo lịch sử
+---
+
+# Nội dung Tệp tin / Nhúng Tệp tin trong Intlayer
+
+Trong Intlayer, hàm `file` cho phép nhúng nội dung tệp tin bên ngoài vào một từ điển. Cách tiếp cận này đảm bảo Intlayer nhận diện được tệp nguồn, giúp tích hợp liền mạch với Intlayer Visual Editor và CMS.
+
+## Tại sao sử dụng `file` thay vì `import`, `require` hoặc `fs`?
+
+Khác với các phương pháp đọc tệp như `import`, `require` hoặc `fs`, việc sử dụng `file` liên kết tệp với từ điển, cho phép Intlayer theo dõi và cập nhật nội dung một cách động khi tệp được chỉnh sửa. Do đó, sử dụng `file` sẽ mang lại sự tích hợp tốt hơn với Intlayer Visual Editor và CMS.
+
+## Cài đặt Nội dung Tệp tin
+
+Để nhúng nội dung tệp vào dự án Intlayer của bạn, hãy sử dụng hàm `file` trong một module nội dung. Dưới đây là các ví dụ minh họa các cách triển khai khác nhau.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { file, type Dictionary } from "intlayer";
+
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"),
+  },
+} satisfies Dictionary;
+
+export default myFileContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { file } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// Định nghĩa nội dung tệp với kiểu Dictionary của Intlayer
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"), // Đường dẫn tới tệp được nhúng
+  },
+};
+
+export default myFileContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { file } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+// Định nghĩa nội dung tệp với kiểu Dictionary của Intlayer
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"), // Đường dẫn tới tệp được nhúng
+  },
+};
+
+module.exports = myFileContent;
+```
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "myFile": {
+      "nodeType": "file",
+      "value": "./path/to/file.txt",
+    },
+  },
+}
+```
+
+## Sử dụng Nội dung Tệp trong React Intlayer
+
+Để sử dụng nội dung tệp được nhúng 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 từ key được chỉ định và cho phép hiển thị nội dung đó một cách động.
+
+```tsx fileName="**/*.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const FileComponent: FC = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const FileComponent = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const FileComponent = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+module.exports = FileComponent;
+```
+
+## Ví dụ Markdown Đa ngôn ngữ
+
+Để hỗ trợ các tệp Markdown có thể chỉnh sửa đa ngôn ngữ, bạn có thể sử dụng `file` kết hợp với `t()` và `md()` để định nghĩa các phiên bản ngôn ngữ khác nhau của một tệp nội dung Markdown.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { file, t, md, type Dictionary } from "intlayer";
+
+const myMultilingualContent = {
+  key: "my_multilingual_key",
+  content: {
+    myContent: md(
+      t({
+        en: file("src/components/test.en.md"),
+        fr: file("src/components/test.fr.md"),
+        es: file("src/components/test.es.md"),
+      })
+    ),
+  },
+} satisfies Dictionary;
+
+export default myMultilingualContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { file, t, md } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const myMultilingualContent = {
+  key: "my_multilingual_key",
+  content: {
+    myContent: md(
+      t({
+        en: file("src/components/test.en.md"),
+        fr: file("src/components/test.fr.md"),
+        es: file("src/components/test.es.md"),
+      })
+    ),
+  },
+};
+
+export default myMultilingualContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { file, t, md } = require("intlayer");
+
+const myMultilingualContent = {
+  key: "my_multilingual_key",
+  content: {
+    myContent: md(
+      t({
+        en: file("src/components/test.en.md"),
+        fr: file("src/components/test.fr.md"),
+        es: file("src/components/test.es.md"),
+      })
+    ),
+  },
+};
+```
+
+Cấu hình này cho phép nội dung được truy xuất động dựa trên ngôn ngữ ưu tiên của người dùng. Khi được sử dụng trong Intlayer Visual Editor hoặc CMS, hệ thống sẽ nhận biết rằng nội dung đến từ các tệp Markdown được chỉ định và đảm bảo chúng vẫn có thể chỉnh sửa được.
+
+## Các loại đường dẫn khác nhau
+
+Khi sử dụng hàm `file`, bạn có thể sử dụng các loại đường dẫn khác nhau để chỉ định tệp cần nhúng.
+
+- `file("./path/to/file.txt")` - Đường dẫn tương đối đến tệp hiện tại
+- `file("path/to/file.txt")` - Đường dẫn tương đối đến thư mục gốc của dự án
+- `file("/users/username/path/to/file.txt")` - Đường dẫn tuyệt đối
+
+## Cách Intlayer Xử Lý Nội Dung Tệp
+
+Hàm `file` dựa trên module `fs` của Node.js để đọc nội dung của tệp được chỉ định và chèn nó vào từ điển. Khi được sử dụng kết hợp với Intlayer Visual Editor hoặc CMS, Intlayer có thể theo dõi mối quan hệ giữa từ điển và tệp. Điều này cho phép Intlayer:
+
+- Nhận biết rằng nội dung xuất phát từ một tệp cụ thể.
+- Tự động cập nhật nội dung từ điển khi tệp liên kết được chỉnh sửa.
+- Đảm bảo đồng bộ giữa tệp và từ điển, giữ nguyên tính toàn vẹn của nội dung.
+
+## Tài Nguyên Bổ Sung
+
+Để biết thêm chi tiết về cách cấu hình và sử dụng nhúng tệp trong Intlayer, hãy tham khảo các tài nguyên sau:
+
+- [Tài liệu CLI của Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_cli.md)
+- [Tài liệu React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_create_react_app.md)
+- [Tài liệu Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_15.md)
+- [Tài liệu Nội dung Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/markdown.md)
+- [Tài liệu Nội dung Dịch thuật](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/translation.md)
+
+Những tài nguyên này cung cấp thêm những hiểu biết sâu sắc về nhúng tệp, quản lý nội dung, và tích hợp của Intlayer với các framework khác nhau.

package/docs/vi/dictionary/function_fetching.md

@@ -0,0 +1,212 @@
+---
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
+title: Lấy Dữ Liệu Hàm
+description: Tìm hiểu cách khai báo và sử dụng lấy dữ liệu hàm trong trang web đa ngôn ngữ của bạn. Làm theo các bước trong tài liệu trực tuyến này để thiết lập dự án của bạn trong vài phút.
+keywords:
+  - Lấy Dữ Liệu Hàm
+  - Quốc tế hóa
+  - Tài liệu
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - function-fetching
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Khởi tạo lịch sử
+---
+
+# Lấy Dữ Liệu Hàm
+
+Intlayer cho phép bạn khai báo các hàm nội dung trong các module nội dung của bạn, có thể là đồng bộ hoặc bất đồng bộ. Khi ứng dụng được xây dựng, Intlayer sẽ thực thi các hàm này để lấy kết quả của hàm. Giá trị trả về phải là một đối tượng JSON hoặc một giá trị đơn giản như chuỗi hoặc số.
+
+> Cảnh báo: lấy dữ liệu hàm hiện tại không khả dụng trong khai báo nội dung JSON và các tệp khai báo nội dung từ xa.
+
+## Khai Báo Hàm
+
+Dưới đây là ví dụ về một hàm đồng bộ đơn giản lấy nội dung:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import type { Dictionary } from "intlayer";
+
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "This is the content rendered by a function",
+  },
+} satisfies Dictionary;
+
+export default functionContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+/** @type {import('intlayer').Dictionary} */
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "Đây là nội dung được hiển thị bởi một hàm",
+  },
+};
+
+export default functionContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+/** @type {import('intlayer').Dictionary} */
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "Đây là nội dung được hiển thị bởi một hàm",
+  },
+};
+
+module.exports = functionContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "function_content",
+  "content": {
+    "text": "Đây là nội dung được hiển thị bởi một hàm"
+  }
+}
+```
+
+Trong ví dụ này, khóa `text` chứa một hàm trả về một chuỗi. Nội dung này có thể được hiển thị trong các component React của bạn bằng cách sử dụng các package trình thông dịch của Intlayer như `react-intlayer`.
+
+## Lấy Dữ liệu Bất đồng bộ (Asynchronous Function Fetching)
+
+Ngoài các hàm đồng bộ, Intlayer còn hỗ trợ các hàm bất đồng bộ, cho phép bạn lấy dữ liệu từ các nguồn bên ngoài hoặc mô phỏng việc lấy dữ liệu với dữ liệu giả (mock data).
+
+Dưới đây là một ví dụ về hàm bất đồng bộ mô phỏng việc lấy dữ liệu từ server:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { setTimeout } from "node:timers/promises";
+import type { Dictionary } from "intlayer";
+
+const fakeFetch = async (): Promise<string> => {
+  // Chờ 200ms để mô phỏng việc lấy dữ liệu từ server
+  return await setTimeout(200).then(() => "Đây là nội dung được lấy từ server");
+};
+
+const asyncFunctionContent = {
+  key: "async_function",
+  content: { text: fakeFetch },
+} satisfies Dictionary;
+
+export default asyncFunctionContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { setTimeout } from "node:timers/promises";
+
+/** @type {import('intlayer').Dictionary} */
+const fakeFetch = async () => {
+  // Chờ 200ms để mô phỏng việc lấy dữ liệu từ server
+  await setTimeout(200);
+  return "Đây là nội dung được lấy từ server";
+};
+
+const asyncFunctionContent = {
+  key: "async_function",
+  content: { text: fakeFetch },
+};
+
+export default asyncFunctionContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { setTimeout } = require("node:timers/promises");
+
+/** @type {import('intlayer').Dictionary} */
+const fakeFetch = async () => {
+  // Chờ 200ms để mô phỏng việc lấy dữ liệu từ server
+  await setTimeout(200);
+  return "Đây là nội dung được lấy từ server";
+};
+
+const asyncFunctionContent = {
+  key: "async_function",
+  content: { text: fakeFetch },
+};
+
+module.exports = asyncFunctionContent;
+```
+
+```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
+Không thể lấy nội dung từ file JSON, hãy sử dụng file .ts hoặc .js thay thế
+```
+
+Trong trường hợp này, hàm `fakeFetch` mô phỏng một độ trễ để giả lập thời gian phản hồi của server. Intlayer thực thi hàm bất đồng bộ và sử dụng kết quả làm nội dung cho khóa `text`.
+
+## Sử dụng Nội dung Dựa trên Hàm trong Các Thành phần React
+
+Để sử dụng nội dung dựa trên hàm trong một thành phần React, bạn cần import `useIntlayer` từ `react-intlayer` và gọi nó với ID nội dung để lấy nội dung. Dưới đây là một ví dụ:
+
+```typescript fileName="**/*.jsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const MyComponent: FC = () => {
+  const functionContent = useIntlayer("function_content");
+  const asyncFunctionContent = useIntlayer("async_function_content");
+
+  return (
+    <div>
+      <p>{functionContent.text}</p>
+      {/* Đầu ra: Đây là nội dung được hiển thị bởi một hàm */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* Đầu ra: Đây là nội dung được lấy từ server */}
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const MyComponent = () => {
+  const functionContent = useIntlayer("function_content");
+  const asyncFunctionContent = useIntlayer("async_function_content");
+
+  return (
+    <div>
+      <p>{functionContent.text}</p>
+      {/* Đầu ra: Đây là nội dung được hiển thị bởi một hàm */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* Đầu ra: Đây là nội dung được lấy từ server */}
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const MyComponent = () => {
+  const functionContent = useIntlayer("function_content");
+  const asyncFunctionContent = useIntlayer("async_function_content");
+
+  return (
+    <div>
+      <p>{functionContent.text}</p>
+      {/* Đầu ra: Đây là nội dung được hiển thị bởi một hàm */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* Đầu ra: Đây là nội dung được lấy từ server */}
+    </div>
+  );
+};
+
+module.exports = MyComponent;
+```