@intlayer/docs 7.0.3 → 7.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (159) hide show
  1. package/blog/ar/intlayer_with_i18next.md +68 -106
  2. package/blog/ar/intlayer_with_next-i18next.md +84 -288
  3. package/blog/ar/intlayer_with_next-intl.md +58 -337
  4. package/blog/ar/intlayer_with_react-i18next.md +68 -290
  5. package/blog/ar/intlayer_with_react-intl.md +63 -266
  6. package/blog/de/intlayer_with_i18next.md +77 -97
  7. package/blog/de/intlayer_with_next-i18next.md +69 -296
  8. package/blog/de/intlayer_with_next-intl.md +59 -340
  9. package/blog/de/intlayer_with_react-i18next.md +68 -290
  10. package/blog/de/intlayer_with_react-intl.md +62 -264
  11. package/blog/en/intlayer_with_i18next.md +67 -103
  12. package/blog/en/intlayer_with_next-i18next.md +69 -294
  13. package/blog/en/intlayer_with_next-intl.md +48 -300
  14. package/blog/en/intlayer_with_react-i18next.md +61 -289
  15. package/blog/en/intlayer_with_react-intl.md +61 -284
  16. package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
  17. package/blog/en-GB/intlayer_with_i18next.md +67 -103
  18. package/blog/en-GB/intlayer_with_next-i18next.md +71 -292
  19. package/blog/en-GB/intlayer_with_next-intl.md +58 -337
  20. package/blog/en-GB/intlayer_with_react-i18next.md +67 -289
  21. package/blog/en-GB/intlayer_with_react-intl.md +61 -264
  22. package/blog/es/intlayer_with_i18next.md +67 -103
  23. package/blog/es/intlayer_with_next-i18next.md +71 -296
  24. package/blog/es/intlayer_with_next-intl.md +57 -338
  25. package/blog/es/intlayer_with_react-i18next.md +68 -290
  26. package/blog/es/intlayer_with_react-intl.md +62 -265
  27. package/blog/fr/intlayer_with_i18next.md +66 -104
  28. package/blog/fr/intlayer_with_next-i18next.md +82 -285
  29. package/blog/fr/intlayer_with_next-intl.md +57 -338
  30. package/blog/fr/intlayer_with_react-i18next.md +67 -289
  31. package/blog/fr/intlayer_with_react-intl.md +61 -264
  32. package/blog/hi/intlayer_with_i18next.md +68 -104
  33. package/blog/hi/intlayer_with_next-i18next.md +74 -299
  34. package/blog/hi/intlayer_with_next-intl.md +57 -239
  35. package/blog/hi/intlayer_with_react-i18next.md +69 -291
  36. package/blog/hi/intlayer_with_react-intl.md +65 -268
  37. package/blog/id/intlayer_with_i18next.md +126 -0
  38. package/blog/id/intlayer_with_next-i18next.md +142 -0
  39. package/blog/id/intlayer_with_next-intl.md +113 -0
  40. package/blog/id/intlayer_with_react-i18next.md +124 -0
  41. package/blog/id/intlayer_with_react-intl.md +122 -0
  42. package/blog/it/intlayer_with_i18next.md +67 -103
  43. package/blog/it/intlayer_with_next-i18next.md +71 -296
  44. package/blog/it/intlayer_with_next-intl.md +57 -338
  45. package/blog/it/intlayer_with_react-i18next.md +68 -290
  46. package/blog/it/intlayer_with_react-intl.md +62 -265
  47. package/blog/ja/intlayer_with_i18next.md +68 -103
  48. package/blog/ja/intlayer_with_next-i18next.md +85 -283
  49. package/blog/ja/intlayer_with_next-intl.md +58 -336
  50. package/blog/ja/intlayer_with_react-i18next.md +68 -290
  51. package/blog/ja/intlayer_with_react-intl.md +62 -264
  52. package/blog/ko/intlayer_with_i18next.md +80 -96
  53. package/blog/ko/intlayer_with_next-i18next.md +85 -287
  54. package/blog/ko/intlayer_with_next-intl.md +68 -327
  55. package/blog/ko/intlayer_with_react-i18next.md +68 -290
  56. package/blog/ko/intlayer_with_react-intl.md +64 -266
  57. package/blog/pl/intlayer_with_i18next.md +126 -0
  58. package/blog/pl/intlayer_with_next-i18next.md +142 -0
  59. package/blog/pl/intlayer_with_next-intl.md +111 -0
  60. package/blog/pl/intlayer_with_react-i18next.md +124 -0
  61. package/blog/pl/intlayer_with_react-intl.md +122 -0
  62. package/blog/pt/intlayer_with_i18next.md +67 -103
  63. package/blog/pt/intlayer_with_next-i18next.md +72 -293
  64. package/blog/pt/intlayer_with_next-intl.md +57 -256
  65. package/blog/pt/intlayer_with_react-i18next.md +104 -78
  66. package/blog/pt/intlayer_with_react-intl.md +62 -266
  67. package/blog/ru/intlayer_with_i18next.md +66 -104
  68. package/blog/ru/intlayer_with_next-i18next.md +71 -296
  69. package/blog/ru/intlayer_with_next-intl.md +58 -337
  70. package/blog/ru/intlayer_with_react-i18next.md +68 -290
  71. package/blog/ru/intlayer_with_react-intl.md +62 -265
  72. package/blog/tr/intlayer_with_i18next.md +71 -107
  73. package/blog/tr/intlayer_with_next-i18next.md +72 -297
  74. package/blog/tr/intlayer_with_next-intl.md +58 -339
  75. package/blog/tr/intlayer_with_react-i18next.md +69 -291
  76. package/blog/tr/intlayer_with_react-intl.md +63 -285
  77. package/blog/vi/intlayer_with_i18next.md +126 -0
  78. package/blog/vi/intlayer_with_next-i18next.md +142 -0
  79. package/blog/vi/intlayer_with_next-intl.md +111 -0
  80. package/blog/vi/intlayer_with_react-i18next.md +124 -0
  81. package/blog/vi/intlayer_with_react-intl.md +122 -0
  82. package/blog/zh/intlayer_with_i18next.md +67 -102
  83. package/blog/zh/intlayer_with_next-i18next.md +72 -296
  84. package/blog/zh/intlayer_with_next-intl.md +58 -336
  85. package/blog/zh/intlayer_with_react-i18next.md +68 -290
  86. package/blog/zh/intlayer_with_react-intl.md +63 -106
  87. package/dist/cjs/generated/blog.entry.cjs +13 -1
  88. package/dist/cjs/generated/blog.entry.cjs.map +1 -1
  89. package/dist/cjs/generated/docs.entry.cjs +13 -1
  90. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  91. package/dist/cjs/generated/frequentQuestions.entry.cjs +13 -1
  92. package/dist/cjs/generated/frequentQuestions.entry.cjs.map +1 -1
  93. package/dist/cjs/generated/legal.entry.cjs +13 -1
  94. package/dist/cjs/generated/legal.entry.cjs.map +1 -1
  95. package/dist/esm/generated/blog.entry.mjs +13 -2
  96. package/dist/esm/generated/blog.entry.mjs.map +1 -1
  97. package/dist/esm/generated/docs.entry.mjs +13 -2
  98. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  99. package/dist/esm/generated/frequentQuestions.entry.mjs +13 -2
  100. package/dist/esm/generated/frequentQuestions.entry.mjs.map +1 -1
  101. package/dist/esm/generated/legal.entry.mjs +13 -2
  102. package/dist/esm/generated/legal.entry.mjs.map +1 -1
  103. package/dist/types/generated/blog.entry.d.ts.map +1 -1
  104. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  105. package/dist/types/generated/frequentQuestions.entry.d.ts.map +1 -1
  106. package/dist/types/generated/legal.entry.d.ts.map +1 -1
  107. package/docs/ar/plugins/sync-json.md +244 -0
  108. package/docs/de/plugins/sync-json.md +244 -0
  109. package/docs/de/releases/v7.md +1 -18
  110. package/docs/en/CI_CD.md +1 -1
  111. package/docs/en/configuration.md +1 -1
  112. package/docs/en/formatters.md +1 -1
  113. package/docs/en/how_works_intlayer.md +1 -1
  114. package/docs/en/intlayer_CMS.md +1 -1
  115. package/docs/en/intlayer_cli.md +26 -1
  116. package/docs/en/intlayer_with_nextjs_14.md +3 -1
  117. package/docs/en/intlayer_with_nextjs_15.md +3 -1
  118. package/docs/en/intlayer_with_nextjs_16.md +3 -1
  119. package/docs/en/intlayer_with_nextjs_page_router.md +1 -1
  120. package/docs/en/intlayer_with_nuxt.md +1 -1
  121. package/docs/en/intlayer_with_react_native+expo.md +1 -1
  122. package/docs/en/intlayer_with_react_router_v7.md +1 -1
  123. package/docs/en/intlayer_with_tanstack.md +1 -1
  124. package/docs/en/intlayer_with_vite+preact.md +1 -1
  125. package/docs/en/intlayer_with_vite+react.md +1 -1
  126. package/docs/en/intlayer_with_vite+solid.md +1 -1
  127. package/docs/en/intlayer_with_vite+svelte.md +1 -1
  128. package/docs/en/intlayer_with_vite+vue.md +1 -1
  129. package/docs/en/plugins/sync-json.md +1 -1
  130. package/docs/en/roadmap.md +1 -1
  131. package/docs/en-GB/plugins/sync-json.md +244 -0
  132. package/docs/es/plugins/sync-json.md +244 -0
  133. package/docs/es/releases/v7.md +1 -18
  134. package/docs/fr/intlayer_with_nextjs_16.md +2 -51
  135. package/docs/fr/plugins/sync-json.md +244 -0
  136. package/docs/fr/releases/v7.md +1 -18
  137. package/docs/hi/intlayer_with_nextjs_16.md +3 -2
  138. package/docs/hi/plugins/sync-json.md +244 -0
  139. package/docs/id/plugins/sync-json.md +244 -0
  140. package/docs/id/releases/v7.md +1 -18
  141. package/docs/it/plugins/sync-json.md +244 -0
  142. package/docs/it/releases/v7.md +1 -18
  143. package/docs/ja/intlayer_with_nextjs_16.md +44 -205
  144. package/docs/ja/plugins/sync-json.md +244 -0
  145. package/docs/ja/releases/v7.md +1 -18
  146. package/docs/ko/plugins/sync-json.md +244 -0
  147. package/docs/ko/releases/v7.md +1 -18
  148. package/docs/pl/plugins/sync-json.md +244 -0
  149. package/docs/pt/intlayer_with_nextjs_16.md +1 -52
  150. package/docs/pt/plugins/sync-json.md +244 -0
  151. package/docs/ru/plugins/sync-json.md +244 -0
  152. package/docs/tr/plugins/sync-json.md +245 -0
  153. package/docs/vi/plugins/sync-json.md +244 -0
  154. package/docs/zh/plugins/sync-json.md +244 -0
  155. package/package.json +14 -14
  156. package/src/generated/blog.entry.ts +26 -3
  157. package/src/generated/docs.entry.ts +26 -3
  158. package/src/generated/frequentQuestions.entry.ts +26 -3
  159. package/src/generated/legal.entry.ts +26 -3
@@ -0,0 +1,142 @@
1
+ ---
2
+ createdAt: 2025-08-23
3
+ updatedAt: 2025-10-29
4
+ title: Intlayer và next-i18next
5
+ description: Tích hợp Intlayer với next-i18next cho giải pháp quốc tế hóa Next.js toàn diện
6
+ keywords:
7
+ - i18next
8
+ - next-i18next
9
+ - Intlayer
10
+ - Quốc tế hóa
11
+ - Blog
12
+ - Next.js
13
+ - JavaScript
14
+ - React
15
+ slugs:
16
+ - blog
17
+ - intlayer-with-next-i18next
18
+ history:
19
+ - version: 7.0.0
20
+ date: 2025-10-29
21
+ changes: Thay đổi sang plugin syncJSON và viết lại toàn diện
22
+ ---
23
+
24
+ # Quốc tế hóa Next.js (i18n) với next-i18next và Intlayer
25
+
26
+ ## Mục lục
27
+
28
+ <TOC/>
29
+
30
+ ## next-i18next là gì?
31
+
32
+ **next-i18next** là một trong những framework quốc tế hóa (i18n) phổ biến nhất cho các ứng dụng Next.js. Được xây dựng trên nền tảng hệ sinh thái mạnh mẽ **i18next**, nó cung cấp một giải pháp toàn diện để quản lý bản dịch, địa phương hóa và chuyển đổi ngôn ngữ trong các dự án Next.js.
33
+
34
+ Tuy nhiên, next-i18next cũng gặp phải một số thách thức:
35
+
36
+ - **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.
37
+ - **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.
38
+ - **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.
39
+ - **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.
40
+
41
+ ## Intlayer là gì?
42
+
43
+ **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.
44
+
45
+ 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).
46
+
47
+ ## Tại sao kết hợp Intlayer với next-i18next?
48
+
49
+ 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:
50
+
51
+ 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.
52
+ 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ó.
53
+ 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.
54
+
55
+ **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.**
56
+
57
+ 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.
58
+
59
+ ---
60
+
61
+ ## Hướng Dẫn Từng Bước Để Thiết Lập Intlayer với next-i18next
62
+
63
+ ### Bước 1: Cài Đặt Các Phụ Thuộc
64
+
65
+ 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:
66
+
67
+ ```bash packageManager="npm"
68
+ npm install intlayer @intlayer/sync-json-plugin
69
+ ```
70
+
71
+ ```bash packageManager="pnpm"
72
+ pnpm add intlayer @intlayer/sync-json-plugin
73
+ ```
74
+
75
+ ```bash packageManager="yarn"
76
+ yarn add intlayer @intlayer/sync-json-plugin
77
+ ```
78
+
79
+ **Giải thích các gói:**
80
+
81
+ - **intlayer**: Thư viện lõi cho khai báo và quản lý nội dung
82
+ - **next-intlayer**: Lớp tích hợp Next.js với các plugin xây dựng
83
+ - **i18next**: Khung i18n lõi
84
+ - **next-i18next**: Lớp bọc Next.js cho i18next
85
+ - **i18next-resources-to-backend**: Tải tài nguyên động cho i18next
86
+ - **@intlayer/sync-json-plugin**: Plugin để đồng bộ khai báo nội dung Intlayer sang định dạng JSON của i18next
87
+
88
+ ### Bước 2: Triển khai plugin Intlayer để bao bọc JSON
89
+
90
+ Tạo một tệp cấu hình Intlayer để định nghĩa các locale được hỗ trợ của bạn:
91
+
92
+ **Nếu bạn cũng muốn xuất các từ điển JSON cho i18next**, hãy thêm plugin `syncJSON`:
93
+
94
+ ```typescript fileName="intlayer.config.ts"
95
+ import { Locales, type IntlayerConfig } from "intlayer";
96
+ import { syncJSON } from "@intlayer/sync-json-plugin";
97
+
98
+ const config: IntlayerConfig = {
99
+ internationalization: {
100
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
101
+ defaultLocale: Locals.ENGLISH,
102
+ },
103
+ plugins: [
104
+ syncJSON({
105
+ source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
106
+ }),
107
+ ],
108
+ };
109
+
110
+ export default config;
111
+ ```
112
+
113
+ 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.
114
+
115
+ 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:
116
+
117
+ 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.
118
+ 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).
119
+
120
+ 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.
121
+
122
+ Để 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).
123
+
124
+ ---
125
+
126
+ ## Cấu hình Git
127
+
128
+ Loại trừ các tệp được tạo ra khỏi kiểm soát phiên bản:
129
+
130
+ ```plaintext fileName=".gitignore"
131
+ # Bỏ qua các tệp được tạo bởi Intlayer
132
+ .intlayer
133
+ intl
134
+ ```
135
+
136
+ 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.
137
+
138
+ ### Tiện ích mở rộng VS Code
139
+
140
+ Để 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:
141
+
142
+ [Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
@@ -0,0 +1,111 @@
1
+ ---
2
+ createdAt: 2025-01-02
3
+ updatedAt: 2025-10-29
4
+ title: Cách tự động hóa bản dịch JSON next-intl của bạn bằng Intlayer
5
+ description: Tự động hóa bản dịch JSON của bạn với Intlayer và next-intl để nâng cao khả năng quốc tế hóa trong các ứng dụng Next.js.
6
+ slugs:
7
+ - blog
8
+ - intlayer-with-next-intl
9
+ history:
10
+ - version: 7.0.0
11
+ date: 2025-10-29
12
+ changes: Thay đổi sang plugin syncJSON
13
+ ---
14
+
15
+ # Cách tự động hóa bản dịch JSON next-intl của bạn bằng Intlayer
16
+
17
+ ## Intlayer là gì?
18
+
19
+ **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 Next.js.
20
+
21
+ Xem một 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).
22
+
23
+ ## Tại sao kết hợp Intlayer với next-intl?
24
+
25
+ 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:
26
+
27
+ 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.
28
+ 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ó.
29
+ 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.
30
+
31
+ **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.**
32
+
33
+ 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.
34
+
35
+ ## Mục lục
36
+
37
+ <TOC/>
38
+
39
+ ## Hướng dẫn từng bước để thiết lập Intlayer với next-intl
40
+
41
+ ### Bước 1: Cài đặt các phụ thuộc
42
+
43
+ Cài đặt các gói cần thiết:
44
+
45
+ ```bash packageManager="npm"
46
+ npm install intlayer @intlayer/sync-json-plugin
47
+ ```
48
+
49
+ ```bash packageManager="pnpm"
50
+ pnpm add intlayer @intlayer/sync-json-plugin
51
+ ```
52
+
53
+ ```bash packageManager="yarn"
54
+ yarn add intlayer @intlayer/sync-json-plugin
55
+ ```
56
+
57
+ **Mô tả các gói:**
58
+
59
+ - **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
60
+ - **@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
61
+
62
+ ### Bước 2: Triển khai plugin Intlayer để bao bọc JSON
63
+
64
+ Tạo một tệp cấu hình Intlayer để định nghĩa các locale được hỗ trợ của bạn:
65
+
66
+ **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`:
67
+
68
+ ```typescript fileName="intlayer.config.ts"
69
+ import { Locales, type IntlayerConfig } from "intlayer";
70
+ import { syncJSON } from "@intlayer/sync-json-plugin";
71
+
72
+ const config: IntlayerConfig = {
73
+ internationalization: {
74
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
75
+ defaultLocale: Locales.ENGLISH,
76
+ },
77
+ plugins: [
78
+ syncJSON({
79
+ source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
80
+ }),
81
+ ],
82
+ };
83
+
84
+ export default config;
85
+ ```
86
+
87
+ 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.
88
+
89
+ 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:
90
+
91
+ 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.
92
+ 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).
93
+
94
+ 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.
95
+
96
+ ## Cấu hình Git
97
+
98
+ Khuyến nghị bỏ qua các tệp Intlayer được tạo tự động:
99
+
100
+ ```plaintext fileName=".gitignore"
101
+ # Bỏ qua các tệp được tạo bởi Intlayer
102
+ .intlayer
103
+ ```
104
+
105
+ 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.
106
+
107
+ ### Tiện ích mở rộng VS Code
108
+
109
+ Để 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:
110
+
111
+ [Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
@@ -0,0 +1,124 @@
1
+ ---
2
+ createdAt: 2025-01-02
3
+ updatedAt: 2025-10-29
4
+ title: Cách tự động hóa bản dịch JSON react-i18next của bạn bằng Intlayer
5
+ 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.
6
+ keywords:
7
+ - react-i18next
8
+ - i18next
9
+ - Intlayer
10
+ - Quốc tế hóa
11
+ - i18n
12
+ - Blog
13
+ - React
14
+ - JavaScript
15
+ - TypeScript
16
+ - Quản lý nội dung
17
+ slugs:
18
+ - blog
19
+ - intlayer-with-react-i18next
20
+ history:
21
+ - version: 7.0.0
22
+ date: 2025-10-29
23
+ changes: Thay đổi sang plugin syncJSON
24
+ ---
25
+
26
+ # Cách tự động hóa bản dịch JSON react-i18next của bạn bằng Intlayer
27
+
28
+ ## Intlayer là gì?
29
+
30
+ **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.
31
+
32
+ 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).
33
+
34
+ ## Tại sao kết hợp Intlayer với react-i18next?
35
+
36
+ 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:
37
+
38
+ 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.
39
+ 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ó.
40
+ 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.
41
+
42
+ **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.**
43
+
44
+ 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.
45
+
46
+ ## Mục lục
47
+
48
+ <TOC/>
49
+
50
+ ## Hướng dẫn từng bước để thiết lập Intlayer với react-i18next
51
+
52
+ ### Bước 1: Cài đặt các phụ thuộc
53
+
54
+ Cài đặt các gói cần thiết:
55
+
56
+ ```bash packageManager="npm"
57
+ npm install intlayer @intlayer/sync-json-plugin
58
+ ```
59
+
60
+ ```bash packageManager="pnpm"
61
+ pnpm add intlayer @intlayer/sync-json-plugin
62
+ ```
63
+
64
+ ```bash packageManager="yarn"
65
+ yarn add intlayer @intlayer/sync-json-plugin
66
+ ```
67
+
68
+ **Mô tả các gói:**
69
+
70
+ - **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
71
+ - **@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
72
+
73
+ ### Bước 2: Triển khai plugin Intlayer để bao bọc JSON
74
+
75
+ Tạo một tệp cấu hình Intlayer để định nghĩa các ngôn ngữ bạn hỗ trợ:
76
+
77
+ **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`:
78
+
79
+ ```typescript fileName="intlayer.config.ts"
80
+ import { Locales, type IntlayerConfig } from "intlayer";
81
+ import { syncJSON } from "@intlayer/sync-json-plugin";
82
+
83
+ const config: IntlayerConfig = {
84
+ internationalization: {
85
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
86
+ defaultLocale: Locales.ENGLISH,
87
+ },
88
+ plugins: [
89
+ syncJSON({
90
+ source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
91
+ }),
92
+ ],
93
+ };
94
+
95
+ export default config;
96
+ ```
97
+
98
+ 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.
99
+
100
+ 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:
101
+
102
+ 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.
103
+ 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).
104
+
105
+ 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.
106
+
107
+ Để 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).
108
+
109
+ ## Cấu hình Git
110
+
111
+ Khuyến nghị bỏ qua các tệp Intlayer được tạo tự động:
112
+
113
+ ```plaintext fileName=".gitignore"
114
+ # Bỏ qua các tệp được tạo bởi Intlayer
115
+ .intlayer
116
+ ```
117
+
118
+ 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.
119
+
120
+ ### Tiện ích mở rộng VS Code
121
+
122
+ Để 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**:
123
+
124
+ [Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
@@ -0,0 +1,122 @@
1
+ ---
2
+ createdAt: 2025-01-02
3
+ updatedAt: 2025-10-29
4
+ title: Cách tự động hóa bản dịch JSON react-intl của bạn bằng Intlayer
5
+ 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.
6
+ keywords:
7
+ - react-intl
8
+ - Intlayer
9
+ - Quốc tế hóa
10
+ - Blog
11
+ - i18n
12
+ - JavaScript
13
+ - React
14
+ - FormatJS
15
+ slugs:
16
+ - blog
17
+ - intlayer-with-react-intl
18
+ history:
19
+ - version: 7.0.0
20
+ date: 2025-10-29
21
+ changes: Thay đổi sang plugin syncJSON
22
+ ---
23
+
24
+ # Cách tự động hóa bản dịch JSON react-intl của bạn bằng Intlayer
25
+
26
+ ## Intlayer là gì?
27
+
28
+ **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.
29
+
30
+ 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).
31
+
32
+ ## Tại sao kết hợp Intlayer với react-intl?
33
+
34
+ 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:
35
+
36
+ 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.
37
+ 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ó.
38
+ 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.
39
+
40
+ **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.**
41
+
42
+ 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.
43
+
44
+ ## Mục lục
45
+
46
+ <TOC/>
47
+
48
+ ## Hướng dẫn từng bước để thiết lập Intlayer với react-intl
49
+
50
+ ### Bước 1: Cài đặt các phụ thuộc
51
+
52
+ Cài đặt các gói cần thiết:
53
+
54
+ ```bash packageManager="npm"
55
+ npm install intlayer @intlayer/sync-json-plugin
56
+ ```
57
+
58
+ ```bash packageManager="pnpm"
59
+ pnpm add intlayer @intlayer/sync-json-plugin
60
+ ```
61
+
62
+ ```bash packageManager="yarn"
63
+ yarn add intlayer @intlayer/sync-json-plugin
64
+ ```
65
+
66
+ **Mô tả các gói:**
67
+
68
+ - **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
69
+ - **@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
70
+
71
+ ### Bước 2: Triển khai plugin Intlayer để bao bọc JSON
72
+
73
+ Tạo một tệp cấu hình Intlayer để định nghĩa các ngôn ngữ bạn hỗ trợ:
74
+
75
+ **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`:
76
+
77
+ ```typescript fileName="intlayer.config.ts"
78
+ import { Locales, type IntlayerConfig } from "intlayer";
79
+ import { syncJSON } from "@intlayer/sync-json-plugin";
80
+
81
+ const config: IntlayerConfig = {
82
+ internationalization: {
83
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
84
+ defaultLocale: Locales.ENGLISH,
85
+ },
86
+ plugins: [
87
+ syncJSON({
88
+ source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
89
+ }),
90
+ ],
91
+ };
92
+
93
+ export default config;
94
+ ```
95
+
96
+ 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.
97
+
98
+ 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:
99
+
100
+ 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.
101
+ 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).
102
+
103
+ 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.
104
+
105
+ Để 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).
106
+
107
+ ## Cấu hình Git
108
+
109
+ Khuyến nghị bỏ qua các tệp Intlayer được tạo tự động:
110
+
111
+ ```plaintext fileName=".gitignore"
112
+ # Bỏ qua các tệp do Intlayer tạo ra
113
+ .intlayer
114
+ ```
115
+
116
+ 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.
117
+
118
+ ### Tiện ích mở rộng VS Code
119
+
120
+ Để 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:
121
+
122
+ [Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)