@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.5

package/docs/vi/dictionary/nesting.md

@@ -29,6 +29,45 @@ author: aymericzip
 
 Trong Intlayer, lồng nội dung được thực hiện thông qua hàm `nest`, cho phép bạn tham chiếu và tái sử dụng nội dung từ một từ điển khác. Thay vì sao chép nội dung, bạn có thể trỏ đến một module nội dung hiện có bằng khóa của nó.
 
+## Thiết lập Nesting
+
+Để thiết lập nesting trong dự án Intlayer của bạn, trước tiên bạn định nghĩa nội dung cơ sở mà bạn muốn tái sử dụng. Sau đó, trong một module nội dung riêng biệt, bạn sử dụng hàm `nest` để import nội dung đó.
+
+### Từ điển cơ bản
+
+Dưới đây là một ví dụ về một từ điển cơ bản để lồng vào một từ điển khác:
+
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { type Dictionary } from "intlayer";
+
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
+
+export default firstDictionary;
+```
+
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
+```
+
 ## Thiết lập lồng nội dung
 
 <Tabs group="framework">

package/docs/vi/dictionary/translation.md

@@ -259,64 +259,3 @@ document.getElementById("welcome-message")!.textContent = String(
 
   </Tab>
 </Tabs>
-
-## Đối tượng Nội dung Tùy chỉnh
-
-`intlayer` hỗ trợ các đối tượng nội dung tùy chỉnh cho việc dịch, cho phép bạn định nghĩa các cấu trúc phức tạp hơn trong khi vẫn đảm bảo an toàn kiểu. Dưới đây là một ví dụ với một đối tượng tùy chỉnh:
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-interface ICustomContent {
-  title: string;
-  content: string;
-}
-
-const customContent = {
-  key: "custom_content",
-  content: {
-    profileText: t<ICustomContent>({
-      en: {
-        title: "Page Title",
-        content: "Page Content",
-      },
-      fr: {
-        title: "Titre de la Page",
-        content: "Contenu de la Page",
-      },
-      es: {
-        title: "Título de la Página",
-        content: "Contenido de la Página",
-      },
-    }),
-  },
-} satisfies Dictionary;
-
-export default customContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "custom_content",
-  "content": {
-    "profileText": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "title": "Tiêu đề Trang",
-          "content": "Nội dung Trang"
-        },
-        "fr": {
-          "title": "Titre de la Page",
-          "content": "Contenu de la Page"
-        },
-        "es": {
-          "title": "Tiêu đề Trang",
-          "content": "Nội dung Trang"
-        }
-      }
-    }
-  }
-}
-```

package/docs/vi/formatters.md

@@ -53,6 +53,8 @@ author: aymericzip
 
 Intlayer cung cấp một bộ helper nhẹ xây dựng trên các API `Intl` gốc, cùng với một wrapper `Intl` được lưu trong bộ nhớ đệm để tránh việc tạo lại các bộ định dạng nặng nhiều lần. Các tiện ích này hoàn toàn nhận biết locale và có thể được sử dụng từ package chính `intlayer`.
 
+## React Formatters
+
 ### Import
 
 ```ts
@@ -80,6 +82,61 @@ import {
 
 Nếu bạn sử dụng React, các hook cũng có sẵn; xem `react-intlayer/format`.
 
+### Các Hook Có Sẵn
+
+Tất cả các hook tự động sử dụng locale từ `IntlayerProvider` hoặc `IntlayerServerProvider`.
+
+| Hook                | Description                         | Example Output                |
+| ------------------- | ----------------------------------- | ----------------------------- |
+| `useNumber()`       | Định dạng số với phân nhóm          | `"123,456.789"`               |
+| `useCurrency()`     | Định dạng giá trị tiền tệ           | `"€1,234.50"`                 |
+| `usePercentage()`   | Định dạng phần trăm                 | `"25%"`                       |
+| `useDate()`         | Định dạng ngày và giờ               | `"Aug 2, 2025"`               |
+| `useRelativeTime()` | Định dạng thời gian tương đối       | `"in 3 days"`                 |
+| `useUnit()`         | Định dạng giá trị với đơn vị        | `"5 kilometers"`              |
+| `useCompact()`      | Định dạng số ở dạng ký hiệu compact | `"1.2K"`                      |
+| `useList()`         | Định dạng mảng dưới dạng danh sách  | `"apple, banana, and orange"` |
+| `useIntl()`         | Lấy object `Intl` được gắn locale   | Full `Intl` API access        |
+
+### Ví dụ Hoàn chỉnh
+
+```tsx
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/format";
+
+const MyComponent = () => {
+  const number = useNumber();
+  const currency = useCurrency();
+  const date = useDate();
+  const percentage = usePercentage();
+  const compact = useCompact();
+  const list = useList();
+  const relativeTime = useRelativeTime();
+  const unit = useUnit();
+
+  return (
+    <div>
+      <p>{number(123456.789)}</p>
+      <p>{currency(1234.5, { currency: "EUR" })}</p>
+      <p>{date(new Date(), "short")}</p>
+      <p>{percentage(0.25)}</p>
+      <p>{compact(1200)}</p>
+      <p>{list(["apple", "banana", "orange"])}</p>
+      <p>{relativeTime(new Date(), new Date(Date.now() + 86400000))}</p>
+      <p>{unit(5, { unit: "kilometer" })}</p>
+    </div>
+  );
+};
+```
+
 ## Intl được lưu trong bộ nhớ đệm
 
 `Intl` được xuất ra là một wrapper mỏng, được lưu trong bộ nhớ đệm quanh `Intl` toàn cục. Nó ghi nhớ các thể hiện của `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator`, và `PluralRules`, giúp tránh việc xây dựng lại cùng một bộ định dạng nhiều lần.
@@ -134,6 +191,61 @@ const regionNames = new Intl.DisplayNames("fr", { type: "region" });
 regionNames.of("US"); // "États-Unis"
 ```
 
+### Các Composables Có Sẵn
+
+Tất cả các composables trả về computed refs tự động sử dụng locale từ `IntlayerProvider` được inject.
+
+| Composable          | Mô tả                                | Ví dụ Output                  |
+| ------------------- | ------------------------------------ | ----------------------------- |
+| `useNumber()`       | Định dạng số với nhóm                | `"123,456.789"`               |
+| `useCurrency()`     | Định dạng giá trị tiền tệ            | `"€1,234.50"`                 |
+| `usePercentage()`   | Định dạng phần trăm                  | `"25%"`                       |
+| `useDate()`         | Định dạng ngày và giờ                | `"Aug 2, 2025"`               |
+| `useRelativeTime()` | Định dạng thời gian tương đối        | `"in 3 days"`                 |
+| `useUnit()`         | Định dạng giá trị với đơn vị         | `"5 kilometers"`              |
+| `useCompact()`      | Định dạng số ở ký hiệu compact       | `"1.2K"`                      |
+| `useList()`         | Định dạng mảng dưới dạng danh sách   | `"apple, banana, and orange"` |
+| `useIntl()`         | Lấy đối tượng `Intl` liên kết locale | Full `Intl` API access        |
+
+### Ví Dụ Hoàn Chỉnh
+
+```vue
+<script setup>
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
+
+const number = useNumber();
+const currency = useCurrency();
+const date = useDate();
+const percentage = usePercentage();
+const compact = useCompact();
+const list = useList();
+const relativeTime = useRelativeTime();
+const unit = useUnit();
+</script>
+
+<template>
+  <div>
+    <p>{{ number.value(123456.789) }}</p>
+    <p>{{ currency.value(1234.5, { currency: "EUR" }) }}</p>
+    <p>{{ date.value(new Date(), "short") }}</p>
+    <p>{{ percentage.value(0.25) }}</p>
+    <p>{{ compact.value(1200) }}</p>
+    <p>{{ list.value(["apple", "banana", "orange"]) }}</p>
+    <p>{{ relativeTime.value(new Date(), new Date(Date.now() + 86400000)) }}</p>
+    <p>{{ unit.value(5, { unit: "kilometer" }) }}</p>
+  </div>
+</template>
+```
+
 ### `Intl.Collator`
 
 Dùng để so sánh và sắp xếp chuỗi theo ngữ cảnh địa phương:
@@ -150,6 +262,10 @@ const words = ["äpfel", "zebra", "100", "20"];
 words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
 ```
 
+## Vanilla JS / Node.js Formatters
+
+Đối với các ngữ cảnh không sử dụng framework, hãy import các formatter trực tiếp từ `intlayer`. Lưu ý rằng bạn phải truyền locale theo cách thủ công.
+
 ### `Intl.PluralRules`
 
 Dùng để xác định các dạng số nhiều trong các locale khác nhau:
@@ -303,6 +419,8 @@ const content = getTranslation(
 - **locale**: Locale mục tiêu (mặc định là locale cấu hình sẵn)
 - **fallback**: Có fallback về locale mặc định hay không (mặc định là true)
 
+### Các tính năng Intl bổ sung
+
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
 Lấy và chuyển đổi nội dung từ một từ điển theo key:
@@ -594,3 +712,9 @@ import {
 ```
 
 > Các composable đó sẽ lấy locale từ `IntlayerProvider` được inject vào
+
+## Ghi chú
+
+- Tất cả các helper chấp nhận `string` inputs; chúng được chuyển đổi nội bộ thành numbers hoặc dates.
+- Locale mặc định là `internationalization.defaultLocale` được cấu hình của bạn nếu không được cung cấp.
+- Các tiện ích này là thin wrappers; để định dạng nâng cao, hãy sử dụng các tùy chọn `Intl` tiêu chuẩn.

package/docs/vi/interest_of_intlayer.md

@@ -30,6 +30,10 @@ author: aymericzip
 
 # Tại sao bạn nên cân nhắc sử dụng Intlayer?
 
+## Intlayer là gì?
+
+**Intlayer** là một thư viện quốc tế hóa được thiết kế đặc biệt cho các nhà phát triển JavaScript. Nó cho phép khai báo nội dung của bạn ở bất cứ đâu trong mã của bạn. Nó chuyển đổi các khai báo nội dung đa ngôn ngữ thành các từ điển có cấu trúc để tích hợp dễ dàng vào mã của bạn. Sử dụng TypeScript, **Intlayer** làm cho quá trình phát triển của bạn mạnh mẽ và hiệu quả hơn.
+
 ## Tại sao Intlayer thay thế các lựa chọn thay thế?
 
 So với các giải pháp chính như `next-intl` hay `i18next`, Intlayer là giải pháp đi kèm với các tính năng tối ưu hóa tích hợp như:
@@ -87,6 +91,195 @@ Nếu bạn sử dụng các khung khác nhau cho các phần khác nhau của
 
 ---
 
+## Tại sao Intlayer được tạo ra?
+
+Intlayer được tạo ra để giải quyết một vấn đề phổ biến ảnh hưởng đến tất cả các thư viện i18n phổ biến như `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl`, và `vue-i18n`.
+
+Tất cả các giải pháp này đều áp dụng một cách tiếp cận tập trung để liệt kê và quản lý nội dung của bạn. Ví dụ:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── es.json
+│   └── fr.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Hoặc ở đây sử dụng namespaces:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Loại kiến trúc này làm chậm quá trình phát triển và làm cho codebase trở nên phức tạp hơn để duy trì vì nhiều lý do:
+
+1. **Đối với bất kỳ component mới nào được tạo, bạn nên:**
+   - Tạo resource/namespace mới trong thư mục `locales`
+   - Nhớ import namespace mới trong page của bạn
+   - Dịch nội dung của bạn (thường được thực hiện thủ công bằng copy/paste từ các nhà cung cấp AI)
+
+2. **Đối với bất kỳ thay đổi nào được thực hiện trên components của bạn, bạn nên:**
+   - Tìm kiếm resource/namespace liên quan (xa component)
+   - Dịch nội dung của bạn
+   - Đảm bảo nội dung của bạn được cập nhật cho bất kỳ locale nào
+   - Xác minh namespace của bạn không bao gồm các keys/values không được sử dụng
+   - Đảm bảo cấu trúc của các tệp JSON của bạn giống nhau cho tất cả locales
+
+Trên các dự án chuyên nghiệp sử dụng các giải pháp này, các nền tảng bản địa hóa thường được sử dụng để giúp quản lý dịch nội dung của bạn. Tuy nhiên, điều này có thể nhanh chóng trở nên tốn kém cho các dự án lớn.
+
+Để giải quyết vấn đề này, Intlayer áp dụng một cách tiếp cận phạm vi nội dung của bạn trên mỗi component và giữ nội dung của bạn gần component của bạn, như chúng ta thường làm với CSS (`styled-components`), types, documentation (`storybook`), hoặc unit tests (`jest`).
+
+```bash codeFormat="typescript"
+.
+└── components
+    └── MyComponent
+        ├── index.content.ts
+        ├── index.test.tsx
+        ├── index.stories.tsx
+        └── index.tsx
+```
+
+```bash codeFormat="commonjs"
+.
+└── components
+    └── MyComponent
+        ├── index.content.cjs
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
+```
+
+```bash codeFormat="esm"
+.
+└── components
+    └── MyComponent
+        ├── index.content.mjs
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
+```
+
+```tsx fileName="./components/MyComponent/index.content.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      vi: "Xin chào Thế giới",
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+```tsx fileName="./components/MyComponent/index.tsx" codeFormat={["typescript", "esm"]}
+import { useIntlayer } from "react-intlayer";
+
+export const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+Cách tiếp cận này cho phép bạn:
+
+1. **Tăng tốc độ phát triển**
+   - Các tệp `.content.{{ts|mjs|cjs|json}}` có thể được tạo bằng cách sử dụng extension VSCode
+   - Các công cụ hoàn thành tự động AI trong IDE của bạn (như GitHub Copilot) có thể giúp bạn khai báo nội dung của bạn, giảm copy/paste
+
+2. **Làm sạch codebase của bạn**
+   - Giảm độ phức tạp
+   - Tăng khả năng bảo trì
+
+3. **Sao chép components và nội dung liên quan của chúng dễ dàng hơn (Ví dụ: login/register components, vv)**
+   - Bằng cách hạn chế rủi ro tác động đến nội dung của các components khác
+   - Bằng cách copy/paste nội dung của bạn từ ứng dụng này sang ứng dụng khác mà không cần phụ thuộc bên ngoài
+
+4. **Tránh làm ô nhiễm codebase của bạn bằng các keys/values không được sử dụng cho các components không được sử dụng**
+   - Nếu bạn không sử dụng một component, Intlayer sẽ không import nội dung liên quan của nó
+   - Nếu bạn xóa một component, bạn sẽ dễ dàng nhớ để xóa nội dung liên quan của nó vì nó sẽ có trong cùng một thư mục
+
+5. **Giảm chi phí suy luận cho các AI agents để khai báo nội dung đa ngôn ngữ của bạn**
+   - AI agent sẽ không phải quét toàn bộ codebase của bạn để biết nơi triển khai nội dung của bạn
+   - Dịch có thể dễ dàng thực hiện bằng các công cụ hoàn thành tự động AI trong IDE của bạn (như GitHub Copilot)
+
+6. **Tối ưu hóa hiệu suất tải**
+   - Nếu một component được lazy-loaded, nội dung liên quan của nó sẽ được tải cùng lúc
+
+## Các tính năng bổ sung của Intlayer
+
+| Tính năng                                                                                                                 | Mô tả                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Hỗ trợ đa Framework**<br><br>Intlayer tương thích với tất cả các framework và thư viện chính, bao gồm Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, và nhiều hơn nữa.                                                                                                                                                                                                                                                         |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true)       | **Quản lý nội dung được hỗ trợ bởi JavaScript**<br><br>Tận dụng tính linh hoạt của JavaScript để định nghĩa và quản lý nội dung của bạn một cách hiệu quả. <br><br> - [Khai báo nội dung](https://intlayer.org/doc/concept/content)                                                                                                                                                                                                    |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700">  | **Compiler**<br><br>Intlayer Compiler trích xuất tự động nội dung từ các thành phần và tạo các tệp từ điển.<br><br> - [Compiler](https://intlayer.org/doc/compiler)                                                                                                                                                                                                                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Tệp khai báo nội dung theo Locale**<br><br>Tăng tốc độ phát triển của bạn bằng cách khai báo nội dung của bạn một lần, trước khi tự động tạo.<br><br> - [Tệp khai báo nội dung theo Locale](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                                        |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Môi trường An toàn về Kiểu**<br><br>Tận dụng TypeScript để đảm bảo định nghĩa nội dung và mã của bạn không có lỗi, đồng thời hưởng lợi từ tính năng hoàn thành tự động của IDE.<br><br> - [Cấu hình TypeScript](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                                            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **Thiết lập đơn giản**<br><br>Bắt đầu nhanh chóng với cấu hình tối thiểu. Điều chỉnh các cài đặt cho quốc tế hóa, định tuyến, AI, xây dựng và xử lý nội dung một cách dễ dàng. <br><br> - [Khám phá tích hợp Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                     |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **Truy xuất nội dung được đơn giản hóa**<br><br>Không cần gọi hàm `t` của bạn cho mỗi phần nội dung. Truy xuất tất cả nội dung của bạn trực tiếp bằng cách sử dụng một hook duy nhất.<br><br> - [Tích hợp React](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **Triển khai thành phần máy chủ nhất quán**<br><br>Phù hợp hoàn hảo với các thành phần máy chủ Next.js, sử dụng cách triển khai giống nhau cho cả thành phần máy khách và máy chủ, không cần chuyển hàm `t` của bạn qua mỗi thành phần máy chủ. <br><br> - [Server Components](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                                        |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **Codebase được tổ chức**<br><br>Giữ codebase của bạn được tổ chức hơn: 1 thành phần = 1 từ điển trong cùng một thư mục. Các bản dịch gần với các thành phần tương ứng của chúng nâng cao khả năng bảo trì và rõ ràng. <br><br> - [Cách Intlayer hoạt động](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **Định tuyến nâng cao**<br><br>Hỗ trợ đầy đủ định tuyến ứng dụng, thích ứng liền mạch với các cấu trúc ứng dụng phức tạp, cho Next.js, React, Vite, Vue.js, v.v.<br><br> - [Khám phá tích hợp Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Hỗ trợ Markdown**<br><br>Nhập và diễn giải các tệp locale và Markdown từ xa cho nội dung đa ngôn ngữ như chính sách quyền riêng tư, tài liệu, v.v. Diễn giải và làm cho siêu dữ liệu Markdown có thể truy cập được trong mã của bạn.<br><br> - [Content files](https://intlayer.org/doc/concept/content/file)                                                                                                                        |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **Trình chỉnh sửa hình ảnh & CMS miễn phí**<br><br>Trình chỉnh sửa hình ảnh và CMS miễn phí có sẵn cho những người viết nội dung, loại bỏ nhu cầu có nền tảng bản địa hóa. Giữ nội dung của bạn được đồng bộ hóa bằng Git, hoặc ngoại hóa hoàn toàn hoặc một phần với CMS.<br><br> - [Intlayer Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms)                            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Nội dung có thể Tree-shakable**<br><br>Nội dung có thể tree-shake, giảm kích thước của bộ bundle cuối cùng. Tải nội dung trên mỗi thành phần, loại trừ bất kỳ nội dung không sử dụng nào từ bộ bundle của bạn. Hỗ trợ tải lười để nâng cao hiệu quả tải ứng dụng. <br><br> - [Tối ưu hóa bản dựng ứng dụng](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                              |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **Kết xuất tĩnh**<br><br>Không cản trở kết xuất tĩnh. <br><br> - [Tích hợp Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **Dịch được hỗ trợ bởi AI**<br><br>Biến trang web của bạn thành 231 ngôn ngữ chỉ bằng một clic bằng cách sử dụng các công cụ dịch được hỗ trợ bởi AI nâng cao của Intlayer bằng cách sử dụng nhà cung cấp/khóa API AI của riêng bạn. <br><br> - [Tích hợp CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [Tự động điền](https://intlayer.org/doc/concept/auto-fill) |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **Tích hợp MCP Server**<br><br>Cung cấp máy chủ MCP (Model Context Protocol) cho tự động hóa IDE, cho phép quản lý nội dung và quy trình i18n liền mạch trực tiếp trong môi trường phát triển của bạn. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/mcp_server.md)                                                                                                                            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **Phần mở rộng VSCode**<br><br>Intlayer cung cấp phần mở rộng VSCode để giúp bạn quản lý nội dung và bản dịch của bạn, xây dựng từ điển của bạn, dịch nội dung của bạn, và nhiều hơn nữa. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **Khả năng tương tác**<br><br>Cho phép khả năng tương tác với react-i18next, next-i18next, next-intl, và react-intl. <br><br> - [Intlayer và react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer và next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer và next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)                                                 |
+| Testing Missing Translations (CLI/CI)                                                                                     | ✅ CLI: npx intlayer content test (CI-friendly audit)                                                                                                                                                                                                                                                                                                                                                                                  |
+
+## So sánh Intlayer với các giải pháp khác
+
+| Tính năng                                        | `intlayer`                                                                                                                                 | `react-i18next`                                                                                        | `react-intl` (FormatJS)                                                                                                       | `lingui`                                                            | `next-intl`                                                                                            | `next-i18next`                                                                                         | `vue-i18n`                                                     |
+| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------- |
+| **Bản dịch gần các Component**                   | ✅ Có, nội dung được đặt cùng với mỗi component                                                                                            | ❌ Không                                                                                               | ❌ Không                                                                                                                      | ❌ Không                                                            | ❌ Không                                                                                               | ❌ Không                                                                                               | ✅ Có - sử dụng `Single File Components` (SFCs)                |
+| **Tích hợp TypeScript**                          | ✅ Nâng cao, các kiểu được tạo tự động một cách nghiêm ngặt                                                                                | ⚠️ Cơ bản; cần cấu hình thêm để đảm bảo an toàn                                                        | ✅ Tốt, nhưng ít nghiêm ngặt hơn                                                                                              | ⚠️ Typings, cần cấu hình                                            | ✅ Tốt                                                                                                 | ⚠️ Cơ bản                                                                                              | ✅ Tốt (có loại; key-safety cần thiết lập)                     |
+| **Phát hiện bản dịch bị thiếu**                  | ✅ Lỗi TypeScript và lỗi/cảnh báo thời gian xây dựng                                                                                       | ⚠️ Chủ yếu là chuỗi fallback tại runtime                                                               | ⚠️ Chuỗi fallback                                                                                                             | ⚠️ Cần cấu hình thêm                                                | ⚠️ Fallback runtime                                                                                    | ⚠️ Fallback runtime                                                                                    | ⚠️ Fallback/cảnh báo runtime (có thể cấu hình)                 |
+| **Nội dung phong phú (JSX/Markdown/components)** | ✅ Hỗ trợ trực tiếp                                                                                                                        | ⚠️ Hạn chế / chỉ nội suy                                                                               | ⚠️ Cú pháp ICU, không phải JSX thực sự                                                                                        | ⚠️ Hạn chế                                                          | ❌ Không được thiết kế cho các nút phong phú                                                           | ⚠️ Hạn chế                                                                                             | ⚠️ Hạn chế (components qua `<i18n-t>`, Markdown qua plugins)   |
+| **Dịch được cung cấp bởi AI**                    | ✅ Có, hỗ trợ nhiều nhà cung cấp AI. Có thể sử dụng bằng khóa API của riêng bạn. Xem xét ngữ cảnh của ứng dụng và phạm vi nội dung của bạn | ❌ Không                                                                                               | ❌ Không                                                                                                                      | ❌ Không                                                            | ❌ Không                                                                                               | ❌ Không                                                                                               | ❌ Không                                                       |
+| **Trình chỉnh sửa trực quan**                    | ✅ Có, Trình chỉnh sửa trực quan cục bộ + CMS tùy chọn; có thể externalize nội dung codebase; có thể nhúng                                 | ❌ Không / có sẵn thông qua các nền tảng bản địa hóa bên ngoài                                         | ❌ Không / có sẵn thông qua các nền tảng bản địa hóa bên ngoài                                                                | ❌ Không / có sẵn thông qua các nền tảng bản địa hóa bên ngoài      | ❌ Không / có sẵn thông qua các nền tảng bản địa hóa bên ngoài                                         | ❌ Không / có sẵn thông qua các nền tảng bản địa hóa bên ngoài                                         | ❌ Không / có sẵn thông qua các nền tảng bản địa hóa bên ngoài |
+| **Định tuyến được bản địa hóa**                  | ✅ Có, hỗ trợ các đường dẫn được bản địa hóa sẵn (hoạt động với Next.js & Vite)                                                            | ⚠️ Không tích hợp sẵn, cần các plugin (ví dụ `next-i18next`) hoặc cấu hình bộ định tuyến tùy chỉnh     | ❌ Không, chỉ định dạng thư, định tuyến phải thủ công                                                                         | ⚠️ Không tích hợp sẵn, cần các plugin hoặc cấu hình thủ công        | ✅ Tích hợp sẵn, App Router hỗ trợ segment `[locale]`                                                  | ✅ Tích hợp sẵn                                                                                        | ✅ Tích hợp sẵn                                                |
+| **Tạo định tuyến động**                          | ✅ Có                                                                                                                                      | ⚠️ Plugin/ecosystem hoặc thiết lập thủ công                                                            | ❌ Không được cung cấp                                                                                                        | ⚠️ Plugin/thủ công                                                  | ✅ Có                                                                                                  | ✅ Có                                                                                                  | ❌ Không được cung cấp (Nuxt i18n cung cấp)                    |
+| **Đa số hóa**                                    | ✅ Các mẫu dựa trên liệt kê                                                                                                                | ✅ Có thể cấu hình (các plugin như i18next-icu)                                                        | ✅ (ICU)                                                                                                                      | ✅ (ICU/messageformat)                                              | ✅ Tốt                                                                                                 | ✅ Tốt                                                                                                 | ✅ Các quy tắc số nhiều tích hợp sẵn                           |
+| **Định dạng (ngày, số, tiền tệ)**                | ✅ Định dạng được tối ưu hóa (Intl ở phía dưới)                                                                                            | ⚠️ Qua các plugin hoặc sử dụng Intl tùy chỉnh                                                          | ✅ Định dạng ICU                                                                                                              | ✅ ICU/CLI helpers                                                  | ✅ Tốt (trợ giúp Intl)                                                                                 | ✅ Tốt (trợ giúp Intl)                                                                                 | ✅ Định dạng ngày/số tích hợp sẵn (Intl)                       |
+| **Định dạng nội dung**                           | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP)                                                                                           | ⚠️ .json                                                                                               | ✅ .json, .js                                                                                                                 | ⚠️ .po, .json                                                       | ✅ .json, .js, .ts                                                                                     | ⚠️ .json                                                                                               | ✅ .json, .js                                                  |
+| **Hỗ trợ ICU**                                   | ⚠️ WIP                                                                                                                                     | ⚠️ Qua plugin (i18next-icu)                                                                            | ✅ Có                                                                                                                         | ✅ Có                                                               | ✅ Có                                                                                                  | ⚠️ Qua plugin (`i18next-icu`)                                                                          | ⚠️ Qua định dạng/trình biên dịch tùy chỉnh                     |
+| **Trợ giúp SEO (hreflang, sitemap)**             | ✅ Công cụ tích hợp sẵn: trợ giúp cho sitemap, robots.txt, metadata                                                                        | ⚠️ Plugin cộng đồng/thủ công                                                                           | ❌ Không phải là lõi                                                                                                          | ❌ Không phải là lõi                                                | ✅ Tốt                                                                                                 | ✅ Tốt                                                                                                 | ❌ Không phải là lõi (Nuxt i18n cung cấp trợ giúp)             |
+| **Ecosystem / Cộng đồng**                        | ⚠️ Nhỏ hơn nhưng phát triển nhanh và đáp ứng nhanh                                                                                         | ✅ Lớn nhất và trưởng thành                                                                            | ✅ Lớn                                                                                                                        | ⚠️ Nhỏ hơn                                                          | ✅ Vừa phải, tập trung vào Next.js                                                                     | ✅ Vừa phải, tập trung vào Next.js                                                                     | ✅ Lớn trong ecosystem Vue                                     |
+| **Server-side Rendering & Server Components**    | ✅ Có, được sắp xếp hợp lý cho SSR / React Server Components                                                                               | ⚠️ Được hỗ trợ ở cấp trang nhưng cần truyền các hàm t trên cây component cho các component máy chủ con | ⚠️ Được hỗ trợ ở cấp trang với thiết lập bổ sung, nhưng cần truyền các hàm t trên cây component cho các component máy chủ con | ✅ Được hỗ trợ, cần thiết lập                                       | ⚠️ Được hỗ trợ ở cấp trang nhưng cần truyền các hàm t trên cây component cho các component máy chủ con | ⚠️ Được hỗ trợ ở cấp trang nhưng cần truyền các hàm t trên cây component cho các component máy chủ con | ✅ SSR thông qua Nuxt/Vue SSR (không có RSC)                   |
+| **Tree-shaking (chỉ tải nội dung được sử dụng)** | ✅ Có, mỗi component tại thời gian xây dựng qua các plugin Babel/SWC                                                                       | ⚠️ Thường tải tất cả (có thể cải thiện với namespaces/code-splitting)                                  | ⚠️ Thường tải tất cả                                                                                                          | ❌ Không mặc định                                                   | ⚠️ Một phần                                                                                            | ⚠️ Một phần                                                                                            | ⚠️ Một phần (với code-splitting/thiết lập thủ công)            |
+| **Tải lười biếng**                               | ✅ Có, theo locale / theo từ điển                                                                                                          | ✅ Có (ví dụ, backends/namespaces theo yêu cầu)                                                        | ✅ Có (chia nhỏ các gói locale)                                                                                               | ✅ Có (nhập danh mục động)                                          | ✅ Có (theo tuyến/theo locale), cần quản lý namespace                                                  | ✅ Có (theo tuyến/theo locale), cần quản lý namespace                                                  | ✅ Có (thư tin locale không đồng bộ)                           |
+| **Xóa nội dung không sử dụng**                   | ✅ Có, theo từ điển tại thời gian xây dựng                                                                                                 | ❌ Không, chỉ thông qua phân đoạn namespace thủ công                                                   | ❌ Không, tất cả các thư bao khai báo được gộp                                                                                | ✅ Có, các khóa không sử dụng được phát hiện & xóa tại lúc xây dựng | ❌ Không, có thể được quản lý thủ công bằng quản lý namespace                                          | ❌ Không, có thể được quản lý thủ công bằng quản lý namespace                                          | ❌ Không, chỉ có thể thông qua tải lười biếng thủ công         |
+| **Quản lý các dự án lớn**                        | ✅ Khuyến khích mô-đun, phù hợp với design-system                                                                                          | ⚠️ Cần kỷ luật tệp tốt                                                                                 | ⚠️ Danh mục trung tâm có thể trở nên lớn                                                                                      | ⚠️ Có thể trở nên phức tạp                                          | ✅ Mô-đun với thiết lập                                                                                | ✅ Mô-đun với thiết lập                                                                                | ✅ Mô-đun với thiết lập Vue Router/Nuxt i18n                   |
+
 ## Sao GitHub
 
 Sao GitHub là một chỉ số mạnh mẽ về mức độ phổ biến của dự án, sự tin tưởng của cộng đồng và mức độ phù hợp lâu dài. Mặc dù không phải là thước đo trực tiếp về chất lượng kỹ thuật, chúng phản ánh số lượng nhà phát triển thấy dự án hữu ích, theo dõi tiến trình của nó và có khả năng áp dụng nó. Để ước tính giá trị của một dự án, các ngôi sao giúp so sánh sức hút giữa các lựa chọn thay thế và cung cấp thông tin chi tiết về sự phát triển của hệ sinh thái.

package/docs/vi/intlayer_with_analog.md

@@ -400,3 +400,7 @@ Tiện ích mở rộng này cung cấp:
 - **Các hành động nhanh** để dễ dàng tạo và cập nhật các bản dịch.
 
 Để biết thêm chi tiết về cách sử dụng tiện ích mở rộng, hãy tham khảo [tài liệu Tiện ích mở rộng Intlayer VS Code](https://intlayer.org/doc/vs-code-extension).
+
+### Đi Xa Hơn
+
+Để đi xa hơn, bạn có thể triển khai [trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md) hoặc ngoại hóa nội dung của bạn bằng cách sử dụng [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md).