@intlayer/docs 7.0.7 → 7.0.8-canary.0

package/docs/vi/interest_of_intlayer.md

@@ -0,0 +1,292 @@
+---
+createdAt: 2024-08-14
+updatedAt: 2025-09-27
+title: Lợi ích của Intlayer
+description: Khám phá các lợi ích và ưu điểm khi sử dụng Intlayer trong các dự án của bạn. Hiểu tại sao Intlayer nổi bật so với các framework khác.
+keywords:
+  - Lợi ích
+  - Ưu điểm
+  - Intlayer
+  - Framework
+  - So sánh
+slugs:
+  - doc
+  - why
+history:
+  - version: 5.8.0
+    date: 2025-08-19
+    changes: Cập nhật bảng so sánh
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Khởi tạo lịch sử
+---
+
+# 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 ở mọi nơi trong mã nguồ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 để dễ dàng tích hợp vào mã của bạn. Sử dụng TypeScript, **Intlayer** giúp phát triển của bạn mạnh mẽ và hiệu quả hơn.
+
+## 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 thông dụng 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 phương pháp 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à khiến codebase trở nên phức tạp hơn để duy trì vì một số lý do:
+
+1. **Đối với bất kỳ component mới nào được tạo, bạn cần:**
+   - Tạo resource/namespace mới trong thư mục `locales`
+   - Nhớ import namespace mới vào trang 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 cách sao chép/dán 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 các component của bạn, bạn cần:**
+   - Tìm kiếm resource/namespace liên quan (cách 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 mọi locale
+   - Kiểm tra namespace của bạn không bao gồm các khóa/giá trị không sử dụng
+   - Đảm bảo cấu trúc các file JSON của bạn giống nhau cho tất cả các locale
+
+Trong 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 localization thường được sử dụng để giúp quản lý việc 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 đối với 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ân vùng nội dung theo từng component và giữ nội dung của bạn gần với component của bạn, giống như cách chúng ta thường làm với CSS (`styled-components`), types, tài liệu (`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"
+import { t, type Dictionary } from "intlayer";
+
+// Nội dung ví dụ cho component
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// Định nghĩa nội dung ví dụ cho component với các bản dịch
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+};
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+// Định nghĩa nội dung ví dụ cho component với các bản dịch
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+};
+
+module.exports = componentExampleContent;
+```
+
+```tsx fileName="./components/MyComponent/index.tsx" codeFormat="typescript"
+import { useIntlayer } from "react-intlayer";
+
+export const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+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 tiện ích mở rộng VSCode
+   - Các công cụ AI tự động hoàn thành trong IDE của bạn (như GitHub Copilot) có thể giúp bạn khai báo nội dung, giảm việc sao chép/dán
+
+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. **Nhân bản các component và nội dung liên quan dễ dàng hơn (Ví dụ: các component đăng nhập/đăng ký, v.v.)**
+   - Bằng cách hạn chế rủi ro ảnh hưởng đến nội dung của các component khác
+   - Bằng cách sao chép/dán 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 bẩn codebase của bạn với các khóa/giá trị không sử dụng cho các component không dùng đến**
+   - Nếu bạn không sử dụng một component, Intlayer sẽ không nhập 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 vì nó sẽ nằm trong cùng một thư mục
+
+5. **Giảm chi phí suy luận cho các AI agent khi 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
+   - Việc dịch thuật có thể dễ dàng thực hiện bằng các công cụ AI hỗ trợ tự động hoàn thành trong IDE của bạn (như GitHub Copilot)
+
+6. **Tối ưu hiệu suất tải**
+   - Nếu một component được tải theo lazy-load, nội dung liên quan 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ả                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ![Tính năng](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 lớn, bao gồm Next.js, React, Vite, Vue.js, Nuxt, Preact, Express và nhiều hơn nữa.                                                                                                                                                                                                                                                    |
+| ![Tính năng](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.png?raw=true)       | **Quản lý Nội dung Bằng JavaScript**<br><br>Khai thác sự 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)                                                                                                                                                                                                         |
+| ![Tính năng](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 Ngôn Ngữ**<br><br>Tăng tốc phát triển bằng cách khai báo nội dung một lần, trước khi tự động tạo.<br><br> - [Tệp Khai Báo Nội Dung Theo Ngôn Ngữ](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 Kiểu Dữ Liệ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 tự động hoàn thành trong IDE.<br><br> - [Cấu hình TypeScript](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                             |
+| ![Tính năng](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **Cài đặt Đơn giản hóa**<br><br>Bắt đầu nhanh chóng với cấu hình tối thiểu. Dễ dàng điều chỉnh các thiết lập cho quốc tế hóa, định tuyến, AI, build và xử lý nội dung.<br><br> - [Khám phá tích hợp Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                      |
+| ![Tính năng](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **Truy xuất Nội dung Đơn giản hóa**<br><br>Không cần gọi hàm `t` cho từng phần nội dung. Truy xuất tất cả nội dung của bạn trực tiếp bằ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 Server Nhất quán**<br><br>Phù hợp hoàn hảo cho các thành phần server của Next.js, sử dụng cùng một triển khai cho cả thành phần client và server, không cần truyền hàm `t` của bạn qua từng thành phần server. <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ữ cho codebase của bạn có tổ chức hơn: 1 component = 1 từ điển trong cùng một thư mục. Việc đặt bản dịch gần với các component tương ứng giúp tăng khả năng bảo trì và sự 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)                           | **Điều Hướng Nâng Cao**<br><br>Hỗ trợ đầy đủ điều hướng ứng dụng, thích ứng mượt mà với các cấu trúc ứng dụng phức tạp, dành 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)                                                                                                                                                                         |
+| ![Tính năng](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Hỗ trợ Markdown**<br><br>Nhập và giải thích các tệp locale và Markdown từ xa cho nội dung đa ngôn ngữ như chính sách bảo mật, tài liệu, v.v. Giải thích và làm cho metadata của Markdown có thể truy cập trong mã của bạn.<br><br> - [Tệp nội dung](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 trực quan và CMS miễn phí**<br><br>Một trình chỉnh sửa trực quan và CMS miễn phí có sẵn cho người viết nội dung, loại bỏ nhu cầu sử dụng nền tảng bản địa hóa. Giữ nội dung của bạn đồng bộ bằng cách sử dụng Git, hoặc ngoại hóa hoàn toàn hoặc một phần với CMS.<br><br> - [Trình chỉnh sửa Intlayer](https://intlayer.org/doc/concept/editor) <br> - [CMS Intlayer](https://intlayer.org/doc/concept/cms) |
+| ![Tính năng](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Nội dung có thể Tree-shake**<br><br>Nội dung có thể tree-shake, giảm kích thước của gói cuối cùng. Tải nội dung theo từng component, loại trừ bất kỳ nội dung không sử dụng nào khỏi gói của bạn. Hỗ trợ lazy loading để nâng cao hiệu quả tải ứng dụng. <br><br> - [Tối ưu hóa build ứ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 chặn 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 Thuật Bằng AI**<br><br>Biến trang web của bạn thành 231 ngôn ngữ chỉ với một cú nhấp chuột bằng cách sử dụng các công cụ dịch thuật tiên tiến dựa trên AI của Intlayer với nhà cung cấp AI/key API 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 Máy chủ MCP**<br><br>Cung cấp một 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 làm việc i18n liền mạch trực tiếp trong môi trường phát triển của bạn. <br><br> - [Máy chủ MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/mcp_server.md)                                                                                                     |
+| ![Tính năng](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **Tiện ích mở rộng VSCode**<br><br>Intlayer cung cấp một tiện ích mở rộng VSCode giúp bạn quản lý nội dung và bản dịch của mình, xây dựng từ điển, dịch nội dung và nhiều hơn thế nữa. <br><br> - [Tiện ích mở rộng VSCode](https://intlayer.org/doc/vi/vs-code-extension)                                                                                                                                                     |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                      | **Tương tác đa nền tảng**<br><br>Cho phép tương tác đa nền tảng 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)                                    |
+| Kiểm tra Bản dịch Thiếu (CLI/CI)                                                                                            | ✅ CLI: npx intlayer content test (kiểm tra thân thiện với CI)                                                                                                                                                                                                                                                                                                                                                                 |
+
+## 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 Thành Phần**                  | ✅ Có, nội dung được đặt gần với từng thành phần                                                                                       | ❌ 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, tự động tạo kiểu 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ó kiểu; cần thiết lập an toàn khóa)                   |
+| **Phát hiện bản dịch còn thiếu**                 | ✅ Đánh dấu lỗi TypeScript và lỗi/cảnh báo trong thời gian biên dịch                                                                   | ⚠️ Chủ yếu là chuỗi dự phòng khi chạy                                                                         | ⚠️ Chuỗi dự phòng                                                                                                                    | ⚠️ Cần cấu hình thêm                                                       | ⚠️ Chuỗi dự phòng khi chạy                                                                                    | ⚠️ Chuỗi dự phòng khi chạy                                                                                    | ⚠️ Chuỗi dự phòng/cảnh báo khi chạy (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 thiết kế cho các node phong phú                                                                      | ⚠️ Hạn chế                                                                                                    | ⚠️ Hạn chế (các component qua `<i18n-t>`, Markdown qua plugin) |
+| **Dịch thuật hỗ trợ AI**                         | ✅ Có, hỗ trợ nhiều nhà cung cấp AI. Có thể sử dụng bằng các khóa API riêng của bạn. Xem xét ngữ cảnh của ứng dụng và phạm vi nội dung | ❌ 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ể tách nội dung codebase ra ngoài; có thể nhúng được                      | ❌ Không / có sẵn qua các nền tảng nội địa hóa bên ngoài                                                      | ❌ Không / có sẵn qua các nền tảng nội địa hóa bên ngoài                                                                             | ❌ Không / có sẵn qua các nền tảng nội địa hóa bên ngoài                   | ❌ Không / có sẵn qua các nền tảng nội địa hóa bên ngoài                                                      | ❌ Không / có sẵn qua các nền tảng nội địa hóa bên ngoài                                                      | ❌ Không / có sẵn qua các nền tảng nội địa hóa bên ngoài       |
+| **Định tuyến địa phương hóa**                    | ✅ Có, hỗ trợ đường dẫn địa phương hóa sẵn (hoạt động với Next.js & Vite)                                                              | ⚠️ Không tích hợp sẵn, cần plugin (ví dụ `next-i18next`) hoặc cấu hình router tùy chỉnh                       | ❌ Không, chỉ định dạng thông điệp, định tuyến phải làm thủ công                                                                     | ⚠️ Không tích hợp sẵn, cần plugin hoặc cấu hình thủ công                   | ✅ Tích hợp sẵn, App Router hỗ trợ phân đoạn `[locale]`                                                       | ✅ Tích hợp sẵn                                                                                               | ✅ Tích hợp sẵn                                                |
+| **Tạo Đường Dẫn Động**                           | ✅ Có                                                                                                                                  | ⚠️ Plugin/hệ sinh thái hoặc cấu hình thủ công                                                                 | ❌ Không cung cấp                                                                                                                    | ⚠️ Plugin/thủ công                                                         | ✅ Có                                                                                                         | ✅ Có                                                                                                         | ❌ Không cung cấp (Nuxt i18n cung cấp)                         |
+| **Phân số nhiều**                                | ✅ 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                                                                                                        | ✅ Quy tắc phân số nhiều tích hợp sẵn                          |
+| **Định dạng (ngày tháng, số, tiền tệ)**          | ✅ Bộ định dạng tối ưu (Intl ở bên trong)                                                                                              | ⚠️ Qua plugins hoặc sử dụng Intl tùy chỉnh                                                                    | ✅ Bộ định dạng ICU                                                                                                                  | ✅ Trợ giúp ICU/CLI                                                        | ✅ Tốt (trợ giúp Intl)                                                                                        | ✅ Tốt (trợ giúp Intl)                                                                                        | ✅ Bộ định dạng ngày/tháng/số tích hợp sẵn (Intl)              |
+| **Định dạng nội dung**                           | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml đang phát triển)                                                                           | ⚠️ .json                                                                                                      | ✅ .json, .js                                                                                                                        | ⚠️ .po, .json                                                              | ✅ .json, .js, .ts                                                                                            | ⚠️ .json                                                                                                      | ✅ .json, .js                                                  |
+| **Hỗ trợ ICU**                                   | ⚠️ Đang phát triển (WIP)                                                                                                               | ⚠️ Qua plugin (i18next-icu)                                                                                   | ✅ Có                                                                                                                                | ✅ Có                                                                      | ✅ Có                                                                                                         | ⚠️ Qua plugin (`i18next-icu`)                                                                                 | ⚠️ Qua bộ đị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õi                                                                                                                    | ❌ Không phải lõi                                                          | ✅ Tốt                                                                                                        | ✅ Tốt                                                                                                        | ❌ Không phải lõi (Nuxt i18n cung cấp trợ giúp)                |
+| **Hệ sinh thái / Cộng đồng**                     | ⚠️ Nhỏ hơn nhưng đang phát triển nhanh và phản ứng nhanh                                                                               | ✅ Lớn nhất và trưởng thành                                                                                   | ✅ Lớn                                                                                                                               | ⚠️ Nhỏ hơn                                                                 | ✅ Trung bình, tập trung vào Next.js                                                                          | ✅ Trung bình, tập trung vào Next.js                                                                          | ✅ Lớn trong hệ sinh thái Vue                                  |
+| **Kết xuất phía máy chủ & Thành phần máy chủ**   | ✅ Có, tối ưu cho SSR / React Server Components                                                                                        | ⚠️ Hỗ trợ ở cấp trang nhưng cần truyền các hàm t-functions trên cây thành phần cho các thành phần máy chủ con | ⚠️ Hỗ trợ ở cấp trang với thiết lập bổ sung, nhưng cần truyền các hàm t-functions trên cây thành phần cho các thành phần máy chủ con | ✅ Hỗ trợ, cần thiết lập                                                   | ⚠️ Hỗ trợ ở cấp trang nhưng cần truyền các hàm t-functions trên cây thành phần cho các thành phần máy chủ con | ⚠️ Hỗ trợ ở cấp trang nhưng cần truyền các hàm t-functions trên cây thành phần cho các thành phần máy chủ con | ✅ SSR qua Nuxt/Vue SSR (không có RSC)                         |
+| **Tree-shaking (chỉ tải nội dung được sử dụng)** | ✅ Có, theo từng component tại thời điểm build thông qua các plugin Babel/SWC                                                          | ⚠️ Thường tải tất cả (có thể cải thiện với namespaces/phân tách code)                                         | ⚠️ Thường tải tất cả                                                                                                                 | ❌ Không phải mặc định                                                     | ⚠️ Một phần                                                                                                   | ⚠️ Một phần                                                                                                   | ⚠️ Một phần (với phân tách code/cài đặt thủ công)              |
+| **Tải lười (Lazy loading)**                      | ✅ Có, theo từng locale / từng từ điển                                                                                                 | ✅ Có (ví dụ, backend/namespace theo yêu cầu)                                                                 | ✅ Có (chia nhỏ gói locale)                                                                                                          | ✅ Có (nhập khẩu danh mục động)                                            | ✅ Có (theo từng route/theo từng locale), cần quản lý namespace                                               | ✅ Có (theo từng route/theo từng locale), cần quản lý namespace                                               | ✅ Có (tin nhắn locale bất đồng bộ)                            |
+| **Xóa nội dung không sử dụng**                   | ✅ Có, theo từ điển tại thời điểm build                                                                                                | ❌ Không, chỉ qua phân đoạn namespace thủ công                                                                | ❌ Không, tất cả các thông điệp đã khai báo đều được đóng gói                                                                        | ✅ Có, các khóa không sử dụng được phát hiện & loại bỏ tại thời điểm build | ❌ Không, có thể quản lý thủ công với quản lý namespace                                                       | ❌ Không, có thể quản lý thủ công với quản lý namespace                                                       | ❌ Không, chỉ có thể thực hiện qua lazy-loading thủ công       |
+| **Quản lý Dự án Lớn**                            | ✅ Khuyến khích mô-đun, phù hợp cho hệ thống thiết kế                                                                                  | ⚠️ Cần kỷ luật tệp tốt                                                                                        | ⚠️ Các 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                   |
+
+---
+
+## GitHub STARs
+
+Các sao trên GitHub là một chỉ số mạnh mẽ về độ phổ biến của dự án, sự tin tưởng của cộng đồng và tính liên quan 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 sao giúp so sánh mức độ thu hút giữa các lựa chọn thay thế và cung cấp cái nhìn sâu sắc về sự phát triển của hệ sinh thái.
+
+[![Biểu đồ Lịch sử Sao](https://api.star-history.com/svg?repos=formatjs/formatjs&repos=i18next/react-i18next&repos=i18next/i18next&repos=i18next/next-i18next&repos=lingui/js-lingui&repos=amannn/next-intl&repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&aymericzip/intlayer)
+
+---
+
+## Tính tương tác
+
+`intlayer` cũng có thể giúp quản lý các namespace `react-intl`, `react-i18next`, `next-intl`, `next-i18next`, và `vue-i18n` của bạn.
+
+Sử dụng `intlayer`, bạn có thể khai báo nội dung của mình theo định dạng của thư viện i18n yêu thích, và intlayer sẽ tạo ra các namespace của bạn tại vị trí bạn chọn (ví dụ: `/messages/{{locale}}/{{namespace}}.json`).
+
+Tham khảo các tùy chọn [`dictionaryOutput` và `i18nextResourcesDir`](https://intlayer.org/doc/concept/configuration#content-configuration) để biết thêm chi tiết.