@intlayer/docs 8.11.1 → 8.11.3

package/docs/vi/interest_of_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-14
-updatedAt: 2025-09-27
+updatedAt: 2026-05-31
 title: Lợi ích của Intlayer
 description: Khám phá những lợi ích và ưu điểm của việc sử dụng Intlayer trong các dự án của bạn. Hiểu tại sao Intlayer nổi bật giữa các khung khác.
 keywords:
@@ -13,6 +13,9 @@ slugs:
   - doc
   - why
 history:
+  - version: 8.11.2
+    date: 2026-05-31
+    changes: "Thêm phần Tại sao Intlayer thay thế"
   - version: 7.3.1
     date: 2025-11-27
     changes: "Phát hành Trình biên dịch"
@@ -26,197 +29,52 @@ history:
 
 # 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 dành 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ã 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 trong mã của bạn. Sử dụng TypeScript, **Intlayer** làm cho việc 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 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 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 không gian tên:
-
-```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 mã nguồn trở nên phức tạp hơn để bảo trì vì một số lý do:
-
-1. **Đối với bất kỳ thành phần mới nào được tạo, bạn nên:**
-   - Tạo tài nguyên/không gian tên mới trong thư mục `locales`
-   - Nhớ nhập không gian tên mới trong 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 thành phần của bạn, bạn nên:**
-   - Tìm kiếm tài nguyên/không gian tên liên quan (xa thành phần)
-   - 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 ngôn ngữ
-   - Xác minh không gian tên 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ủa các tệp JSON của bạn giống nhau cho tất cả các ngôn ngữ
-
-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 địa phương hóa 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 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ân phạm vi nội dung của bạn theo từng thành phần và giữ nội dung của bạn gần với thành phần của bạn, như chúng ta thường làm với CSS (`styled-components`), các kiểu, tài liệu (`storybook`) hoặc kiểm thử đơn vị (`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({
-      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 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 mã nguồn của bạn**
-   - Giảm độ phức tạp
-   - Tăng khả năng bảo trì
-
-3. **Sao chép các thành phần và nội dung liên quan của chúng dễ dàng hơn (Ví dụ: thành phần đă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 thành phần 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ó các phụ thuộc bên ngoài
-
-4. **Tránh làm bẩn mã nguồn của bạn với các khóa/giá trị không sử dụng cho các thành phần không sử dụng**
-   - Nếu bạn không sử dụng một thành phần, Intlayer sẽ không nhập nội dung liên quan của nó
-   - Nếu bạn xóa một thành phần, bạn sẽ dễ dàng nhớ xóa nội dung liên quan của nó vì nó sẽ có mặt trong cùng một thư mục
-
-5. **Giảm chi phí lập luận cho các tác nhân AI để khai báo nội dung đa ngôn ngữ của bạn**
-   - Tác nhân AI sẽ không phải quét toàn bộ mã nguồn của bạn để biết nơi triển khai nội dung của bạn
-   - Các bản dịch có thể dễ dàng được thực hiện bằng các công cụ AI tự động hoàn thành 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 thành phần được tải lười (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ả                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ![Tính năng](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                         | **Hỗ trợ đa khung làm việc**<br><br>Intlayer tương thích với tất cả các khung làm việc 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 bằng sức mạnh JavaScript**<br><br>Tận dụng tính linh hoạt của JavaScript để xác định 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="Tính năng" width="700"> | **Trình biên dịch**<br><br>Trình biên dịch Intlayer tự động trích xuất nội dung từ các thành phần và tạo các tệp từ điển.<br><br> - [Trình biên dịch](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 ngôn ngữ**<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 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 Type-Safe**<br><br>Tận dụng TypeScript để đảm bảo các đị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 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 hóa**<br><br>Bắt đầu và chạy 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 đơ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 Server Component nhất quán**<br><br>Hoàn toàn phù hợp cho các server component của Next.js, sử dụng cùng một cách 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 server component. <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)                            | **Mã nguồn được tổ chức**<br><br>Giữ cho mã nguồn 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 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)                          | **Đị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 ngôn ngữ 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. 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> - [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 biên tập trực quan & CMS miễn phí**<br><br>Một trình biên tập trực quan và CMS miễn phí có sẵn cho các nhà viết nội dung, loại bỏ nhu cầu về một nền tảng địa phương hóa. Giữ cho nội dung của bạn được đồng bộ hóa bằng Git, hoặc bên thứ ba hóa nó hoàn toàn hoặc một phần với CMS.<br><br> - [Trình biên tập Intlayer](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 Tree-shakable**<br><br>Nội dung tree-shakable, giảm kích thước của gói cuối cùng. Tải nội dung theo từng thành phần, 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ợ tải lười để tăng hiệu quả tải ứng dụng. <br><br> - [Tối ưu hóa xây 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 (Static Rendering)**<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 bằng AI**<br><br>Biến trang web của bạn sang 231 ngôn ngữ chỉ bằng một cú nhấp chuột bằng các công cụ dịch nâng cao được hỗ trợ bởi AI của Intlayer bằng cách sử dụng nhà cung cấp AI/khóa 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áy chủ MCP (Model Context Protocol) để 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 ngay 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/vi/mcp_server.md)                                                                                                                            |
-| ![Feature](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, xây dựng từ điển, dịch nội dung và nhiều hơn nữa. <br><br> - [Tiện ích mở rộng VSCode](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)                                                  |
-| Kiểm tra bản dịch còn 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 cùng 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, các kiểu nghiêm ngặt được tạo tự động                                                                                         | ⚠️ Cơ bản; cần cấu hình thêm để an toàn                                                             | ✅ Tốt, nhưng ít nghiêm ngặt hơn                                                                                          | ⚠️ Định kiểu, cần cấu hình                                          | ✅ Tốt                                                                                             | ⚠️ Cơ bản                                                                                          | ✅ Tốt (có sẵn kiểu; an toàn khóa cần thiết lập)                  |
-| **Phát hiện bản dịch còn thiếu**                 | ✅ Làm nổi bật lỗi TypeScript và lỗi/cảnh báo trong thời gian xây dựng                                                                     | ⚠️ Chủ yếu là các chuỗi dự phòng (fallback) khi chạy                                                | ⚠️ Các chuỗi dự phòng                                                                                                     | ⚠️ Cần cấu hình thêm                                                | ⚠️ Dự phòng khi chạy                                                                               | ⚠️ Dự phòng khi chạy                                                                               | ⚠️ Dự phòng/cảnh báo khi chạy (có thể cấu hình)                   |
-| **Nội dung phong phú (JSX/Markdown/thành phần)** | ✅ Hỗ trợ trực tiếp                                                                                                                        | ⚠️ Hạn chế / chỉ nội suy                                                                            | ⚠️ Cú pháp ICU, không phải JSX thực                                                                                       | ⚠️ Hạn chế                                                          | ❌ Không được thiết kế cho các nút phong phú                                                       | ⚠️ Hạn chế                                                                                         | ⚠️ Hạn chế (thành phần qua `<i18n-t>`, Markdown qua plugin)       |
-| **Dịch bằng AI**                                 | ✅ Có, hỗ trợ nhiều nhà cung cấp AI. Có thể sử dụng bằng các khóa API của riêng bạn. Xem xét bối cảnh ứ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 biên tập trực quan**                     | ✅ Có, Trình biên tập trực quan cục bộ + CMS tùy chọn; có thể bên thứ ba hóa nội dung mã nguồn; có thể nhúng                               | ❌ Không / có sẵn thông qua các nền tảng địa phương hóa bên ngoài                                   | ❌ Không / có sẵn thông qua các nền tảng địa phương hóa bên ngoài                                                         | ❌ Không / có sẵn thông qua các nền tảng địa phương hóa bên ngoài   | ❌ Không / có sẵn thông qua các nền tảng địa phương hóa bên ngoài                                  | ❌ Không / có sẵn thông qua các nền tảng địa phương hóa bên ngoài                                  | ❌ Không / có sẵn thông qua các nền tảng địa phương 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 ngay từ đầu (hoạt động với Next.js & Vite)                                                    | ⚠️ Không tích hợp sẵn, yêu cầu 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ông báo, định tuyến phải thủ công                                                               | ⚠️ Không tích hợp sẵn, yêu cầu 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 tuyến đường động**                         | ✅ Có                                                                                                                                      | ⚠️ Plugin/hệ sinh thái 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)                       |
-| **Số nhiều**                                     | ✅ 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 tháng, số, tiền tệ)**          | ✅ Các trình định dạng được tối ưu hóa (sử dụng Intl bên dưới)                                                                             | ⚠️ Qua các plugin hoặc cách sử dụng Intl tùy chỉnh                                                  | ✅ Trình định dạng ICU                                                                                                    | ✅ Helper ICU/CLI                                                   | ✅ Tốt (Intl helper)                                                                               | ✅ Tốt (Intl helper)                                                                               | ✅ Trình đị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                                                                                                                         | ⚠️ Qua plugin (i18next-icu)                                                                         | ✅ Có                                                                                                                     | ✅ Có                                                               | ✅ Có                                                                                              | ⚠️ Qua plugin (`i18next-icu`)                                                                      | ⚠️ Qua trình định dạng/trình biên dịch tùy chỉnh                  |
-| **SEO Helper (hreflang, sitemap)**               | ✅ Công cụ tích hợp sẵn: các helper cho sitemap, robots.txt, metadata                                                                      | ⚠️ Các plugin cộng đồng/thủ công                                                                    | ❌ Không phải là cốt lõi                                                                                                  | ❌ Không phải là cốt lõi                                            | ✅ Tốt                                                                                             | ✅ Tốt                                                                                             | ❌ Không phải là cốt lõi (Nuxt i18n cung cấp các helper)          |
-| **Hệ sinh thái / Cộng đồng**                     | ⚠️ Nhỏ hơn nhưng phát triển nhanh và phản ứng nhanh                                                                                        | ✅ Lớn nhất và trưởng thành                                                                         | ✅ Lớn                                                                                                                    | ⚠️ Nhỏ hơn                                                          | ✅ Quy mô trung bình, tập trung vào Next.js                                                        | ✅ Quy mô trung bình, tập trung vào Next.js                                                        | ✅ Lớn trong hệ sinh thái Vue                                     |
-| **Server-side Rendering & Server Components**    | ✅ Có, được tối ưu cho SSR / React Server Components                                                                                       | ⚠️ Được hỗ trợ ở cấp trang nhưng cần truyền hàm t trên cây thành phần cho các server component con  | ⚠️ Được hỗ trợ ở cấp trang với thiết lập bổ sung, nhưng cần truyền hàm t trên cây thành phần cho các server component con | ✅ Được hỗ trợ, cần thiết lập                                       | ⚠️ Được hỗ trợ ở cấp trang nhưng cần truyền hàm t trên cây thành phần cho các server component con | ⚠️ Được hỗ trợ ở cấp trang nhưng cần truyền hàm t trên cây thành phần cho các server component con | ✅ SSR qua Nuxt/Vue SSR (không RSC)                               |
-| **Tree-shaking (chỉ tải nội dung được sử dụng)** | ✅ Có, trên mỗi thành phần tại thời điểm xây dựng thông qua các plugin Babel/SWC                                                           | ⚠️ Thường tải tất cả (có thể được cải thiện với không gian tên/chia nhỏ mã)                         | ⚠️ 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 chia nhỏ mã/thiết lập thủ công)                  |
-| **Tải lười (Lazy loading)**                      | ✅ Có, theo từng ngôn ngữ / theo từng từ điển                                                                                              | ✅ Có (ví dụ: backends/không gian tên theo yêu cầu)                                                 | ✅ Có (tách rời các gói ngôn ngữ)                                                                                         | ✅ Có (nhập danh mục động)                                          | ✅ Có (theo tuyến đường/theo ngôn ngữ), cần quản lý không gian tên                                 | ✅ Có (theo tuyến đường/theo ngôn ngữ), cần quản lý không gian tên                                 | ✅ Có (thông báo ngôn ngữ không đồng bộ)                          |
-| **Loại bỏ nội dung không sử dụng**               | ✅ Có, theo từng từ điển tại thời điểm xây dựng                                                                                            | ❌ Không, chỉ thông qua phân đoạn không gian tên thủ công                                           | ❌ Không, tất cả các thông báo được 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ỏ khi xây dựng | ❌ Không, có thể được quản lý thủ công với quản lý không gian tên                                  | ❌ Không, có thể được quản lý thủ công với quản lý không gian tên                                  | ❌ Không, chỉ có thể thực hiện qua tải lười thủ công              |
-| **Quản lý dự án lớn**                            | ✅ Khuyến khích tính mô-đun, phù hợp cho các 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                      |
+## 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ư:
+
+<AccordionGroup>
+<Accordion header="Kích thước bundle">
+
+Thay vì tải các tệp JSON lớn vào trang của bạn, hãy chỉ tải nội dung cần thiết. Intlayer giúp **giảm tới 50% kích thước bundle và kích thước trang**.
+
+</Accordion>
+<Accordion header="Khả năng bảo trì">
+
+Xác định phạm vi nội dung ứng dụng của bạn **tạo điều kiện bảo trì** cho các ứng dụng quy mô lớn. Bạn có thể sao chép hoặc xóa một thư mục tính năng mà không phải lo lắng về việc xem lại toàn bộ cơ sở mã nội dung của mình. Ngoài ra, Intlayer **được nhập đầy đủ** để đảm bảo tính chính xác cho nội dung của bạn.
+
+</Accordion>
+<Accordion header="Đại lý AI">
+
+Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
+
+</Accordion>
+<Accordion header="Tính năng">
+
+Intlayer cung cấp nhiều tính năng bổ sung mà các giải pháp i18n khác không có, chẳng hạn như [Hỗ trợ Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/markdown.md), [tìm nạp nội dung bên ngoài](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/function_fetching.md), [nội dung tệp loading](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/file.md), [cập nhật nội dung trực tiếp](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/live.md), [trình soạn thảo trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md), v.v.
+
+</Accordion>
+<Accordion header="Tự động hóa">
+
+Sử dụng tính năng tự động hóa để dịch trong quy trình CI/CD của bạn bằng cách sử dụng LLM mà bạn chọn với chi phí do nhà cung cấp AI của bạn chi trả. Intlayer cũng cung cấp **trình biên dịch** để tự động trích xuất nội dung cũng như [nền tảng web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) để giúp **dịch ở chế độ nền**.
+
+</Accordion>
+<Accordion header="Hiệu suất">
+
+Việc kết nối các tệp JSON lớn với các thành phần có thể dẫn đến các vấn đề về hiệu suất và khả năng phản hồi. Intlayer tối ưu hóa việc tải nội dung của bạn tại thời điểm build.
+
+</Accordion>
+<Accordion header="Mở rộng quy mô không có nhà phát triển">
+
+Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** và **[CMS đầy đủ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** để giúp bạn quản lý nội dung đa ngôn ngữ của mình trong **thời gian thực**, giúp việc cộng tác với người dịch, người viết quảng cáo và các thành viên khác trong nhóm trở nên liền mạch. Nội dung có thể được lưu trữ cục bộ và/hoặc từ xa.
+
+</Accordion>
+<Accordion header="Thiết kế khung chéo">
+
+Nếu bạn sử dụng các khung khác nhau cho các phần khác nhau của ứng dụng (ví dụ: React, React-native, Vue, Angular, Svelte, v.v.), Intlayer sẽ cung cấp cách **sử dụng một synatax chung và cách triển khai trên tất cả các khung giao diện người dùng chính**. Bạn cũng sẽ có thể chia sẻ khai báo nội dung của mình trên hệ thống thiết kế, ứng dụng, chương trình phụ trợ, v.v.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 

package/docs/vi/intlayer_with_adonisjs.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-05-06
-title: AdonisJS i18n - Cách dịch ứng dụng AdonisJS năm 2026
-description: Khám phá cách làm cho backend AdonisJS của bạn đa ngôn ngữ. Làm theo tài liệu để quốc tế hóa (i18n) và dịch nó.
+updatedAt: 2026-05-31
+title: AdonisJS i18n - Hướng dẫn đầy đủ để dịch AdonisJS
+description: Giải pháp tốt nhất cho kích thước bundle, SEO, hiệu suất & khả năng bảo trì. Làm cho AdonisJS backend của bạn đa ngôn ngữ vào năm 2026, dịch thuật LLM, Agent Skills & MCP.
 keywords:
   - Quốc tế hóa
   - Tài liệu

package/docs/vi/intlayer_with_analog.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Analog i18n - Cách dịch ứng dụng Analog năm 2026
-description: Khám phá cách làm cho ứng dụng Analog của bạn hỗ trợ đa ngôn ngữ. Làm theo tài liệu để quốc tế hóa (i18n) và dịch nó.
+updatedAt: 2026-05-31
+title: Analog i18n - Hướng dẫn đầy đủ để dịch Analog
+description: Giải pháp tốt nhất cho kích thước bundle, SEO, hiệu suất & khả năng bảo trì. Làm cho Analog ứng dụng của bạn đa ngôn ngữ vào năm 2026, dịch thuật LLM, Agent Skills & MCP.
 keywords:
   - Quốc tế hóa
   - Tài liệu
@@ -56,16 +56,47 @@ history:
 
 <TOC/>
 
-## Intlayer là gì?
+## Tại sao Intlayer thay thế các lựa chọn thay thế?
 
-**Intlayer** là một thư viện quốc tế hóa (i18n) nguồn mở sáng tạo được thiết kế để đơn giản hóa việc hỗ trợ đa ngôn ngữ trong các ứng dụng web hiện đại.
+So với các giải pháp chính như `ngx-translate` hay `angular-l10n`, 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ư:
 
-Với Intlayer, bạn có thể:
+<AccordionGroup>
+<Accordion header="Phạm vi phủ sóng tương tự đầy đủ">
 
-- **Dễ dàng quản lý các bản dịch** bằng cách sử dụng các từ điển khai báo ở cấp độ thành phần.
-- **Bản địa hóa động các siêu dữ liệu**, các tuyến đường và nội dung.
-- **Đảm bảo hỗ trợ TypeScript** với các kiểu dữ liệu được tự động tạo, cải thiện khả năng tự động hoàn thành và phát hiện lỗi.
-- **Hưởng lợi từ các tính năng nâng cao**, như phát hiện và chuyển đổi ngôn ngữ động.
+Intlayer được tối ưu hóa để hoạt động hoàn hảo với Analog bằng cách cung cấp **định tuyến đa ngôn ngữ**, **hỗ trợ SSR** và tất cả các tính năng cần thiết để mở rộng quy mô quốc tế hóa (i18n).
+
+</Accordion>
+<Accordion header="Kích thước bundle">
+
+Thay vì tải các tệp JSON lớn vào trang của bạn, hãy chỉ tải nội dung cần thiết. Intlayer giúp **giảm tới 50% kích thước bundle và kích thước trang**.
+
+</Accordion>
+<Accordion header="Khả năng bảo trì">
+
+Xác định phạm vi nội dung ứng dụng của bạn **tạo điều kiện bảo trì** cho các ứng dụng quy mô lớn. Bạn có thể sao chép hoặc xóa một thư mục tính năng mà không phải lo lắng về việc xem lại toàn bộ cơ sở mã nội dung của mình. Ngoài ra, Intlayer **được nhập đầy đủ** để đảm bảo tính chính xác cho nội dung của bạn.
+
+</Accordion>
+<Accordion header="Đại lý AI">
+
+Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
+
+</Accordion>
+<Accordion header="Tự động hóa">
+
+Sử dụng tính năng tự động hóa để dịch trong quy trình CI/CD của bạn bằng cách sử dụng LLM mà bạn chọn với chi phí do nhà cung cấp AI của bạn chi trả. Intlayer cũng cung cấp **trình biên dịch** để tự động trích xuất nội dung cũng như [nền tảng web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) để giúp **dịch ở chế độ nền**.
+
+</Accordion>
+<Accordion header="Hiệu suất">
+
+Việc kết nối các tệp JSON lớn với các thành phần có thể dẫn đến các vấn đề về hiệu suất và khả năng phản hồi. Intlayer tối ưu hóa việc tải nội dung của bạn tại thời điểm build.
+
+</Accordion>
+<Accordion header="Mở rộng quy mô không có nhà phát triển">
+
+Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** và **[CMS đầy đủ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** để giúp bạn quản lý nội dung đa ngôn ngữ của mình trong **thời gian thực**, giúp việc cộng tác với người dịch, người viết quảng cáo và các thành viên khác trong nhóm trở nên liền mạch. Nội dung có thể được lưu trữ cục bộ và/hoặc từ xa.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -73,7 +104,9 @@ Với Intlayer, bạn có thể:
 
 Xem [Mẫu ứng dụng](https://github.com/aymericzip/intlayer-analog-template) trên GitHub.
 
-### Bước 1: Cài đặt các phụ thuộc
+<Steps>
+
+<Step number={1} title="Cài đặt các phụ thuộc">
 
 Cài đặt các gói cần thiết bằng npm:
 
@@ -107,7 +140,9 @@ bun x intlayer init
 - **vite-intlayer**
   Gói tích hợp Intlayer với Vite. Nó cung cấp một plugin để xử lý các tệp khai báo nội dung và thiết lập các bí danh (aliases) để đạt hiệu suất tối ưu.
 
-### Bước 2: Cấu hình dự án của bạn
+</Step>
+
+<Step number={2} title="Cấu hình dự án của bạn">
 
 Tạo một tệp cấu hình để thiết lập các ngôn ngữ cho ứng dụng của bạn:
 
@@ -131,7 +166,9 @@ export default config;
 
 > Thông qua tệp cấu hình này, bạn có thể thiết lập các URL được bản địa hóa, chuyển hướng trung gian (middleware redirection), tên cookie, vị trí và phần mở rộng của các khai báo nội dung của bạn, tắt nhật ký Intlayer trong bảng điều khiển, và nhiều hơn nữa. Để biết danh sách đầy đủ các tham số có sẵn, hãy tham khảo [tài liệu cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md).
 
-### Bước 3: Tích hợp Intlayer vào cấu hình Vite của bạn
+</Step>
+
+<Step number={3} title="Tích hợp Intlayer vào cấu hình Vite của bạn">
 
 Để tích hợp Intlayer với Analog, bạn cần sử dụng plugin `vite-intlayer`.
 
@@ -153,7 +190,9 @@ export default defineConfig(() => ({
 
 > Plugin `intlayer()` cấu hình Vite với Intlayer. Nó xử lý các tệp khai báo nội dung và thiết lập các bí danh để đạt hiệu suất tối ưu.
 
-### Bước 4: Khai báo nội dung của bạn
+</Step>
+
+<Step number={4} title="Khai báo nội dung của bạn">
 
 Tạo và quản lý các khai báo nội dung của bạn để lưu trữ các bản dịch:
 
@@ -185,7 +224,9 @@ export default appContent;
 
 > Để biết thêm chi tiết, hãy tham khảo [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md).
 
-### Bước 5: Sử dụng Intlayer trong mã của bạn
+</Step>
+
+<Step number={5} title="Sử dụng Intlayer trong mã của bạn">
 
 Để sử dụng các tính năng quốc tế hóa của Intlayer trong suốt ứng dụng Analog của bạn, bạn cần cung cấp Intlayer trong cấu hình ứng dụng của mình.
 
@@ -223,7 +264,9 @@ export default class HomeComponent {
 
 Nội dung Intlayer được trả về dưới dạng một `Signal`, vì vậy bạn truy cập các giá trị bằng cách gọi signal: `content().title`.
 
-### (Tùy chọn) Bước 6: Thay đổi ngôn ngữ của nội dung
+</Step>
+
+<Step number={6} title="Thay đổi ngôn ngữ của nội dung" isOptional={true}>
 
 Để thay đổi ngôn ngữ của nội dung, bạn có thể sử dụng hàm `setLocale` được cung cấp bởi hàm `useLocale`. Điều này cho phép bạn thiết lập ngôn ngữ của ứng dụng và cập nhật nội dung tương ứng.
 
@@ -329,3 +372,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).
+
+</Step>
+
+</Steps>

package/docs/vi/intlayer_with_angular_19.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Angular i18n - Cách dịch ứng dụng Angular 19 (Webpack) năm
-description: Khám phá cách làm cho trang web Angular của bạn đa ngôn ngữ. Làm theo tài liệu để quốc tế hóa (i18n) và dịch nó.
+updatedAt: 2026-05-31
+title: Angular i18n - Hướng dẫn đầy đủ để dịch Angular 19 app (Webpack)
+description: Giải pháp tốt nhất cho kích thước bundle, SEO, hiệu suất & khả năng bảo trì. Làm cho Angular 19 ứng dụng của bạn đa ngôn ngữ vào năm 2026, dịch thuật LLM, Agent Skills & MCP.
 keywords:
   - Quốc tế hóa
   - Tài liệu
@@ -34,16 +34,47 @@ history:
 
 <TOC/>
 
-## Intlayer là gì?
+## Tại sao Intlayer thay thế các lựa chọn thay thế?
 
-**Intlayer** là một thư viện quốc tế hóa (i18n) mã nguồn mở, sáng tạo được thiết kế để đơn giản hóa việc hỗ trợ đa ngôn ngữ trong các ứng dụng web hiện đại.
+So với các giải pháp chính như `ngx-translate` hay `angular-l10n`, 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ư:
 
-Với Intlayer, bạn có thể:
+<AccordionGroup>
+<Accordion header="Bảo hiểm góc đầy đủ">
 
-- **Dễ dàng quản lý các bản dịch** bằng cách sử dụng các từ điển khai báo ở cấp độ thành phần.
-- **Bản địa hóa động siêu dữ liệu (metadata)**, các tuyến đường (routes) và nội dung.
-- **Đảm bảo hỗ trợ TypeScript** với các kiểu dữ liệu được tự động tạo, cải thiện khả năng tự động hoàn thành và phát hiện lỗi.
-- **Hưởng lợi từ các tính năng nâng cao**, như tự động phát hiện và chuyển đổi ngôn ngữ.
+Intlayer được tối ưu hóa để hoạt động hoàn hảo với Angular bằng cách cung cấp **phạm vi nội dung cấp thành phần**, **bản dịch được tải từng phần** và tất cả các tính năng cần thiết để mở rộng quy mô quốc tế hóa (i18n).
+
+</Accordion>
+<Accordion header="Kích thước bundle">
+
+Thay vì tải các tệp JSON lớn vào trang của bạn, hãy chỉ tải nội dung cần thiết. Intlayer giúp **giảm tới 50% kích thước bundle và kích thước trang**.
+
+</Accordion>
+<Accordion header="Khả năng bảo trì">
+
+Xác định phạm vi nội dung ứng dụng của bạn **tạo điều kiện bảo trì** cho các ứng dụng quy mô lớn. Bạn có thể sao chép hoặc xóa một thư mục tính năng mà không phải lo lắng về việc xem lại toàn bộ cơ sở mã nội dung của mình. Ngoài ra, Intlayer **được nhập đầy đủ** để đảm bảo tính chính xác cho nội dung của bạn.
+
+</Accordion>
+<Accordion header="Đại lý AI">
+
+Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
+
+</Accordion>
+<Accordion header="Tự động hóa">
+
+Sử dụng tính năng tự động hóa để dịch trong quy trình CI/CD của bạn bằng cách sử dụng LLM mà bạn chọn với chi phí do nhà cung cấp AI của bạn chi trả. Intlayer cũng cung cấp **trình biên dịch** để tự động trích xuất nội dung cũng như [nền tảng web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) để giúp **dịch ở chế độ nền**.
+
+</Accordion>
+<Accordion header="Hiệu suất">
+
+Việc kết nối các tệp JSON lớn với các thành phần có thể dẫn đến các vấn đề về hiệu suất và khả năng phản hồi. Intlayer tối ưu hóa việc tải nội dung của bạn tại thời điểm build.
+
+</Accordion>
+<Accordion header="Mở rộng quy mô không có nhà phát triển">
+
+Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** và **[CMS đầy đủ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** để giúp bạn quản lý nội dung đa ngôn ngữ của mình trong **thời gian thực**, giúp việc cộng tác với người dịch, người viết quảng cáo và các thành viên khác trong nhóm trở nên liền mạch. Nội dung có thể được lưu trữ cục bộ và/hoặc từ xa.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -76,7 +107,9 @@ Với Intlayer, bạn có thể:
 
 Xem [Mẫu ứng dụng](https://github.com/aymericzip/intlayer-angular-19-template) trên GitHub.
 
-### Bước 1: Cài đặt các phụ thuộc
+<Steps>
+
+<Step number={1} title="Cài đặt các phụ thuộc">
 
 Cài đặt các gói cần thiết bằng npm:
 
@@ -114,7 +147,9 @@ bun x intlayer init
 - **@angular-builders/custom-webpack**
   Yêu cầu để tùy chỉnh cấu hình Webpack của Angular CLI.
 
-### Bước 2: Cấu hình dự án của bạn
+</Step>
+
+<Step number={2} title="Cấu hình dự án của bạn">
 
 Tạo một tệp cấu hình để thiết lập các ngôn ngữ cho ứng dụng của bạn:
 
@@ -138,7 +173,9 @@ export default config;
 
 > Thông qua tệp cấu hình này, bạn có thể thiết lập các URL được bản địa hóa, điều hướng middleware, tên cookie, vị trí và phần mở rộng của các khai báo nội dung, tắt nhật ký Intlayer trong bảng điều khiển, v.v. Để biết danh sách đầy đủ các tham số có sẵn, hãy tham khảo [tài liệu cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
 
-### Bước 3: Tích hợp Intlayer vào cấu hình Angular của bạn
+</Step>
+
+<Step number={3} title="Tích hợp Intlayer vào cấu hình Angular của bạn">
 
 Để tích hợp Intlayer với Angular CLI, bạn cần sử dụng một trình xây dựng (builder) tùy chỉnh. Hướng dẫn này giả định bạn đang sử dụng Webpack (mặc định cho nhiều dự án Angular).
 
@@ -181,7 +218,9 @@ export default mergeConfig({});
 
 > Hàm `mergeConfig` cấu hình Webpack với Intlayer. Nó chèn `IntlayerPlugin` (để xử lý các tệp khai báo nội dung) và thiết lập các biệt danh (aliases) để đạt hiệu suất tối ưu.
 
-### Bước 4: Khai báo nội dung của bạn
+</Step>
+
+<Step number={4} title="Khai báo nội dung của bạn">
 
 Tạo và quản lý các khai báo nội dung để lưu trữ các bản dịch:
 
@@ -231,7 +270,9 @@ export default appContent;
 
 > Để biết thêm chi tiết, hãy tham khảo [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
 
-### Bước 5: Sử dụng Intlayer trong mã của bạn
+</Step>
+
+<Step number={5} title="Sử dụng Intlayer trong mã của bạn">
 
 Để sử dụng các tính năng quốc tế hóa của Intlayer trong toàn bộ ứng dụng Angular của bạn, bạn cần cung cấp Intlayer trong cấu hình ứng dụng.
 
@@ -279,7 +320,9 @@ Và trong template của bạn:
 
 Nội dung Intlayer được trả về dưới dạng một `Signal`, vì vậy bạn truy cập các giá trị bằng cách gọi signal đó: `content().title`.
 
-### (Tùy chọn) Bước 6: Thay đổi ngôn ngữ nội dung của bạn
+</Step>
+
+<Step number={6} title="Thay đổi ngôn ngữ nội dung của bạn" isOptional={true}>
 
 Để thay đổi ngôn ngữ của nội dung, bạn có thể sử dụng hàm `setLocale` được cung cấp bởi hàm `useLocale`. Điều này cho phép bạn thiết lập ngôn ngữ của ứng dụng và cập nhật nội dung tương ứng.
 
@@ -389,3 +432,7 @@ Tiện ích mở rộng này cung cấp:
 Để tìm hiểu thêm, bạn có thể triển khai [trình chỉnh sửa trực quan (visual editor)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) hoặc xuất nội dung của bạn bằng cách sử dụng [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
 
 ---
+
+</Step>
+
+</Steps>