@intlayer/docs 7.0.4 → 7.0.6

package/blog/vi/intlayer_with_next-i18next.md

@@ -16,9 +16,12 @@ slugs:
   - blog
   - intlayer-with-next-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Thêm plugin loadJSON
   - version: 7.0.0
     date: 2025-10-29
-    changes: Thay đổi sang plugin syncJSON và viết lại toàn diện
+    changes: Chuyển sang plugin syncJSON và viết lại toàn diện
 ---
 
 # Quốc tế hóa Next.js (i18n) với next-i18next và Intlayer
@@ -33,26 +36,26 @@ history:
 
 Tuy nhiên, next-i18next cũng gặp phải một số thách thức:
 
-- **Cấu hình phức tạp**: Việc thiết lập next-i18next đòi hỏi nhiều tệp cấu hình và phải cẩn thận trong việc thiết lập các phiên bản i18n phía máy chủ và phía khách.
-- **Bản dịch phân tán**: Các tệp bản dịch thường được lưu trữ trong các thư mục riêng biệt so với các thành phần, khiến việc duy trì sự nhất quán trở nên khó khăn hơn.
+- **Cấu hình phức tạp**: Việc thiết lập next-i18next yêu cầu nhiều tệp cấu hình và phải cẩn thận trong việc thiết lập các phiên bản i18n phía server và phía client.
+- **Bản dịch phân tán**: Các tệp bản dịch thường được lưu trữ trong các thư mục riêng biệt so với các thành phần, khiến việc duy trì tính nhất quán trở nên khó khăn hơn.
 - **Quản lý namespace thủ công**: Các nhà phát triển cần phải quản lý namespace một cách thủ công và đảm bảo tải đúng các tài nguyên bản dịch.
 - **An toàn kiểu hạn chế**: Hỗ trợ TypeScript yêu cầu cấu hình bổ sung và không cung cấp tự động tạo kiểu cho các bản dịch.
 
 ## Intlayer là gì?
 
-**Intlayer** là một thư viện quốc tế hóa mã nguồn mở sáng tạo, được thiết kế để khắc phục những hạn chế của các giải pháp i18n truyền thống. Nó cung cấp một cách tiếp cận hiện đại cho quản lý nội dung trong các ứng dụng Next.js.
+**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ế để khắc phục những hạn chế của các giải pháp i18n truyền thống. Nó cung cấp một cách tiếp cận hiện đại cho quản lý nội dung trong các ứng dụng Next.js.
 
-Xem so sánh cụ thể với next-intl trong bài viết blog của chúng tôi [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/next-i18next_vs_next-intl_vs_intlayer.md).
+Xem so sánh cụ thể với next-intl trong bài viết blog của chúng tôi [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/next-i18next_vs_next-intl_vs_intlayer.md).
 
 ## Tại sao kết hợp Intlayer với next-i18next?
 
 Trong khi Intlayer cung cấp một giải pháp i18n độc lập xuất sắc (xem hướng dẫn tích hợp Next.js của chúng tôi [Next.js integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_16.md)), bạn có thể muốn kết hợp nó với next-i18next vì một số lý do sau:
 
 1. **Mã nguồn hiện có**: Bạn đã có một triển khai next-i18next ổn định và muốn dần dần chuyển sang trải nghiệm phát triển được cải thiện của Intlayer.
-2. **Yêu cầu kế thừa**: Dự án của bạn yêu cầu tương thích với các plugin hoặc quy trình làm việc i18next hiện có.
-3. **Đội ngũ quen thuộc**: Đội ngũ của bạn quen thuộc với next-i18next nhưng muốn quản lý nội dung tốt hơn.
+2. **Yêu cầu kế thừa**: Dự án của bạn cần tương thích với các plugin hoặc quy trình làm việc i18next hiện có.
+3. **Sự quen thuộc của đội ngũ**: Đội ngũ của bạn quen thuộc với next-i18next nhưng muốn quản lý nội dung tốt hơn.
 
-**Vì vậy, Intlayer có thể được triển khai như một bộ chuyển đổi cho next-i18next để giúp tự động hóa việc dịch JSON của bạn trong CLI hoặc các pipeline CI/CD, kiểm thử các bản dịch của bạn, và nhiều hơn thế nữa.**
+**Vì vậy, Intlayer có thể được triển khai như một bộ chuyển đổi cho next-i18next để giúp tự động hóa việc dịch JSON của bạn trong CLI hoặc các pipeline CI/CD, kiểm thử các bản dịch của bạn, và nhiều hơn nữa.**
 
 Hướng dẫn này sẽ chỉ cho bạn cách tận dụng hệ thống khai báo nội dung vượt trội của Intlayer trong khi vẫn duy trì khả năng tương thích với next-i18next.
 
@@ -76,18 +79,18 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **Giải thích các gói:**
 
-- **intlayer**: Thư viện lõi cho khai báo và quản lý nội dung
-- **next-intlayer**: Lớp tích hợp Next.js với các plugin xây dựng
-- **i18next**: Khung i18n lõi
-- **next-i18next**: Lớp bọc Next.js cho i18next
-- **i18next-resources-to-backend**: Tải tài nguyên động cho i18next
-- **@intlayer/sync-json-plugin**: Plugin để đồng bộ khai báo nội dung Intlayer sang định dạng JSON của i18next
+- **intlayer**: Thư viện cốt lõi cho khai báo và quản lý nội dung
+- **@intlayer/sync-json-plugin**: Plugin để đồng bộ các khai báo nội dung Intlayer sang định dạng JSON của i18next
 
 ### Bước 2: Triển khai plugin Intlayer để bao bọc JSON
 
-Tạo một tệp cấu hình Intlayer để định nghĩa các locale được hỗ trợ của bạn:
+Tạo một file cấu hình Intlayer để định nghĩa các ngôn ngữ bạn hỗ trợ:
 
 **Nếu bạn cũng muốn xuất các từ điển JSON cho i18next**, hãy thêm plugin `syncJSON`:
 
@@ -98,11 +101,11 @@ import { syncJSON } from "@intlayer/sync-json-plugin";
 const config: IntlayerConfig = {
   internationalization: {
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locals.ENGLISH,
+    defaultLocale: Locales.ENGLISH,
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
     }),
   ],
 };
@@ -110,33 +113,76 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-Plugin `syncJSON` sẽ tự động bao bọc JSON. Nó sẽ đọc và ghi các tệp JSON mà không thay đổi cấu trúc nội dung.
+Plugin `syncJSON` sẽ tự động bao bọc JSON. Nó sẽ đọc và ghi các file JSON mà không thay đổi kiến trúc nội dung.
 
-Nếu bạn muốn cho phép JSON đó tồn tại cùng với các tệp khai báo nội dung intlayer (`.content` files), Intlayer sẽ tiến hành theo cách sau:
+Nếu bạn muốn cho phép JSON tồn tại cùng với các file khai báo nội dung intlayer (`.content` files), Intlayer sẽ tiến hành theo cách sau:
 
-    1. tải cả tệp JSON và tệp khai báo nội dung và chuyển đổi chúng thành một từ điển intlayer.
-    2. nếu có xung đột giữa JSON và các tệp khai báo nội dung, Intlayer sẽ tiến hành hợp nhất tất cả các từ điển đó. Tùy thuộc vào ưu tiên của các plugin, và ưu tiên của tệp khai báo nội dung (tất cả đều có thể cấu hình).
+    1. tải cả file JSON và file khai báo nội dung rồi chuyển đổi chúng thành một từ điển intlayer.
+    2. nếu có xung đột giữa JSON và các file khai báo nội dung, Intlayer sẽ tiến hành hợp nhất tất cả các từ điển đó. Tùy thuộc vào ưu tiên của các plugin và ưu tiên của file khai báo nội dung (tất cả đều có thể cấu hình).
 
-Nếu có thay đổi được thực hiện bằng cách sử dụng CLI để dịch JSON, hoặc sử dụng CMS, Intlayer sẽ cập nhật tệp JSON với các bản dịch mới.
+Nếu có thay đổi được thực hiện bằng cách sử dụng CLI để dịch JSON, hoặc sử dụng CMS, Intlayer sẽ cập nhật file JSON với các bản dịch mới.
 
 Để xem thêm chi tiết về plugin `syncJSON`, vui lòng tham khảo [tài liệu plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/plugins/sync-json.md).
 
 ---
 
+### (Tùy chọn) Bước 3: Triển khai dịch JSON theo từng thành phần
+
+Theo mặc định, Intlayer sẽ tải, hợp nhất và đồng bộ cả file JSON và file khai báo nội dung. Xem [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md) để biết thêm chi tiết. Nhưng nếu bạn muốn, sử dụng một plugin của Intlayer, bạn cũng có thể triển khai quản lý JSON theo từng thành phần được bản địa hóa ở bất kỳ đâu trong mã nguồn của bạn.
+
+Để làm điều đó, bạn có thể sử dụng plugin `loadJSON`.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Giữ cho các file JSON hiện tại của bạn đồng bộ với từ điển Intlayer
+  plugins: [
+    /**
+     * Sẽ tải tất cả các file JSON trong thư mục src khớp với mẫu {key}.i18n.json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Đảm bảo các file JSON này ưu tiên hơn các file tại `./public/locales/en/${key}.json`
+    }),
+    /**
+     * Sẽ tải và ghi lại đầu ra cùng các bản dịch trở lại các file JSON trong thư mục locales
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Điều này sẽ tải tất cả các file JSON trong thư mục `src` khớp với mẫu `{key}.i18n.json` và tải chúng như các từ điển Intlayer.
+
+---
+
 ## Cấu hình Git
 
-Loại trừ các tệp được tạo ra khỏi kiểm soát phiên bản:
+Loại trừ các file được tạo tự động khỏi việc kiểm soát phiên bản:
 
 ```plaintext fileName=".gitignore"
-# Bỏ qua các tệp được tạo bởi Intlayer
+# Bỏ qua các file được tạo bởi Intlayer
 .intlayer
 intl
 ```
 
-Những tệp này được tự động tạo lại trong quá trình xây dựng và không cần phải cam kết vào kho lưu trữ của bạn.
+Các file này được tự động tạo lại trong quá trình build và không cần phải commit vào kho mã của bạn.
 
 ### Tiện ích mở rộng VS Code
 
-Để cải thiện trải nghiệm phát triển, hãy cài đặt **Tiện ích mở rộng Intlayer cho VS Code** chính thức:
+Để cải thiện trải nghiệm cho nhà phát triển, hãy cài đặt **Tiện ích mở rộng Intlayer chính thức cho VS Code**:
 
 [Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/vi/intlayer_with_next-intl.md

@@ -7,9 +7,12 @@ slugs:
   - blog
   - intlayer-with-next-intl
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Thêm plugin loadJSON
   - version: 7.0.0
     date: 2025-10-29
-    changes: Thay đổi sang plugin syncJSON
+    changes: Chuyển sang plugin syncJSON
 ---
 
 # Cách tự động hóa bản dịch JSON next-intl của bạn bằng Intlayer
@@ -25,12 +28,13 @@ Xem một so sánh cụ thể với next-intl trong bài viết blog của chún
 Trong khi Intlayer cung cấp một giải pháp i18n độc lập xuất sắc (xem hướng dẫn tích hợp Next.js của chúng tôi [Next.js integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_16.md)), bạn có thể muốn kết hợp nó với next-intl vì một số lý do sau:
 
 1. **Mã nguồn hiện có**: Bạn đã có một triển khai next-intl ổn định và muốn dần dần chuyển sang trải nghiệm phát triển được cải thiện của Intlayer.
-2. **Yêu cầu kế thừa**: Dự án của bạn yêu cầu tương thích với các plugin hoặc quy trình làm việc next-intl hiện có.
-3. **Sự quen thuộc của nhóm**: Nhóm của bạn quen thuộc với next-intl nhưng muốn quản lý nội dung tốt hơn.
+2. **Yêu cầu kế thừa**: Dự án của bạn cần tương thích với các plugin hoặc quy trình làm việc next-intl hiện có.
+3. **Sự quen thuộc của nhóm**: Nhóm của bạn đã quen với next-intl nhưng muốn quản lý nội dung tốt hơn.
+4. **Sử dụng các tính năng của Intlayer**: Bạn muốn sử dụng các tính năng của Intlayer như khai báo nội dung, tự động hóa dịch thuật, kiểm thử bản dịch, và nhiều hơn nữa.
 
-**Vì vậy, Intlayer có thể được triển khai như một bộ chuyển đổi cho next-intl để giúp tự động hóa việc dịch JSON của bạn trong CLI hoặc các pipeline CI/CD, kiểm thử các bản dịch của bạn, và nhiều hơn nữa.**
+**Vì vậy, Intlayer có thể được triển khai như một bộ chuyển đổi (adapter) cho next-intl để giúp tự động hóa các bản dịch JSON của bạn trong CLI hoặc các pipeline CI/CD, kiểm thử bản dịch, và nhiều hơn nữa.**
 
-Hướng dẫn này sẽ chỉ cho bạn cách tận dụng hệ thống khai báo nội dung vượt trội của Intlayer trong khi vẫn duy trì khả năng tương thích với next-intl.
+Hướng dẫn này sẽ chỉ cho bạn cách tận dụng hệ thống khai báo nội dung vượt trội của Intlayer trong khi vẫn giữ được khả năng tương thích với next-intl.
 
 ## Mục lục
 
@@ -54,14 +58,18 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **Mô tả các gói:**
 
 - **intlayer**: Thư viện lõi để quản lý quốc tế hóa, khai báo nội dung và xây dựng
-- **@intlayer/sync-json-plugin**: Plugin để xuất các khai báo nội dung Intlayer sang định dạng JSON tương thích với next-intl
+- **@intlayer/sync-json-plugin**: Plugin để xuất các khai báo nội dung của Intlayer sang định dạng JSON tương thích với next-intl
 
 ### Bước 2: Triển khai plugin Intlayer để bao bọc JSON
 
-Tạo một tệp cấu hình Intlayer để định nghĩa các locale được hỗ trợ của bạn:
+Tạo một tệp cấu hình Intlayer để định nghĩa các ngôn ngữ bạn hỗ trợ:
 
 **Nếu bạn cũng muốn xuất các từ điển JSON cho next-intl**, hãy thêm plugin `syncJSON`:
 
@@ -84,15 +92,58 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-Plugin `syncJSON` sẽ tự động bao bọc JSON. Nó sẽ đọc và ghi các tệp JSON mà không thay đổi kiến trúc nội dung.
+Plugin `syncJSON` sẽ tự động bao bọc JSON. Nó sẽ đọc và ghi các tệp JSON mà không thay đổi cấu trúc nội dung.
 
-Nếu bạn muốn cho phép JSON đó tồn tại cùng với các tệp khai báo nội dung intlayer (`.content` files), Intlayer sẽ tiến hành theo cách sau:
+Nếu bạn muốn cho phép JSON tồn tại cùng với các tệp khai báo nội dung intlayer (`.content` files), Intlayer sẽ tiến hành theo cách sau:
 
     1. tải cả tệp JSON và tệp khai báo nội dung và chuyển đổi chúng thành một từ điển intlayer.
-    2. nếu có xung đột giữa JSON và các tệp khai báo nội dung, Intlayer sẽ tiến hành hợp nhất tất cả các từ điển đó. Tùy thuộc vào độ ưu tiên của các plugin và của tệp khai báo nội dung (tất cả đều có thể cấu hình).
+    2. nếu có xung đột giữa JSON và các tệp khai báo nội dung, Intlayer sẽ tiến hành hợp nhất tất cả các từ điển đó. Tùy thuộc vào ưu tiên của các plugin, và ưu tiên của tệp khai báo nội dung (tất cả đều có thể cấu hình).
 
 Nếu có thay đổi được thực hiện bằng cách sử dụng CLI để dịch JSON, hoặc sử dụng CMS, Intlayer sẽ cập nhật tệp JSON với các bản dịch mới.
 
+Để xem thêm chi tiết về plugin `syncJSON`, vui lòng tham khảo [tài liệu plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/plugins/sync-json.md).
+
+### (Tùy chọn) Bước 3: Triển khai dịch JSON theo từng thành phần
+
+Theo mặc định, Intlayer sẽ tải, hợp nhất và đồng bộ cả tệp JSON và tệp khai báo nội dung. Xem [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md) để biết thêm chi tiết. Nhưng nếu bạn muốn, sử dụng một plugin của Intlayer, bạn cũng có thể triển khai quản lý JSON theo từng thành phần được bản địa hóa ở bất kỳ đâu trong mã nguồn của bạn.
+
+Để làm điều đó, bạn có thể sử dụng plugin `loadJSON`.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Giữ cho các tệp JSON hiện tại của bạn đồng bộ với từ điển Intlayer
+  plugins: [
+    /**
+     * Sẽ tải tất cả các tệp JSON trong thư mục src khớp với mẫu {key}.i18n.json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Đảm bảo các tệp JSON này ưu tiên hơn các tệp tại `./locales/en/${key}.json`
+    }),
+    /**
+     * Sẽ tải và ghi đầu ra cùng các bản dịch trở lại các tệp JSON trong thư mục locales
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Điều này sẽ tải tất cả các tệp JSON trong thư mục `src` khớp với mẫu `{key}.i18n.json` và tải chúng như các từ điển Intlayer.
+
 ## Cấu hình Git
 
 Khuyến nghị bỏ qua các tệp Intlayer được tạo tự động:
@@ -102,7 +153,7 @@ Khuyến nghị bỏ qua các tệp Intlayer được tạo tự động:
 .intlayer
 ```
 
-Các tệp này có thể được tạo lại trong quá trình xây dựng của bạn và không cần phải cam kết vào hệ thống quản lý phiên bản.
+Các tệp này có thể được tạo lại trong quá trình xây dựng và không cần phải cam kết vào hệ thống quản lý phiên bản.
 
 ### Tiện ích mở rộng VS Code
 

package/blog/vi/intlayer_with_react-i18next.md

@@ -2,7 +2,7 @@
 createdAt: 2025-01-02
 updatedAt: 2025-10-29
 title: Cách tự động hóa bản dịch JSON react-i18next của bạn bằng Intlayer
-description: Tự động hóa bản dịch JSON của bạn với Intlayer và react-i18next để nâng cao khả năng quốc tế hóa trong các ứng dụng React.
+description: Tự động hóa bản dịch JSON của bạn với Intlayer và react-i18next để nâng cao quốc tế hóa trong các ứng dụng React.
 keywords:
   - react-i18next
   - i18next
@@ -18,6 +18,9 @@ slugs:
   - blog
   - intlayer-with-react-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Thêm plugin loadJSON
   - version: 7.0.0
     date: 2025-10-29
     changes: Thay đổi sang plugin syncJSON
@@ -27,21 +30,22 @@ history:
 
 ## Intlayer là gì?
 
-**Intlayer** là một thư viện quốc tế hóa mã nguồn mở sáng tạo, được thiết kế để khắc phục những hạn chế của các giải pháp i18n truyền thống. Nó cung cấp một cách tiếp cận hiện đại cho quản lý nội dung trong các ứng dụng React.
+**Intlayer** là một thư viện quốc tế hóa mã nguồn mở sáng tạo, được thiết kế để khắc phục những hạn chế của các giải pháp i18n truyền thống. Nó cung cấp một phương pháp hiện đại để quản lý nội dung trong các ứng dụng React.
 
 Xem so sánh cụ thể với react-i18next trong bài viết blog của chúng tôi [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/react-i18next_vs_react-intl_vs_intlayer.md).
 
 ## Tại sao kết hợp Intlayer với react-i18next?
 
-Trong khi Intlayer cung cấp một giải pháp i18n độc lập xuất sắc (xem hướng dẫn tích hợp React của chúng tôi [React integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+react.md)), bạn có thể muốn kết hợp nó với react-i18next vì một số lý do:
+Trong khi Intlayer cung cấp một giải pháp i18n độc lập xuất sắc (xem hướng dẫn tích hợp React của chúng tôi [React integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+react.md)), bạn có thể muốn kết hợp nó với react-i18next vì một số lý do sau:
 
 1. **Mã nguồn hiện có**: Bạn đã có một triển khai react-i18next ổn định và muốn dần dần chuyển sang trải nghiệm phát triển được cải thiện của Intlayer.
-2. **Yêu cầu kế thừa**: Dự án của bạn yêu cầu tương thích với các plugin hoặc quy trình làm việc react-i18next hiện có.
-3. **Sự quen thuộc của đội ngũ**: Đội ngũ của bạn quen thuộc với react-i18next nhưng muốn quản lý nội dung tốt hơn.
+2. **Yêu cầu kế thừa**: Dự án của bạn cần tương thích với các plugin hoặc quy trình làm việc react-i18next hiện có.
+3. **Đội ngũ quen thuộc**: Đội ngũ của bạn quen thuộc với react-i18next nhưng muốn quản lý nội dung tốt hơn.
+4. **Sử dụng các tính năng của Intlayer**: Bạn muốn sử dụng các tính năng của Intlayer như khai báo nội dung, tự động hóa dịch thuật, kiểm thử bản dịch, và nhiều hơn nữa.
 
-**Vì vậy, Intlayer có thể được triển khai như một bộ chuyển đổi cho react-i18next để giúp tự động hóa việc dịch JSON của bạn trong CLI hoặc các pipeline CI/CD, kiểm thử các bản dịch, và nhiều hơn nữa.**
+**Vì vậy, Intlayer có thể được triển khai như một bộ chuyển đổi cho react-i18next để giúp tự động hóa các bản dịch JSON của bạn trong CLI hoặc các pipeline CI/CD, kiểm thử bản dịch, và nhiều hơn nữa.**
 
-Hướng dẫn này sẽ chỉ cho bạn cách tận dụng hệ thống khai báo nội dung vượt trội của Intlayer đồng thời duy trì khả năng tương thích với react-i18next.
+Hướng dẫn này sẽ chỉ cho bạn cách tận dụng hệ thống khai báo nội dung vượt trội của Intlayer trong khi vẫn duy trì khả năng tương thích với react-i18next.
 
 ## Mục lục
 
@@ -65,14 +69,18 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **Mô tả các gói:**
 
 - **intlayer**: Thư viện lõi để quản lý quốc tế hóa, khai báo nội dung và xây dựng
-- **@intlayer/sync-json-plugin**: Plugin để xuất các khai báo nội dung Intlayer sang định dạng JSON tương thích với react-i18next
+- **@intlayer/sync-json-plugin**: Plugin để xuất các khai báo nội dung của Intlayer sang định dạng JSON tương thích với react-i18next
 
 ### Bước 2: Triển khai plugin Intlayer để bao bọc JSON
 
-Tạo một tệp cấu hình Intlayer để định nghĩa các ngôn ngữ bạn hỗ trợ:
+Tạo một tệp cấu hình Intlayer để định nghĩa các ngôn ngữ được hỗ trợ:
 
 **Nếu bạn cũng muốn xuất các từ điển JSON cho react-i18next**, hãy thêm plugin `syncJSON`:
 
@@ -87,7 +95,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
     }),
   ],
 };
@@ -97,28 +105,69 @@ export default config;
 
 Plugin `syncJSON` sẽ tự động bao bọc JSON. Nó sẽ đọc và ghi các tệp JSON mà không thay đổi kiến trúc nội dung.
 
-Nếu bạn muốn cho phép JSON đó tồn tại cùng với các tệp khai báo nội dung intlayer (`.content` files), Intlayer sẽ tiến hành theo cách sau:
+Nếu bạn muốn cho phép JSON tồn tại cùng với các tệp khai báo nội dung intlayer (`.content` files), Intlayer sẽ tiến hành theo cách sau:
 
-    1. tải cả tệp JSON và tệp khai báo nội dung rồi chuyển đổi chúng thành một từ điển intlayer.
-    2. nếu có xung đột giữa JSON và các tệp khai báo nội dung, Intlayer sẽ tiến hành hợp nhất tất cả các từ điển đó. Tùy thuộc vào ưu tiên của các plugin và tệp khai báo nội dung (tất cả đều có thể cấu hình).
+    1. tải cả tệp JSON và tệp khai báo nội dung và chuyển đổi chúng thành một từ điển intlayer.
+    2. nếu có xung đột giữa JSON và các tệp khai báo nội dung, Intlayer sẽ tiến hành hợp nhất tất cả các từ điển đó. Tùy thuộc vào ưu tiên của các plugin, và ưu tiên của tệp khai báo nội dung (tất cả đều có thể cấu hình).
 
-Nếu có thay đổi được thực hiện bằng cách sử dụng CLI để dịch JSON, hoặc sử dụng CMS, Intlayer sẽ cập nhật tệp JSON với các bản dịch mới.
+Nếu có thay đổi được thực hiện bằng CLI để dịch JSON, hoặc sử dụng CMS, Intlayer sẽ cập nhật tệp JSON với các bản dịch mới.
 
 Để xem thêm chi tiết về plugin `syncJSON`, vui lòng tham khảo [tài liệu plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/plugins/sync-json.md).
 
+### (Tùy chọn) Bước 3: Triển khai dịch JSON theo từng thành phần
+
+Theo mặc định, Intlayer sẽ tải, hợp nhất và đồng bộ cả tệp JSON và tệp khai báo nội dung. Xem [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md) để biết thêm chi tiết. Nhưng nếu bạn muốn, sử dụng một plugin Intlayer, bạn cũng có thể triển khai quản lý JSON theo từng thành phần được bản địa hóa ở bất kỳ đâu trong mã nguồn của bạn.
+
+Để làm điều đó, bạn có thể sử dụng plugin `loadJSON`.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Giữ cho các tệp JSON hiện tại của bạn đồng bộ với từ điển Intlayer
+  plugins: [
+    /**
+     * Sẽ tải tất cả các tệp JSON trong thư mục src khớp với mẫu {key}.i18n.json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Đảm bảo các tệp JSON này ưu tiên hơn các tệp tại `./locales/en/${key}.json`
+    }),
+    /**
+     * Sẽ tải và ghi đầu ra cùng các bản dịch trở lại các tệp JSON trong thư mục locales
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Điều này sẽ tải tất cả các tệp JSON trong thư mục `src` khớp với mẫu `{key}.i18n.json` và tải chúng như các từ điển Intlayer.
+
 ## Cấu hình Git
 
 Khuyến nghị bỏ qua các tệp Intlayer được tạo tự động:
 
 ```plaintext fileName=".gitignore"
-# Bỏ qua các tệp được tạo bởi Intlayer
+# Bỏ qua các tệp do Intlayer tạo ra
 .intlayer
 ```
 
-Các tệp này có thể được tạo lại trong quá trình xây dựng của bạn và không cần phải cam kết vào hệ thống kiểm soát phiên bản.
+Các tệp này có thể được tạo lại trong quá trình xây dựng và không cần phải cam kết vào hệ thống quản lý phiên bản.
 
 ### Tiện ích mở rộng VS Code
 
-Để cải thiện trải nghiệm phát triển, hãy cài đặt **Tiện ích mở rộng Intlayer chính thức cho VS Code**:
+Để cải thiện trải nghiệm phát triển, hãy cài đặt **Tiện ích mở rộng Intlayer cho VS Code** chính thức:
 
 [Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/vi/intlayer_with_react-intl.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-02
 updatedAt: 2025-10-29
-title: Cách tự động hóa bản dịch JSON react-intl của bạn bằng Intlayer
-description: Tự động hóa bản dịch JSON của bạn với Intlayer và react-intl để nâng cao khả năng quốc tế hóa trong các ứng dụng React.
+title: Cách tự động hóa dịch JSON react-intl của bạn bằng Intlayer
+description: Tự động hóa dịch JSON của bạn với Intlayer và react-intl để nâng cao quốc tế hóa trong các ứng dụng React.
 keywords:
   - react-intl
   - Intlayer
@@ -16,28 +16,36 @@ slugs:
   - blog
   - intlayer-with-react-intl
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Thêm plugin loadJSON
   - version: 7.0.0
     date: 2025-10-29
-    changes: Thay đổi sang plugin syncJSON
+    changes: Chuyển sang plugin syncJSON
 ---
 
-# Cách tự động hóa bản dịch JSON react-intl của bạn bằng Intlayer
+# Cách tự động hóa dịch JSON react-intl của bạn bằng Intlayer
+
+## Mục lục
+
+<TOC/>
 
 ## Intlayer là gì?
 
-**Intlayer** là một thư viện quốc tế hóa mã nguồn mở sáng tạo, được thiết kế để khắc phục những hạn chế của các giải pháp i18n truyền thống. Nó cung cấp một cách tiếp cận hiện đại cho quản lý nội dung trong các ứng dụng React.
+**Intlayer** là một thư viện quốc tế hóa mã nguồn mở sáng tạo, được thiết kế để khắc phục những hạn chế của các giải pháp i18n truyền thống. Nó cung cấp một phương pháp hiện đại để quản lý nội dung trong các ứng dụng React.
 
-Xem so sánh cụ thể với react-intl trong bài viết blog của chúng tôi [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/react-i18next_vs_react-intl_vs_intlayer.md).
+Xem so sánh cụ thể với react-intl trong bài viết blog của chúng tôi [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/react-i18next_vs_react-intl_vs_intlayer.md).
 
 ## Tại sao kết hợp Intlayer với react-intl?
 
-Trong khi Intlayer cung cấp một giải pháp i18n độc lập xuất sắc (xem hướng dẫn tích hợp React của chúng tôi [React integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react.md)), bạn có thể muốn kết hợp nó với react-intl vì một số lý do sau:
+Trong khi Intlayer cung cấp một giải pháp i18n độc lập xuất sắc (xem hướng dẫn tích hợp React của chúng tôi [React integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+react.md)), bạn có thể muốn kết hợp nó với react-intl vì một số lý do:
 
 1. **Mã nguồn hiện có**: Bạn đã có một triển khai react-intl ổn định và muốn dần dần chuyển sang trải nghiệm phát triển được cải thiện của Intlayer.
 2. **Yêu cầu kế thừa**: Dự án của bạn cần tương thích với các plugin hoặc quy trình làm việc react-intl hiện có.
 3. **Đội ngũ quen thuộc**: Đội ngũ của bạn quen thuộc với react-intl nhưng muốn quản lý nội dung tốt hơn.
+4. **Sử dụng các tính năng của Intlayer**: Bạn muốn sử dụng các tính năng của Intlayer như khai báo nội dung, tự động hóa dịch thuật, kiểm thử bản dịch, và nhiều hơn nữa.
 
-**Vì vậy, Intlayer có thể được triển khai như một bộ điều hợp cho react-intl để giúp tự động hóa việc dịch JSON của bạn trong CLI hoặc các pipeline CI/CD, kiểm thử bản dịch, và nhiều hơn nữa.**
+**Vì vậy, Intlayer có thể được triển khai như một bộ chuyển đổi cho react-intl để giúp tự động hóa các bản dịch JSON của bạn trong CLI hoặc các pipeline CI/CD, kiểm thử bản dịch, và nhiều hơn nữa.**
 
 Hướng dẫn này sẽ chỉ cho bạn cách tận dụng hệ thống khai báo nội dung vượt trội của Intlayer trong khi vẫn duy trì khả năng tương thích với react-intl.
 
@@ -63,14 +71,18 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **Mô tả các gói:**
 
 - **intlayer**: Thư viện lõi để quản lý quốc tế hóa, khai báo nội dung và xây dựng
-- **@intlayer/sync-json-plugin**: Plugin để xuất các khai báo nội dung Intlayer sang định dạng JSON tương thích với react-intl
+- **@intlayer/sync-json-plugin**: Plugin để xuất các khai báo nội dung của Intlayer sang định dạng JSON tương thích với react-intl
 
 ### Bước 2: Triển khai plugin Intlayer để bao bọc JSON
 
-Tạo một tệp cấu hình Intlayer để định nghĩa các ngôn ngữ bạn hỗ trợ:
+Tạo một tệp cấu hình Intlayer để định nghĩa các ngôn ngữ được hỗ trợ của bạn:
 
 **Nếu bạn cũng muốn xuất các từ điển JSON cho react-intl**, hãy thêm plugin `syncJSON`:
 
@@ -93,30 +105,71 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-Plugin `syncJSON` sẽ tự động bao bọc JSON. Nó sẽ đọc và ghi các tệp JSON mà không thay đổi cấu trúc nội dung.
+Plugin `syncJSON` sẽ tự động bao bọc JSON. Nó sẽ đọc và ghi các tệp JSON mà không thay đổi kiến trúc nội dung.
 
 Nếu bạn muốn cho phép JSON đó tồn tại cùng với các tệp khai báo nội dung intlayer (`.content` files), Intlayer sẽ tiến hành theo cách sau:
 
     1. tải cả tệp JSON và tệp khai báo nội dung và chuyển đổi chúng thành một từ điển intlayer.
-    2. nếu có xung đột giữa JSON và các tệp khai báo nội dung, Intlayer sẽ tiến hành hợp nhất tất cả các từ điển đó. Tùy thuộc vào ưu tiên của các plugin và tệp khai báo nội dung (tất cả đều có thể cấu hình).
+    2. nếu có xung đột giữa JSON và các tệp khai báo nội dung, Intlayer sẽ tiến hành hợp nhất tất cả các từ điển đó. Tùy thuộc vào ưu tiên của các plugin, và của tệp khai báo nội dung (tất cả đều có thể cấu hình).
+
+Nếu có thay đổi được thực hiện bằng CLI để dịch JSON, hoặc sử dụng CMS, Intlayer sẽ cập nhật tệp JSON với các bản dịch mới.
+
+Để xem thêm chi tiết về plugin `syncJSON`, vui lòng tham khảo [tài liệu plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/plugins/sync-json.md).
+
+### (Tùy chọn) Bước 3: Triển khai dịch JSON theo từng thành phần
+
+Theo mặc định, Intlayer sẽ tải, hợp nhất và đồng bộ cả tệp JSON và tệp khai báo nội dung. Xem [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md) để biết thêm chi tiết. Nhưng nếu bạn muốn, sử dụng một plugin của Intlayer, bạn cũng có thể triển khai quản lý JSON theo từng thành phần được bản địa hóa ở bất kỳ đâu trong mã nguồn của bạn.
+
+Để làm điều đó, bạn có thể sử dụng plugin `loadJSON`.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Giữ các tệp JSON hiện tại của bạn đồng bộ với từ điển Intlayer
+  plugins: [
+    /**
+     * Sẽ tải tất cả các tệp JSON trong thư mục src khớp với mẫu {key}.i18n.json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Đảm bảo các tệp JSON này ưu tiên hơn các tệp tại `./locales/en/${key}.json`
+    }),
+    /**
+     * Sẽ tải và ghi đầu ra cùng các bản dịch trở lại các tệp JSON trong thư mục locales
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
 
-Nếu có thay đổi được thực hiện bằng cách sử dụng CLI để dịch JSON, hoặc sử dụng CMS, Intlayer sẽ cập nhật tệp JSON với các bản dịch mới.
+export default config;
+```
 
-Để xem chi tiết hơn về plugin `syncJSON`, vui lòng tham khảo [tài liệu plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/plugins/sync-json.md).
+Điều này sẽ tải tất cả các tệp JSON trong thư mục `src` khớp với mẫu `{key}.i18n.json` và tải chúng như các từ điển Intlayer.
 
 ## Cấu hình Git
 
 Khuyến nghị bỏ qua các tệp Intlayer được tạo tự động:
 
 ```plaintext fileName=".gitignore"
-# Bỏ qua các tệp do Intlayer tạo ra
+# Bỏ qua các tệp được tạo bởi Intlayer
 .intlayer
 ```
 
-Những tệp này có thể được tạo lại trong quá trình xây dựng của bạn và không cần phải cam kết vào hệ thống quản lý phiên bản.
+Các tệp này có thể được tạo lại trong quá trình xây dựng của bạn và không cần phải cam kết vào hệ thống quản lý phiên bản.
 
 ### Tiện ích mở rộng VS Code
 
-Để cải thiện trải nghiệm phát triển, hãy cài đặt **Tiện ích mở rộng Intlayer cho VS Code** chính thức:
+Để cải thiện trải nghiệm phát triển, hãy cài đặt **Tiện ích mở rộng Intlayer chính thức cho VS Code**:
 
 [Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)