@intlayer/docs 8.11.1 → 8.11.3

package/docs/vi/intlayer_with_react_router_v7.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-06
-title: React Router v7 i18n - Cách dịch ứng dụng React Router v7 năm 2026
-description: Tìm hiểu cách thêm quốc tế hóa (i18n) vào ứng dụng React Router v7 của bạn bằng Intlayer. Theo dõi hướng dẫn toàn diện này để làm cho ứng dụng của bạn đa ngôn ngữ với định tuyến nhận biết locale.
+updatedAt: 2026-05-31
+title: React Router v7 i18n - Hướng dẫn đầy đủ để dịch React Router
+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 React Router v7 ứ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
@@ -46,23 +46,55 @@ Hướng dẫn này trình bày cách tích hợp **Intlayer** để thực hi
 
 <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ư `react-i18next` 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ư:
 
-Với Intlayer, bạn có thể:
+<AccordionGroup>
+<Accordion header="Phạm vi phủ sóng đầy đủ của Bộ định tuyến React">
 
-- **Dễ dàng quản lý bản dịch** bằng cách sử dụng từ điển khai báo ở cấp độ component.
-- **Định vị động metadata**, các route và nội dung.
-- **Đảm bảo hỗ trợ TypeScript** với các kiểu được tự động tạo, cải thiện tính năng tự động hoàn thành và phát hiện lỗi.
-- **Tận hưởng các tính năng nâng cao**, như phát hiện và chuyển đổi locale động.
-- **Kích hoạt định tuyến nhận biết locale** với hệ thống định tuyến dựa trên cấu hình của React Router v7.
+Intlayer được tối ưu hóa để hoạt động hoàn hảo với React Router bằng cách cung cấp **định tuyến nhận biết ngôn ngữ**, **phần mềm trung gian để phát hiện ngôn ngữ** 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>
 
 ---
 
 ## Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng React Router v7
 
-### 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 trình quản lý gói bạn ưa thích:
 
@@ -100,7 +132,13 @@ bun x intlayer init
 - **vite-intlayer**
   Bao gồm plugin Vite để tích hợp Intlayer với [trình đóng gói Vite](https://vite.dev/guide/why.html#why-bundle-for-production), cũng như middleware để phát hiện ngôn ngữ ưu tiên của người dùng, quản lý cookie và xử lý chuyển hướng URL.
 
-### 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">
+
+</Step>
+
+</Steps>
 
 ## Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng React Router v7 với các route dựa trên hệ thống tệp
 
@@ -153,7 +191,9 @@ export default config;
 
 > Thông qua tệp cấu hình này, bạn có thể thiết lập URL theo ngôn ngữ, chuyển 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 các log của Intlayer trên console, và nhiều hơn nữa. Để xem 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
+<Steps>
+
+<Step number={3} title="Tích hợp Intlayer vào cấu hình Vite của bạn">
 
 Thêm plugin intlayer vào cấu hình của bạn:
 
@@ -169,7 +209,9 @@ export default defineConfig({
 
 > Plugin Vite `intlayer()` được sử dụng để tích hợp Intlayer với Vite. Nó đảm bảo việc xây dựng các tệp khai báo nội dung và giám sát chúng trong chế độ phát triển. Nó định nghĩa các biến môi trường Intlayer trong ứng dụng Vite. Ngoài ra, nó còn cung cấp các alias để tối ưu hiệu suất.
 
-### Bước 4: Cấu hình các Route của React Router v7
+</Step>
+
+<Step number={4} title="Cấu hình các Route của React Router v7">
 
 Thiết lập cấu hình routing với các route nhận biết ngôn ngữ:
 
@@ -182,7 +224,9 @@ export default [
 ] satisfies RouteConfig;
 ```
 
-### Bước 5: Tạo các Component Layout
+</Step>
+
+<Step number={5} title="Tạo các Component Layout">
 
 Thiết lập root layout và các layout theo ngôn ngữ cụ thể:
 
@@ -236,7 +280,9 @@ export function Layout({
 }
 ```
 
-### Bước 6: Khai báo Nội dung của bạn
+</Step>
+
+<Step number={6} 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ữ bản dịch:
 
@@ -276,7 +322,9 @@ export default pageContent;
 
 > Để 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 7: Tạo các thành phần nhận biết ngôn ngữ
+</Step>
+
+<Step number={7} title="Tạo các thành phần nhận biết ngôn ngữ">
 
 Tạo một thành phần `LocalizedLink` để điều hướng nhận biết ngôn ngữ:
 
@@ -337,7 +385,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Bước 8: Sử dụng Intlayer trong các Trang của Bạn
+</Step>
+
+<Step number={8} title="Sử dụng Intlayer trong các Trang của Bạn">
 
 Truy cập các từ điển nội dung của bạn trong toàn bộ ứng dụng:
 
@@ -391,7 +441,9 @@ export default function Page() {
 
 > Nếu ứng dụng của bạn đã tồn tại, bạn có thể sử dụng [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/compiler.md) kết hợp với [lệnh extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/extract.md) để chuyển đổi hàng nghìn component chỉ trong một giây.
 
-### Bước 9: Tạo Thành Phần Chuyển Đổi Ngôn Ngữ
+</Step>
+
+<Step number={9} title="Tạo Thành Phần Chuyển Đổi Ngôn Ngữ">
 
 Tạo một thành phần cho phép người dùng thay đổi ngôn ngữ:
 
@@ -452,7 +504,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Để tìm hiểu thêm về hook `useLocale`, tham khảo [tài liệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useLocale.md).
 
-### Bước 10: Thêm quản lý thuộc tính HTML (Tùy chọn)
+</Step>
+
+<Step number={10} title="Thêm quản lý thuộc tính HTML">
 
 Tạo một hook để quản lý các thuộc tính lang và dir của HTML:
 
@@ -490,7 +544,9 @@ export default function RootLayout() {
 }
 ```
 
-### (Tùy chọn) Bước 1 : Trích xuất nội dung các thành phần của bạn
+</Step>
+
+<Step number={1} 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.
 
@@ -588,6 +644,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configure TypeScript
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
@@ -653,7 +713,9 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 for a fully internationalized application with locale-aware routing and TypeScript support.
 
-### Bước 11: Thêm middleware (Tùy chọn)
+<Steps>
+
+<Step number={11} title="Thêm middleware">
 
 Bạn cũng có thể sử dụng `intlayerProxy` để thêm routing phía server cho ứng dụng của bạn. Plugin này sẽ tự động phát hiện locale hiện tại dựa trên URL và thiết lập cookie locale phù hợp. Nếu không có locale nào được chỉ định, plugin sẽ xác định locale phù hợp nhất dựa trên ngôn ngữ trình duyệt của người dùng. Nếu không phát hiện được locale nào, nó sẽ chuyển hướng đến locale mặc định.
 
@@ -676,6 +738,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Cấu hình TypeScript
 
 Intlayer sử dụng module augmentation để tận dụng các lợi ích của TypeScript và làm cho codebase của bạn mạnh mẽ hơn.

package/docs/vi/intlayer_with_react_router_v7_fs_routes.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-06
-title: React Router v7 i18n - Cách dịch ứng dụng React Router v7 năm 2026
-description: Tìm hiểu cách thêm quốc tế hóa (i18n) vào ứng dụng React Router v7 của bạn bằng Intlayer. Theo dõi hướng dẫn toàn diện này để làm cho ứng dụng của bạn đa ngôn ngữ với định tuyến nhận biết locale.
+updatedAt: 2026-05-31
+title: React Router v7 i18n - Hướng dẫn đầy đủ để dịch Complete
+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 React Router v7 ứ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
@@ -45,23 +45,55 @@ Hướng dẫn này trình bày cách tích hợp **Intlayer** để thực hi
 
 <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ư `react-i18next` 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ư:
 
-Với Intlayer, bạn có thể:
+<AccordionGroup>
+<Accordion header="Phạm vi phủ sóng đầy đủ của Bộ định tuyến React">
 
-- **Dễ dàng quản lý bản dịch** bằng cách sử dụng từ điển khai báo ở cấp độ component.
-- **Định vị động metadata**, các route và nội dung.
-- **Đảm bảo hỗ trợ TypeScript** với các kiểu được tự động tạo, cải thiện tính năng tự động hoàn thành và phát hiện lỗi.
-- **Tận hưởng các tính năng nâng cao**, như phát hiện và chuyển đổi locale động.
-- **Kích hoạt định tuyến nhận biết locale** với hệ thống định tuyến dựa trên cấu hình của React Router v7.
+Intlayer được tối ưu hóa để hoạt động hoàn hảo với React Router bằng cách cung cấp **định tuyến nhận biết ngôn ngữ**, **phần mềm trung gian để phát hiện ngôn ngữ** 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>
 
 ---
 
 ## Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng React Router v7
 
-### 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 trình quản lý gói bạn ưa thích:
 
@@ -99,7 +131,13 @@ bun x intlayer init
 - **vite-intlayer**
   Bao gồm plugin Vite để tích hợp Intlayer với [trình đóng gói Vite](https://vite.dev/guide/why.html#why-bundle-for-production), cũng như middleware để phát hiện ngôn ngữ ưu tiên của người dùng, quản lý cookie và xử lý chuyển hướng URL.
 
-### 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">
+
+</Step>
+
+</Steps>
 
 ## Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng React Router v7 với các route dựa trên hệ thống tệp
 
@@ -152,7 +190,9 @@ export default config;
 
 > Thông qua tệp cấu hình này, bạn có thể thiết lập URL theo ngôn ngữ, chuyển 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 các log của Intlayer trên console, và nhiều hơn nữa. Để xem 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
+<Steps>
+
+<Step number={3} title="Tích hợp Intlayer vào cấu hình Vite của bạn">
 
 Thêm plugin intlayer vào cấu hình của bạn:
 
@@ -168,7 +208,9 @@ export default defineConfig({
 
 > Plugin Vite `intlayer()` được sử dụng để tích hợp Intlayer với Vite. Nó đảm bảo việc xây dựng các tệp khai báo nội dung và giám sát chúng trong chế độ phát triển. Nó định nghĩa các biến môi trường Intlayer trong ứng dụng Vite. Ngoài ra, nó còn cung cấp các alias để tối ưu hiệu suất.
 
-### Bước 4: Cấu hình các Route của React Router v7
+</Step>
+
+<Step number={4} title="Cấu hình các Route của React Router v7">
 
 Thiết lập cấu hình routing với các route nhận biết ngôn ngữ:
 
@@ -183,7 +225,9 @@ export default [
 ] satisfies RouteConfig;
 ```
 
-### Bước 5: Tạo các Component Layout
+</Step>
+
+<Step number={5} title="Tạo các Component Layout">
 
 Thiết lập root layout và các layout theo ngôn ngữ cụ thể:
 
@@ -206,7 +250,9 @@ export default function RootLayout({ params }: Route.ComponentProps) {
 }
 ```
 
-### Bước 6: Khai báo Nội dung của bạn
+</Step>
+
+<Step number={6} 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ữ bản dịch:
 
@@ -246,7 +292,9 @@ export default pageContent;
 
 > Để 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 7: Tạo các thành phần nhận biết ngôn ngữ
+</Step>
+
+<Step number={7} title="Tạo các thành phần nhận biết ngôn ngữ">
 
 Tạo một thành phần `LocalizedLink` để điều hướng nhận biết ngôn ngữ:
 
@@ -307,7 +355,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Bước 8: Sử dụng Intlayer trong các Trang của Bạn
+</Step>
+
+<Step number={8} title="Sử dụng Intlayer trong các Trang của Bạn">
 
 Truy cập các từ điển nội dung của bạn trong toàn bộ ứng dụng:
 
@@ -336,7 +386,9 @@ export default function Page() {
 
 > Nếu ứng dụng của bạn đã tồn tại, bạn có thể sử dụng [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/compiler.md) kết hợp với [lệnh extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/extract.md) để chuyển đổi hàng nghìn component chỉ trong một giây.
 
-### Bước 9: Tạo Thành Phần Chuyển Đổi Ngôn Ngữ
+</Step>
+
+<Step number={9} title="Tạo Thành Phần Chuyển Đổi Ngôn Ngữ">
 
 Tạo một thành phần cho phép người dùng thay đổi ngôn ngữ:
 
@@ -397,7 +449,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Để tìm hiểu thêm về hook `useLocale`, tham khảo [tài liệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useLocale.md).
 
-### Bước 10: Thêm quản lý thuộc tính HTML (Tùy chọn)
+</Step>
+
+<Step number={10} title="Thêm quản lý thuộc tính HTML">
 
 Tạo một hook để quản lý các thuộc tính lang và dir của HTML:
 
@@ -435,7 +489,9 @@ export default function RootLayout() {
 }
 ```
 
-### (Tùy chọn) Bước 1 : Trích xuất nội dung các thành phần của bạn
+</Step>
+
+<Step number={1} 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.
 
@@ -533,6 +589,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configure TypeScript
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
@@ -599,7 +659,9 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 using file-system based routing for a fully internationalized application with locale-aware routing and TypeScript support.
 
-### Bước 11: Thêm middleware (Tùy chọn)
+<Steps>
+
+<Step number={11} title="Thêm middleware">
 
 Bạn cũng có thể sử dụng `intlayerProxy` để thêm routing phía server cho ứng dụng của bạn. Plugin này sẽ tự động phát hiện locale hiện tại dựa trên URL và thiết lập cookie locale phù hợp. Nếu không có locale nào được chỉ định, plugin sẽ xác định locale phù hợp nhất dựa trên ngôn ngữ trình duyệt của người dùng. Nếu không phát hiện được locale nào, nó sẽ chuyển hướng đến locale mặc định.
 
@@ -622,6 +684,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Cấu hình TypeScript
 
 Intlayer sử dụng module augmentation để tận dụng các lợi ích của TypeScript và làm cho codebase của bạn mạnh mẽ hơn.

package/docs/vi/intlayer_with_storybook.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
+updatedAt: 2026-05-31
 title: Cách thiết lập Intlayer với Storybook
 description: Tìm hiểu cách làm cho hệ thống thiết kế của bạn đa ngôn ngữ bằng cách sử dụng Intlayer với Storybook - biên dịch các khai báo nội dung, thêm trình chuyển đổi ngôn ngữ và xem trước các thành phần của bạn bằng bất kỳ ngôn ngữ nào.
 keywords:
@@ -31,16 +31,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. Nó hoạt động ở **cấp độ thành phần** - mỗi thành phần sở hữu các khai báo nội dung riêng - giữ cho các bản dịch được đặt cùng với mã nguồn sử dụng chúng.
+So với các giải pháp chính như `storybook-react-i18next` 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ư:
 
-Với Intlayer, bạn có thể:
+<AccordionGroup>
+<Accordion header="Giới thiệu đầy đủ về Truyện">
 
-- **Quản lý các bản dịch một cách khai báo** với các tệp nội dung trên từng thành phần.
-- **Hỗ trợ đầy đủ TypeScript** thông qua các kiểu dữ liệu được tạo tự động và tính năng tự động hoàn thành của IDE.
-- **Chuyển đổi ngôn ngữ khi đang chạy** mà không cần tải lại trang.
-- **Tự động dịch** với các tích hợp nhà cung cấp AI được tích hợp sẵn.
+Intlayer được tối ưu hóa để hoạt động hoàn hảo với Storybook bằng cách cung cấp **trình trang trí câu chuyện đa ngôn ngữ**, **chuyển đổi ngôn ngữ** 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) trên hệ thống thiết kế của bạn.
+
+</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>
 
 ---
 
@@ -59,7 +90,9 @@ Storybook là công cụ tiêu chuẩn trong ngành để phát triển và lậ
 <Tabs>
 <Tab value="Vite Setup">
 
-### Bước 1: Cài đặt các phụ thuộc
+<Steps>
+
+<Step number={1} title="Cài đặt các phụ thuộc">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +122,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Bước 2: Tạo cấu hình Intlayer
+</Step>
+
+<Step number={2} title="Tạo cấu hình Intlayer">
 
 Tạo `intlayer.config.ts` tại thư mục gốc của dự án (hoặc bên trong gói hệ thống thiết kế của bạn):
 
@@ -118,7 +153,9 @@ export default config;
 
 ---
 
-### Bước 3: Thêm Plugin Vite vào Storybook
+</Step>
+
+<Step number={3} title="Thêm Plugin Vite vào Storybook">
 
 Hook `viteFinal` của Storybook cho phép bạn mở rộng cấu hình Vite nội bộ. Nhập và thêm plugin `intlayer()` tại đó:
 
@@ -159,7 +196,9 @@ Plugin `intlayer()` theo dõi các tệp `*.content.ts` của bạn và tự đ
 
 ---
 
-### Bước 4: Thêm Decorator `IntlayerProvider` và Thanh công cụ Ngôn ngữ
+</Step>
+
+<Step number={4} title="Thêm Decorator `IntlayerProvider` và Thanh công cụ Ngôn ngữ">
 
 Tệp `preview` của Storybook là nơi thích hợp để bao bọc mọi câu chuyện với `IntlayerProvider` và hiển thị trình chuyển đổi ngôn ngữ trên thanh công cụ:
 
@@ -216,7 +255,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Bước 1: Cài đặt các phụ thuộc
+</Step>
+
+<Step number={1} title="Cài đặt các phụ thuộc">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +281,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Bước 2: Tạo cấu hình Intlayer
+</Step>
+
+<Step number={2} title="Tạo cấu hình Intlayer">
 
 Tạo `intlayer.config.ts` tại thư mục gốc của dự án:
 
@@ -262,7 +305,9 @@ export default config;
 
 ---
 
-### Bước 3: Cấu hình Webpack của Storybook
+</Step>
+
+<Step number={3} title="Cấu hình Webpack của Storybook">
 
 Đối với các thiết lập Storybook dựa trên Webpack (ví dụ: `@storybook/react-webpack5`), hãy mở rộng cấu hình webpack thông qua `webpackFinal` để thêm các alias và loader của Intlayer:
 
@@ -289,7 +334,9 @@ export default config;
 
 ---
 
-### Bước 4: Thêm Decorator `IntlayerProvider` và Thanh công cụ Ngôn ngữ
+</Step>
+
+<Step number={4} title="Thêm Decorator `IntlayerProvider` và Thanh công cụ Ngôn ngữ">
 
 Tương tự như thiết lập Vite - thêm decorator và kiểu ngôn ngữ toàn cục trong tệp `.storybook/preview.tsx`:
 
@@ -335,6 +382,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Khai báo nội dung
 
 Tạo tệp `*.content.ts` bên cạnh mỗi thành phần. Intlayer sẽ tự động nhận diện nó trong quá trình biên dịch.