@intlayer/docs 9.0.0-canary.2 → 9.0.0-canary.20

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_CMS.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
+updatedAt: 2026-07-08
 title: Intlayer CMS | Đưa nội dung của bạn ra ngoài vào Intlayer CMS
 description: Đưa nội dung của bạn ra ngoài vào Intlayer CMS để ủy quyền quản lý nội dung cho nhóm của bạn.
 keywords:
@@ -18,6 +18,9 @@ slugs:
   - cms
 youtubeVideo: https://www.youtube.com/watch?v=UDDTnirwi_4
 history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Chuyển phần 'Đồng bộ trực tiếp' sang trang riêng (live-sync.md), chỉ giữ lại phần giới thiệu ngắn gọn và liên kết ở đây"
   - version: 6.0.1
     date: 2025-09-22
     changes: "Thêm tài liệu đồng bộ trực tiếp"
@@ -245,144 +248,7 @@ Sau đó, bạn sẽ có thể xem và quản lý từ điển của mình trong
 
 Live Sync cho phép ứng dụng của bạn phản ánh các thay đổi nội dung CMS trong thời gian chạy. Không cần xây dựng lại hoặc triển khai lại. Khi được bật, các cập nhật sẽ được truyền đến máy chủ Live Sync để làm mới các từ điển mà ứng dụng của bạn đang đọc.
 
-Bật Live Sync bằng cách cập nhật cấu hình Intlayer của bạn:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... các thiết lập cấu hình khác
-  editor: {
-    /**
-     * Bật tính năng tải lại nóng (hot reloading) cấu hình locale khi phát hiện thay đổi.
-     * Ví dụ, khi một từ điển được thêm hoặc cập nhật, ứng dụng sẽ cập nhật
-     * nội dung hiển thị trên trang.
-     *
-     * Vì tải lại nóng yêu cầu kết nối liên tục với máy chủ,
-     * tính năng này chỉ có sẵn cho khách hàng của gói `enterprise`.
-     *
-     * Mặc định: false
-     */
-    liveSync: true,
-  },
-  dictionary: {
-    /**
-     * Điều khiển cách các từ điển được nhập khẩu:
-     *
-     * - "live": Các từ điển được lấy động bằng cách sử dụng Live Sync API.
-     *   Thay thế useIntlayer bằng useDictionaryDynamic.
-     *
-     * Lưu ý: Chế độ live sử dụng Live Sync API để lấy từ điển. Nếu cuộc gọi API
-     * thất bại, các từ điển sẽ được nhập khẩu động.
-     * Lưu ý: Chỉ các từ điển có nội dung từ xa và cờ "live" mới sử dụng chế độ live.
-     * Các từ điển khác sử dụng chế độ động để tối ưu hiệu năng.
-     */
-    importMode: "fetch",
-  },
-};
-
-export default config;
-```
-
-Khởi động server Live Sync để bao bọc ứng dụng của bạn:
-
-Ví dụ sử dụng server độc lập:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... các script khác
-    "live:start": "npx intlayer live",
-  },
-}
-```
-
-Bạn cũng có thể sử dụng server ứng dụng của mình song song bằng cách sử dụng đối số `--process`.
-
-Ví dụ sử dụng Next.js:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... các script khác
-    "build": "next build",
-    "dev": "next dev",
-    "start": "npx intlayer live --with 'next start'",
-  },
-}
-```
-
-Ví dụ sử dụng Vite:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... các script khác
-    "build": "vite build",
-    "dev": "vite dev",
-    "start": "npx intlayer live --with 'vite start'",
-  },
-}
-```
-
-Server Live Sync bao bọc ứng dụng của bạn và tự động áp dụng nội dung cập nhật khi nó đến.
-
-Để nhận thông báo thay đổi từ CMS, server Live Sync duy trì một kết nối SSE đến backend. Khi nội dung thay đổi trong CMS, backend chuyển tiếp bản cập nhật đến server Live Sync, server này sẽ ghi các từ điển mới. Ứng dụng của bạn sẽ phản ánh bản cập nhật trong lần điều hướng tiếp theo hoặc khi tải lại trình duyệt, không cần phải xây dựng lại.
-
-Sơ đồ luồng (CMS/Backend -> Live Sync Server -> Application Server -> Frontend):
-
-![Sơ đồ luồng Live Sync CMS/Backend/Live Sync Server/Application Server/Frontend](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
-
-Cách hoạt động:
-
-![Sơ đồ logic Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
-
-### Quy trình phát triển (cục bộ)
-
-- Trong quá trình phát triển, tất cả các từ điển từ xa được lấy khi ứng dụng khởi động, giúp bạn có thể kiểm tra các cập nhật nhanh chóng.
-- Để thử nghiệm Live Sync cục bộ với Next.js, hãy bao bọc server phát triển của bạn:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... các script khác
-    "dev": "npx intlayer live --with 'next dev'",
-    // "dev": "npx intlayer live --with 'vite dev'", // Dành cho Vite
-  },
-}
-```
-
-Bật tối ưu hóa để Intlayer áp dụng các biến đổi nhập khẩu Live trong quá trình phát triển:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  editor: {
-    applicationURL: "http://localhost:5173",
-    liveSyncURL: "http://localhost:4000",
-    liveSync: true,
-  },
-  dictionary: {
-    importMode: "fetch",
-  },
-  build: {
-    optimize: true,
-  },
-};
-
-export default config;
-```
-
-Cấu hình này bao bọc server phát triển của bạn với server Live Sync, lấy các từ điển từ xa khi khởi động, và truyền các cập nhật từ CMS qua SSE. Tải lại trang để xem các thay đổi.
-
-Ghi chú và hạn chế:
-
-- Thêm nguồn gốc live sync vào chính sách bảo mật trang web của bạn (CSP). Đảm bảo URL live sync được phép trong `connect-src` (và `frame-ancestors` nếu có liên quan).
-- Live Sync không hoạt động với đầu ra tĩnh. Đối với Next.js, trang phải là động để nhận các cập nhật tại thời gian chạy (ví dụ: sử dụng `generateStaticParams`, `generateMetadata`, `getServerSideProps`, hoặc `getStaticProps` một cách phù hợp để tránh các hạn chế chỉ tĩnh hoàn toàn).
-- Trong CMS, mỗi từ điển có một cờ `live`. Chỉ những từ điển có `live=true` mới được lấy qua API live sync; những từ điển khác được nhập động và không thay đổi trong thời gian chạy.
-- Cờ `live` được đánh giá cho mỗi từ điển tại thời điểm build. Nếu nội dung từ xa không được đánh dấu `live=true` trong quá trình build, bạn phải build lại để kích hoạt Live Sync cho từ điển đó.
-- Server live sync phải có quyền ghi vào `.intlayer`. Trong các container, đảm bảo quyền ghi vào `/.intlayer`.
+Để xem hướng dẫn thiết lập đầy đủ (kích hoạt, khởi động máy chủ Live Sync, quy trình phát triển cục bộ và các giới hạn), xem [tài liệu Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/live-sync.md).
 
 ## Gỡ lỗi
 

package/docs/vi/intlayer_with_adonisjs.md

@@ -59,24 +59,44 @@ Xem [Application Template](https://github.com/aymericzip/intlayer-adonisjs-templ
 
 Để bắt đầu sử dụng `adonis-intlayer`, hãy cài đặt gói bằng npm:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> cờ `--interactive` là tùy chọn. Sử dụng `intlayer-cli init` nếu bạn là tác nhân AI.
+
+> Lệnh này sẽ phát hiện môi trường của bạn và cài đặt các gói cần thiết. Ví dụ:
+
 ```bash packageManager="npm"
 npm install intlayer adonis-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer adonis-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer adonis-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer adonis-intlayer
-bun x intlayer init
 ```
 
 ### Thiết lập

package/docs/vi/intlayer_with_analog.md

@@ -118,24 +118,44 @@ Xem [Mẫu ứng dụng](https://github.com/aymericzip/intlayer-analog-template)
 
 Cài đặt các gói cần thiết bằng npm:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> cờ `--interactive` là tùy chọn. Sử dụng `intlayer-cli init` nếu bạn là tác nhân AI.
+
+> Lệnh này sẽ phát hiện môi trường của bạn và cài đặt các gói cần thiết. Ví dụ:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer vite-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer vite-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer vite-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer vite-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -191,7 +211,11 @@ import analog from "@analogjs/platform";
 export default defineConfig(() => ({
   plugins: [
     analog(),
-    intlayer(), // Thêm plugin Intlayer
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 }));
 ```
@@ -384,3 +408,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).

package/docs/vi/intlayer_with_angular_19.md

@@ -121,28 +121,48 @@ Xem [Mẫu ứng dụng](https://github.com/aymericzip/intlayer-angular-19-templ
 
 Cài đặt các gói cần thiết bằng npm:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> cờ `--interactive` là tùy chọn. Sử dụng `intlayer-cli init` nếu bạn là tác nhân AI.
+
+> Lệnh này sẽ phát hiện môi trường của bạn và cài đặt các gói cần thiết. Ví dụ:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer
 npm install @angular-builders/custom-webpack --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer
 pnpm add @angular-builders/custom-webpack --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer
 yarn add @angular-builders/custom-webpack --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer
 bun add @angular-builders/custom-webpack --dev
-bun x intlayer init
 ```
 
 - **intlayer**

package/docs/vi/intlayer_with_angular_21.md

@@ -123,28 +123,48 @@ Xem [Mẫu Ứng Dụng](https://github.com/aymericzip/intlayer-angular-21-templ
 
 Cài đặt các gói cần thiết bằng cách sử dụng npm:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> cờ `--interactive` là tùy chọn. Sử dụng `intlayer-cli init` nếu bạn là tác nhân AI.
+
+> Lệnh này sẽ phát hiện môi trường của bạn và cài đặt các gói cần thiết. Ví dụ:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer
 npm install @angular-builders/custom-esbuild --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer
 pnpm add @angular-builders/custom-esbuild --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer
 yarn add @angular-builders/custom-esbuild --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer
 bun add @angular-builders/custom-esbuild --dev
-bun x intlayer init
 ```
 
 - **intlayer**