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

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).

package/docs/vi/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:
@@ -317,7 +317,134 @@ Tích hợp Astro thêm middleware Vite giúp định tuyến nhận biết ngô
 
 </Step>
 
-<Step number={7} title="Tiếp tục sử dụng Framework yêu thích của bạn">
+<Step number={7} title="Thêm bộ chuyển đổi ngôn ngữ">
+
+Để cho phép người dùng chuyển đổi giữa các ngôn ngữ, bạn có thể tạo một thành phần `LocaleSwitcher`. Thành phần này sẽ hiển thị danh sách tất cả các ngôn ngữ được hỗ trợ và liên kết đến cùng một trang trong mỗi ngôn ngữ.
+
+```astro fileName="src/components/LocaleSwitcher.astro"
+---
+import {
+  locales,
+  getLocaleName,
+  getLocalizedUrl,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  type LocalesValues,
+} from "intlayer";
+
+const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
+---
+
+<nav>
+  {
+    locales.map((localeItem) => (
+      <a
+        href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+        data-locale={localeItem}
+        aria-current={localeItem === locale ? "page" : undefined}
+      >
+        {getLocaleName(localeItem)}
+      </a>
+    ))
+  }
+</nav>
+
+<script>
+  import { setLocaleInStorageClient, getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  const localeLinks = document.querySelectorAll("[data-locale]");
+
+  localeLinks.forEach((link) => {
+    link.addEventListener("click", (e) => {
+      const locale = link.getAttribute("data-locale") as LocalesValues;
+
+      // Update the locale cookie
+      setLocaleInStorageClient(locale);
+    });
+  });
+</script>
+
+<style>
+  nav {
+    display: flex;
+    gap: 1rem;
+  }
+  a[aria-current="page"] {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+</style>
+```
+
+> **Lưu ý về tính bền vững:**
+> Sử dụng `setLocaleInStorageClient` trong tập lệnh phía khách hàng để đảm bảo rằng ưu tiên ngôn ngữ của người dùng được lưu trong cookie. Điều này cho phép phần mềm trung gian Intlayer nhớ lựa chọn và tự động chuyển hướng người dùng đến ngôn ngữ ưu tiên của họ trong các chuyến viếng thăm tương lai.
+
+</Step>
+
+<Step number={8} title="Sitemap và Robots.txt">
+
+Intlayer cung cấp các tiện ích để tự động tạo sơ đồ trang web (sitemap) bản địa hóa và file robots.txt của bạn.
+
+#### Sitemap
+
+Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.
+
+> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.
+
+Tạo `src/pages/sitemap.xml.ts` để tạo sơ đồ trang web bao gồm tất cả các route bản địa hóa của bạn.
+
+```typescript fileName="src/pages/sitemap.xml.ts"
+import type { APIRoute } from "astro";
+import { generateSitemap, type SitemapUrlEntry } from "intlayer";
+
+const pathList: SitemapUrlEntry[] = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
+
+export const GET: APIRoute = async ({ site }) => {
+  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+
+  return new Response(xmlOutput, {
+    headers: { "Content-Type": "application/xml" },
+  });
+};
+```
+
+#### Robots.txt
+
+Tạo `src/pages/robots.txt.ts` để kiểm soát hoạt động thu thập thông tin của các công cụ tìm kiếm.
+
+```typescript fileName="src/pages/robots.txt.ts"
+import type { APIRoute } from "astro";
+import { getMultilingualUrls } from "intlayer";
+
+const getAllMultilingualUrls = (urls: string[]) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+export const GET: APIRoute = ({ site }) => {
+  const robotsTxt = [
+    "User-agent: *",
+    "Allow: /",
+    ...disallowedPaths.map((path) => `Disallow: ${path}`),
+    "",
+    `Sitemap: ${new URL("/sitemap.xml", site).href}`,
+  ].join("\n");
+
+  return new Response(robotsTxt, {
+    headers: { "Content-Type": "text/plain" },
+  });
+};
+```
+
+</Step>
+
+<Step number={9} title="Tiếp tục sử dụng Framework yêu thích của bạn">
 
 Tiếp tục xây dựng ứng dụng của bạn bằng cách sử dụng framework mà bạn chọn.
 
@@ -328,7 +455,7 @@ Tiếp tục xây dựng ứng dụng của bạn bằng cách sử dụng frame
 - Intlayer + Preact: [Intlayer với Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+preact.md)
   </Step>
 
-<Step number={1} title="Trích xuất nội dung các thành phần của bạn" isOptional={true}>
+<Step number={15} title="Trích xuất nội dung các thành phần của bạn" isOptional={true}>
 
 Nếu bạn có một cơ sở mã hiện có, việc chuyển đổi hàng nghìn tệp có thể tốn nhiều thời gian.
 

package/docs/vi/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Lit i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro + Lit đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:

package/docs/vi/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Preact i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro + Preact đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:

package/docs/vi/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + React i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro + React đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:

package/docs/vi/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Solid i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro + Solid đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:

package/docs/vi/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Svelte i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro + Svelte đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:

package/docs/vi/intlayer_with_astro_vanilla.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Vanilla JS i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro + Vanilla JS đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:

package/docs/vi/intlayer_with_astro_vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Vue i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro + Vue đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:

package/docs/vi/intlayer_with_nextjs_14.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 14 i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Next.js 14 đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords: