@intlayer/docs 7.0.5 → 7.0.7

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 (145) hide show
  1. package/blog/ar/intlayer_with_i18next.md +72 -19
  2. package/blog/ar/intlayer_with_next-i18next.md +61 -36
  3. package/blog/ar/intlayer_with_next-intl.md +61 -13
  4. package/blog/ar/intlayer_with_react-i18next.md +67 -18
  5. package/blog/ar/intlayer_with_react-intl.md +66 -13
  6. package/blog/ar/intlayer_with_vue-i18n.md +180 -0
  7. package/blog/de/intlayer_with_i18next.md +61 -26
  8. package/blog/de/intlayer_with_next-i18next.md +66 -17
  9. package/blog/de/intlayer_with_next-intl.md +62 -13
  10. package/blog/de/intlayer_with_react-i18next.md +66 -17
  11. package/blog/de/intlayer_with_react-intl.md +66 -14
  12. package/blog/de/intlayer_with_vue-i18n.md +178 -0
  13. package/blog/en/intlayer_with_i18next.md +53 -2
  14. package/blog/en/intlayer_with_next-i18next.md +52 -16
  15. package/blog/en/intlayer_with_next-intl.md +49 -0
  16. package/blog/en/intlayer_with_react-i18next.md +50 -1
  17. package/blog/en/intlayer_with_react-intl.md +53 -0
  18. package/blog/en/intlayer_with_vue-i18n.md +178 -0
  19. package/blog/en-GB/intlayer_with_i18next.md +58 -7
  20. package/blog/en-GB/intlayer_with_next-i18next.md +55 -9
  21. package/blog/en-GB/intlayer_with_next-intl.md +55 -6
  22. package/blog/en-GB/intlayer_with_react-i18next.md +55 -6
  23. package/blog/en-GB/intlayer_with_react-intl.md +56 -3
  24. package/blog/en-GB/intlayer_with_vue-i18n.md +180 -0
  25. package/blog/es/intlayer_with_i18next.md +69 -18
  26. package/blog/es/intlayer_with_next-i18next.md +70 -24
  27. package/blog/es/intlayer_with_next-intl.md +64 -13
  28. package/blog/es/intlayer_with_react-i18next.md +61 -12
  29. package/blog/es/intlayer_with_react-intl.md +65 -12
  30. package/blog/es/intlayer_with_vue-i18n.md +178 -0
  31. package/blog/fr/intlayer_with_i18next.md +77 -16
  32. package/blog/fr/intlayer_with_next-i18next.md +55 -31
  33. package/blog/fr/intlayer_with_next-intl.md +57 -7
  34. package/blog/fr/intlayer_with_react-i18next.md +64 -7
  35. package/blog/fr/intlayer_with_react-intl.md +63 -10
  36. package/blog/fr/intlayer_with_vue-i18n.md +178 -0
  37. package/blog/hi/intlayer_with_i18next.md +67 -16
  38. package/blog/hi/intlayer_with_next-i18next.md +69 -23
  39. package/blog/hi/intlayer_with_next-intl.md +61 -8
  40. package/blog/hi/intlayer_with_react-i18next.md +63 -14
  41. package/blog/hi/intlayer_with_react-intl.md +66 -13
  42. package/blog/hi/intlayer_with_vue-i18n.md +180 -0
  43. package/blog/id/intlayer_with_i18next.md +65 -14
  44. package/blog/id/intlayer_with_next-i18next.md +58 -12
  45. package/blog/id/intlayer_with_next-intl.md +60 -11
  46. package/blog/id/intlayer_with_react-i18next.md +59 -10
  47. package/blog/id/intlayer_with_react-intl.md +66 -13
  48. package/blog/id/intlayer_with_vue-i18n.md +178 -0
  49. package/blog/it/intlayer_with_i18next.md +70 -19
  50. package/blog/it/intlayer_with_next-i18next.md +68 -22
  51. package/blog/it/intlayer_with_next-intl.md +62 -12
  52. package/blog/it/intlayer_with_react-i18next.md +65 -16
  53. package/blog/it/intlayer_with_react-intl.md +67 -14
  54. package/blog/it/intlayer_with_vue-i18n.md +178 -0
  55. package/blog/ja/intlayer_with_i18next.md +74 -24
  56. package/blog/ja/intlayer_with_next-i18next.md +60 -37
  57. package/blog/ja/intlayer_with_next-intl.md +63 -15
  58. package/blog/ja/intlayer_with_react-i18next.md +70 -21
  59. package/blog/ja/intlayer_with_react-intl.md +73 -21
  60. package/blog/ja/intlayer_with_vue-i18n.md +180 -0
  61. package/blog/ko/intlayer_with_i18next.md +60 -29
  62. package/blog/ko/intlayer_with_next-i18next.md +59 -32
  63. package/blog/ko/intlayer_with_next-intl.md +52 -23
  64. package/blog/ko/intlayer_with_react-i18next.md +65 -16
  65. package/blog/ko/intlayer_with_react-intl.md +74 -22
  66. package/blog/ko/intlayer_with_vue-i18n.md +180 -0
  67. package/blog/pl/intlayer_with_i18next.md +63 -12
  68. package/blog/pl/intlayer_with_next-i18next.md +74 -17
  69. package/blog/pl/intlayer_with_next-intl.md +59 -8
  70. package/blog/pl/intlayer_with_react-i18next.md +59 -10
  71. package/blog/pl/intlayer_with_react-intl.md +65 -12
  72. package/blog/pl/intlayer_with_vue-i18n.md +180 -0
  73. package/blog/pt/intlayer_with_i18next.md +67 -16
  74. package/blog/pt/intlayer_with_next-i18next.md +65 -19
  75. package/blog/pt/intlayer_with_next-intl.md +62 -12
  76. package/blog/pt/intlayer_with_react-i18next.md +67 -18
  77. package/blog/pt/intlayer_with_react-intl.md +62 -10
  78. package/blog/pt/intlayer_with_vue-i18n.md +178 -0
  79. package/blog/ru/intlayer_with_i18next.md +68 -15
  80. package/blog/ru/intlayer_with_next-i18next.md +71 -25
  81. package/blog/ru/intlayer_with_next-intl.md +56 -7
  82. package/blog/ru/intlayer_with_react-i18next.md +65 -16
  83. package/blog/ru/intlayer_with_react-intl.md +69 -16
  84. package/blog/ru/intlayer_with_vue-i18n.md +180 -0
  85. package/blog/tr/intlayer_with_i18next.md +67 -16
  86. package/blog/tr/intlayer_with_next-i18next.md +78 -21
  87. package/blog/tr/intlayer_with_next-intl.md +69 -18
  88. package/blog/tr/intlayer_with_react-i18next.md +65 -16
  89. package/blog/tr/intlayer_with_react-intl.md +71 -19
  90. package/blog/tr/intlayer_with_vue-i18n.md +180 -0
  91. package/blog/vi/intlayer_with_i18next.md +64 -13
  92. package/blog/vi/intlayer_with_next-i18next.md +72 -26
  93. package/blog/vi/intlayer_with_next-intl.md +62 -11
  94. package/blog/vi/intlayer_with_react-i18next.md +66 -17
  95. package/blog/vi/intlayer_with_react-intl.md +70 -17
  96. package/blog/vi/intlayer_with_vue-i18n.md +180 -0
  97. package/blog/zh/intlayer_with_i18next.md +67 -17
  98. package/blog/zh/intlayer_with_next-i18next.md +67 -22
  99. package/blog/zh/intlayer_with_next-intl.md +61 -13
  100. package/blog/zh/intlayer_with_react-i18next.md +67 -18
  101. package/blog/zh/intlayer_with_react-intl.md +69 -17
  102. package/blog/zh/intlayer_with_vue-i18n.md +180 -0
  103. package/dist/cjs/generated/blog.entry.cjs +19 -0
  104. package/dist/cjs/generated/blog.entry.cjs.map +1 -1
  105. package/dist/esm/generated/blog.entry.mjs +19 -0
  106. package/dist/esm/generated/blog.entry.mjs.map +1 -1
  107. package/dist/types/generated/blog.entry.d.ts +1 -0
  108. package/dist/types/generated/blog.entry.d.ts.map +1 -1
  109. package/docs/ar/intlayer_with_nextjs_15.md +36 -9
  110. package/docs/ar/intlayer_with_nextjs_16.md +36 -9
  111. package/docs/de/intlayer_with_nextjs_15.md +36 -9
  112. package/docs/de/intlayer_with_nextjs_16.md +24 -6
  113. package/docs/en/intlayer_with_nextjs_14.md +37 -9
  114. package/docs/en/intlayer_with_nextjs_15.md +40 -10
  115. package/docs/en/intlayer_with_nextjs_16.md +40 -10
  116. package/docs/en/plugins/sync-json.md +152 -55
  117. package/docs/en/releases/v7.md +1 -1
  118. package/docs/en-GB/intlayer_with_nextjs_15.md +36 -9
  119. package/docs/en-GB/intlayer_with_nextjs_16.md +36 -9
  120. package/docs/en-GB/releases/v7.md +1 -1
  121. package/docs/es/intlayer_with_nextjs_15.md +36 -9
  122. package/docs/es/intlayer_with_nextjs_16.md +36 -9
  123. package/docs/fr/intlayer_with_nextjs_15.md +36 -9
  124. package/docs/fr/intlayer_with_nextjs_16.md +37 -24
  125. package/docs/hi/intlayer_with_nextjs_15.md +36 -9
  126. package/docs/hi/intlayer_with_nextjs_16.md +36 -9
  127. package/docs/id/intlayer_with_nextjs_16.md +36 -9
  128. package/docs/it/intlayer_with_nextjs_15.md +36 -9
  129. package/docs/it/intlayer_with_nextjs_16.md +36 -9
  130. package/docs/ja/intlayer_with_nextjs_15.md +36 -9
  131. package/docs/ja/intlayer_with_nextjs_16.md +36 -9
  132. package/docs/ko/intlayer_with_nextjs_15.md +36 -9
  133. package/docs/ko/intlayer_with_nextjs_16.md +36 -9
  134. package/docs/pl/intlayer_with_nextjs_16.md +36 -9
  135. package/docs/pt/intlayer_with_nextjs_15.md +36 -9
  136. package/docs/pt/intlayer_with_nextjs_16.md +36 -9
  137. package/docs/ru/intlayer_with_nextjs_15.md +36 -9
  138. package/docs/ru/intlayer_with_nextjs_16.md +36 -9
  139. package/docs/tr/intlayer_with_nextjs_15.md +36 -9
  140. package/docs/tr/intlayer_with_nextjs_16.md +39 -21
  141. package/docs/vi/intlayer_with_nextjs_16.md +36 -9
  142. package/docs/zh/intlayer_with_nextjs_15.md +36 -9
  143. package/docs/zh/intlayer_with_nextjs_16.md +36 -9
  144. package/package.json +14 -14
  145. package/src/generated/blog.entry.ts +19 -0
@@ -16,9 +16,12 @@ slugs:
16
16
  - blog
17
17
  - intlayer-with-next-i18next
18
18
  history:
19
+ - version: 7.0.6
20
+ date: 2025-11-01
21
+ changes: Menambahkan plugin loadJSON
19
22
  - version: 7.0.0
20
23
  date: 2025-10-29
21
- changes: Berubah ke plugin syncJSON dan penulisan ulang yang komprehensif
24
+ changes: Berubah ke plugin syncJSON dan penulisan ulang secara menyeluruh
22
25
  ---
23
26
 
24
27
  # Internasionalisasi Next.js (i18n) dengan next-i18next dan Intlayer
@@ -33,7 +36,7 @@ history:
33
36
 
34
37
  Namun, next-i18next memiliki beberapa tantangan:
35
38
 
36
- - **Konfigurasi yang kompleks**: Mengatur next-i18next memerlukan beberapa file konfigurasi dan pengaturan yang cermat untuk instance i18n di sisi server dan klien.
39
+ - **Konfigurasi yang kompleks**: Mengatur next-i18next memerlukan beberapa file konfigurasi dan penyiapan yang cermat untuk instance i18n di sisi server dan klien.
37
40
  - **Terjemahan yang tersebar**: File terjemahan biasanya disimpan di direktori yang terpisah dari komponen, sehingga lebih sulit untuk menjaga konsistensi.
38
41
  - **Manajemen namespace manual**: Pengembang perlu mengelola namespace secara manual dan memastikan pemuatan sumber daya terjemahan yang tepat.
39
42
  - **Keamanan tipe terbatas**: Dukungan TypeScript memerlukan konfigurasi tambahan dan tidak menyediakan pembuatan tipe otomatis untuk terjemahan.
@@ -54,7 +57,7 @@ Sementara Intlayer menyediakan solusi i18n mandiri yang sangat baik (lihat [pand
54
57
 
55
58
  **Untuk itu, Intlayer dapat diimplementasikan sebagai adaptor untuk next-i18next guna membantu mengotomatisasi terjemahan JSON Anda di CLI atau pipeline CI/CD, menguji terjemahan Anda, dan lainnya.**
56
59
 
57
- Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten Intlayer yang unggul sambil mempertahankan kompatibilitas dengan next-i18next.
60
+ Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten unggulan Intlayer sambil mempertahankan kompatibilitas dengan next-i18next.
58
61
 
59
62
  ---
60
63
 
@@ -62,7 +65,7 @@ Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten Intlayer yang
62
65
 
63
66
  ### Langkah 1: Instalasi Dependensi
64
67
 
65
- Pasang paket yang diperlukan menggunakan manajer paket pilihan Anda:
68
+ Instal paket yang diperlukan menggunakan manajer paket pilihan Anda:
66
69
 
67
70
  ```bash packageManager="npm"
68
71
  npm install intlayer @intlayer/sync-json-plugin
@@ -76,13 +79,13 @@ pnpm add intlayer @intlayer/sync-json-plugin
76
79
  yarn add intlayer @intlayer/sync-json-plugin
77
80
  ```
78
81
 
82
+ ```bash packageManager="bun"
83
+ bun add intlayer @intlayer/sync-json-plugin
84
+ ```
85
+
79
86
  **Penjelasan paket:**
80
87
 
81
88
  - **intlayer**: Perpustakaan inti untuk deklarasi dan manajemen konten
82
- - **next-intlayer**: Lapisan integrasi Next.js dengan plugin build
83
- - **i18next**: Kerangka kerja inti i18n
84
- - **next-i18next**: Pembungkus Next.js untuk i18next
85
- - **i18next-resources-to-backend**: Pemuat sumber daya dinamis untuk i18next
86
89
  - **@intlayer/sync-json-plugin**: Plugin untuk menyinkronkan deklarasi konten Intlayer ke format JSON i18next
87
90
 
88
91
  ### Langkah 2: Implementasikan plugin Intlayer untuk membungkus JSON
@@ -102,7 +105,7 @@ const config: IntlayerConfig = {
102
105
  },
103
106
  plugins: [
104
107
  syncJSON({
105
- source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
108
+ source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
106
109
  }),
107
110
  ],
108
111
  };
@@ -110,12 +113,12 @@ const config: IntlayerConfig = {
110
113
  export default config;
111
114
  ```
112
115
 
113
- Plugin `syncJSON` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur konten.
116
+ Plugin `syncJSON` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur kontennya.
114
117
 
115
- Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan melanjutkan dengan cara berikut:
118
+ Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan memprosesnya dengan cara berikut:
116
119
 
117
120
  1. memuat baik file JSON maupun file deklarasi konten dan mengubahnya menjadi kamus intlayer.
118
- 2. jika terdapat konflik antara file JSON dan file deklarasi konten, Intlayer akan memproses penggabungan semua kamus tersebut. Tergantung pada prioritas plugin, dan prioritas file deklarasi konten (semua dapat dikonfigurasi).
121
+ 2. jika terdapat konflik antara file JSON dan file deklarasi konten, Intlayer akan melakukan penggabungan dari semua kamus tersebut. Hal ini tergantung pada prioritas plugin, dan prioritas file deklarasi konten (semua dapat dikonfigurasi).
119
122
 
120
123
  Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru.
121
124
 
@@ -123,6 +126,49 @@ Untuk melihat lebih detail tentang plugin `syncJSON`, silakan merujuk ke [dokume
123
126
 
124
127
  ---
125
128
 
129
+ ### (Opsional) Langkah 3: Implementasikan terjemahan JSON per-komponen
130
+
131
+ Secara default, Intlayer akan memuat, menggabungkan, dan menyinkronkan baik file JSON maupun file deklarasi konten. Lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md) untuk lebih detail. Namun jika Anda lebih suka, menggunakan plugin Intlayer, Anda juga dapat mengimplementasikan manajemen JSON per-komponen yang dilokalkan di mana saja dalam basis kode Anda.
132
+
133
+ Untuk itu, Anda dapat menggunakan plugin `loadJSON`.
134
+
135
+ ```ts fileName="intlayer.config.ts"
136
+ import { Locales, type IntlayerConfig } from "intlayer";
137
+ import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
138
+
139
+ const config: IntlayerConfig = {
140
+ internationalization: {
141
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
142
+ defaultLocale: Locales.ENGLISH,
143
+ },
144
+
145
+ // Menjaga file JSON Anda saat ini tetap sinkron dengan kamus Intlayer
146
+ plugins: [
147
+ /**
148
+ * Akan memuat semua file JSON di src yang cocok dengan pola {key}.i18n.json
149
+ */
150
+ loadJSON({
151
+ source: ({ key }) => `./src/**/${key}.i18n.json`,
152
+ locale: Locales.ENGLISH,
153
+ priority: 1, // Memastikan file JSON ini memiliki prioritas lebih tinggi dibanding file di `./public/locales/en/${key}.json`
154
+ }),
155
+ /**
156
+ * Akan memuat, dan menulis output serta terjemahan kembali ke file JSON di direktori locales
157
+ */
158
+ syncJSON({
159
+ source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
160
+ priority: 0,
161
+ }),
162
+ ],
163
+ };
164
+
165
+ export default config;
166
+ ```
167
+
168
+ Ini akan memuat semua file JSON di direktori `src` yang sesuai dengan pola `{key}.i18n.json` dan memuatnya sebagai kamus Intlayer.
169
+
170
+ ---
171
+
126
172
  ## Konfigurasi Git
127
173
 
128
174
  Kecualikan file yang dihasilkan dari kontrol versi:
@@ -1,18 +1,21 @@
1
1
  ---
2
2
  createdAt: 2025-01-02
3
3
  updatedAt: 2025-10-29
4
- title: Cara mengotomatiskan terjemahan JSON next-intl Anda menggunakan Intlayer
4
+ title: Cara mengotomatisasi terjemahan JSON next-intl Anda menggunakan Intlayer
5
5
  description: Otomatiskan terjemahan JSON Anda dengan Intlayer dan next-intl untuk peningkatan internasionalisasi dalam aplikasi Next.js.
6
6
  slugs:
7
7
  - blog
8
8
  - intlayer-with-next-intl
9
9
  history:
10
+ - version: 7.0.6
11
+ date: 2025-11-01
12
+ changes: Menambahkan plugin loadJSON
10
13
  - version: 7.0.0
11
14
  date: 2025-10-29
12
- changes: Berubah ke plugin syncJSON
15
+ changes: Mengubah ke plugin syncJSON
13
16
  ---
14
17
 
15
- # Cara mengotomatiskan terjemahan JSON next-intl Anda menggunakan Intlayer
18
+ # Cara mengotomatisasi terjemahan JSON next-intl Anda menggunakan Intlayer
16
19
 
17
20
  ## Apa itu Intlayer?
18
21
 
@@ -22,13 +25,14 @@ Lihat perbandingan konkret dengan next-intl dalam posting blog kami [next-i18nex
22
25
 
23
26
  ## Mengapa Menggabungkan Intlayer dengan next-intl?
24
27
 
25
- Meskipun Intlayer menyediakan solusi i18n mandiri yang sangat baik (lihat [panduan integrasi Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_nextjs_16.md)), Anda mungkin ingin menggabungkannya dengan next-intl karena beberapa alasan:
28
+ Meskipun Intlayer menyediakan solusi i18n mandiri yang sangat baik (lihat [panduan integrasi Next.js kami](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_nextjs_16.md)), Anda mungkin ingin menggabungkannya dengan next-intl karena beberapa alasan:
26
29
 
27
30
  1. **Basis kode yang sudah ada**: Anda memiliki implementasi next-intl yang sudah mapan dan ingin secara bertahap bermigrasi ke pengalaman pengembang Intlayer yang lebih baik.
28
31
  2. **Persyaratan warisan**: Proyek Anda memerlukan kompatibilitas dengan plugin atau alur kerja next-intl yang sudah ada.
29
- 3. **Kenyamanan Tim**: Tim Anda sudah terbiasa dengan next-intl tetapi menginginkan manajemen konten yang lebih baik.
32
+ 3. **Kenyamanan tim**: Tim Anda sudah terbiasa dengan next-intl tetapi menginginkan manajemen konten yang lebih baik.
33
+ 4. **Menggunakan fitur Intlayer**: Anda ingin menggunakan fitur Intlayer seperti deklarasi konten, otomatisasi terjemahan, pengujian terjemahan, dan lainnya.
30
34
 
31
- **Untuk itu, Intlayer dapat diimplementasikan sebagai adaptor untuk next-intl guna membantu mengotomatisasi terjemahan JSON Anda dalam CLI atau pipeline CI/CD, menguji terjemahan Anda, dan lainnya.**
35
+ **Untuk itu, Intlayer dapat diimplementasikan sebagai adapter untuk next-intl guna membantu mengotomatisasi terjemahan JSON Anda dalam CLI atau pipeline CI/CD, menguji terjemahan Anda, dan lainnya.**
32
36
 
33
37
  Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten unggulan Intlayer sambil mempertahankan kompatibilitas dengan next-intl.
34
38
 
@@ -40,7 +44,7 @@ Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten unggulan Intla
40
44
 
41
45
  ### Langkah 1: Instalasi Dependensi
42
46
 
43
- Instal paket-paket yang diperlukan:
47
+ Instal paket yang diperlukan:
44
48
 
45
49
  ```bash packageManager="npm"
46
50
  npm install intlayer @intlayer/sync-json-plugin
@@ -54,6 +58,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
54
58
  yarn add intlayer @intlayer/sync-json-plugin
55
59
  ```
56
60
 
61
+ ```bash packageManager="bun"
62
+ bun add intlayer @intlayer/sync-json-plugin
63
+ ```
64
+
57
65
  **Deskripsi paket:**
58
66
 
59
67
  - **intlayer**: Perpustakaan inti untuk manajemen internasionalisasi, deklarasi konten, dan pembangunan
@@ -89,10 +97,53 @@ Plugin `syncJSON` akan secara otomatis membungkus JSON. Plugin ini akan membaca
89
97
  Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan melanjutkan dengan cara berikut:
90
98
 
91
99
  1. memuat baik file JSON maupun file deklarasi konten dan mengubahnya menjadi kamus intlayer.
92
- 2. jika terdapat konflik antara JSON dan file deklarasi konten, Intlayer akan memproses penggabungan semua kamus tersebut. Tergantung pada prioritas plugin, dan prioritas file deklarasi konten (semua dapat dikonfigurasi).
100
+ 2. jika terdapat konflik antara file JSON dan file deklarasi konten, Intlayer akan memproses penggabungan semua kamus tersebut. Bergantung pada prioritas plugin, dan prioritas file deklarasi konten (semua dapat dikonfigurasi).
93
101
 
94
102
  Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru.
95
103
 
104
+ Untuk melihat lebih detail tentang plugin `syncJSON`, silakan merujuk ke [dokumentasi plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/plugins/sync-json.md).
105
+
106
+ ### (Opsional) Langkah 3: Implementasikan terjemahan JSON per-komponen
107
+
108
+ Secara default, Intlayer akan memuat, menggabungkan, dan menyinkronkan baik file JSON maupun file deklarasi konten. Lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md) untuk detail lebih lanjut. Namun jika Anda lebih suka, menggunakan plugin Intlayer, Anda juga dapat mengimplementasikan manajemen JSON per-komponen yang dilokalkan di mana saja dalam basis kode Anda.
109
+
110
+ Untuk itu, Anda dapat menggunakan plugin `loadJSON`.
111
+
112
+ ```ts fileName="intlayer.config.ts"
113
+ import { Locales, type IntlayerConfig } from "intlayer";
114
+ import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
115
+
116
+ const config: IntlayerConfig = {
117
+ internationalization: {
118
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
119
+ defaultLocale: Locales.ENGLISH,
120
+ },
121
+
122
+ // Menjaga file JSON Anda saat ini tetap sinkron dengan kamus Intlayer
123
+ plugins: [
124
+ /**
125
+ * Akan memuat semua file JSON di src yang cocok dengan pola {key}.i18n.json
126
+ */
127
+ loadJSON({
128
+ source: ({ key }) => `./src/**/${key}.i18n.json`,
129
+ locale: Locales.ENGLISH,
130
+ priority: 1, // Memastikan file JSON ini memiliki prioritas lebih tinggi dibandingkan file di `./locales/en/${key}.json`
131
+ }),
132
+ /**
133
+ * Akan memuat, dan menulis output serta terjemahan kembali ke file JSON di direktori locales
134
+ */
135
+ syncJSON({
136
+ source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
137
+ priority: 0,
138
+ }),
139
+ ],
140
+ };
141
+
142
+ export default config;
143
+ ```
144
+
145
+ Ini akan memuat semua file JSON di direktori `src` yang cocok dengan pola `{key}.i18n.json` dan memuatnya sebagai kamus Intlayer.
146
+
96
147
  ## Konfigurasi Git
97
148
 
98
149
  Disarankan untuk mengabaikan file Intlayer yang dihasilkan secara otomatis:
@@ -106,8 +157,6 @@ File-file ini dapat dihasilkan ulang selama proses build Anda dan tidak perlu di
106
157
 
107
158
  ### Ekstensi VS Code
108
159
 
109
- Untuk pengalaman pengembang yang lebih baik, pasang **Ekstensi Intlayer VS Code** resmi:
110
-
111
- [Pasang dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
160
+ Untuk pengalaman pengembang yang lebih baik, pasang **Ekstensi VS Code Intlayer** resmi:
112
161
 
113
162
  [Pasang dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
@@ -2,7 +2,7 @@
2
2
  createdAt: 2025-01-02
3
3
  updatedAt: 2025-10-29
4
4
  title: Cara mengotomatisasi terjemahan JSON react-i18next Anda menggunakan Intlayer
5
- description: Otomatiskan terjemahan JSON Anda dengan Intlayer dan react-i18next untuk meningkatkan internasionalisasi dalam aplikasi React.
5
+ description: Otomatiskan terjemahan JSON Anda dengan Intlayer dan react-i18next untuk peningkatan internasionalisasi dalam aplikasi React.
6
6
  keywords:
7
7
  - react-i18next
8
8
  - i18next
@@ -18,9 +18,12 @@ slugs:
18
18
  - blog
19
19
  - intlayer-with-react-i18next
20
20
  history:
21
+ - version: 7.0.6
22
+ date: 2025-11-01
23
+ changes: Menambahkan plugin loadJSON
21
24
  - version: 7.0.0
22
25
  date: 2025-10-29
23
- changes: Berubah ke plugin syncJSON
26
+ changes: Mengubah ke plugin syncJSON
24
27
  ---
25
28
 
26
29
  # Cara mengotomatisasi terjemahan JSON react-i18next Anda menggunakan Intlayer
@@ -33,11 +36,12 @@ Lihat perbandingan konkret dengan react-i18next dalam posting blog kami [react-i
33
36
 
34
37
  ## Mengapa Menggabungkan Intlayer dengan react-i18next?
35
38
 
36
- Meskipun Intlayer menyediakan solusi i18n mandiri yang sangat baik (lihat [panduan integrasi React kami](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+react.md)), Anda mungkin ingin menggabungkannya dengan react-i18next untuk beberapa alasan:
39
+ Meskipun Intlayer menyediakan solusi i18n mandiri yang sangat baik (lihat [panduan integrasi React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+react.md)), Anda mungkin ingin menggabungkannya dengan react-i18next untuk beberapa alasan:
37
40
 
38
- 1. **Basis kode yang sudah ada**: Anda memiliki implementasi react-i18next yang sudah mapan dan ingin secara bertahap bermigrasi ke pengalaman pengembang Intlayer yang lebih baik.
41
+ 1. **Basis kode yang sudah ada**: Anda memiliki implementasi react-i18next yang sudah mapan dan ingin secara bertahap bermigrasi ke pengalaman pengembang yang lebih baik dari Intlayer.
39
42
  2. **Persyaratan warisan**: Proyek Anda memerlukan kompatibilitas dengan plugin atau alur kerja react-i18next yang sudah ada.
40
43
  3. **Kenyamanan tim**: Tim Anda sudah terbiasa dengan react-i18next tetapi menginginkan manajemen konten yang lebih baik.
44
+ 4. **Menggunakan fitur Intlayer**: Anda ingin menggunakan fitur Intlayer seperti deklarasi konten, otomatisasi terjemahan, pengujian terjemahan, dan lainnya.
41
45
 
42
46
  **Untuk itu, Intlayer dapat diimplementasikan sebagai adaptor untuk react-i18next guna membantu mengotomatisasi terjemahan JSON Anda di CLI atau pipeline CI/CD, menguji terjemahan Anda, dan lainnya.**
43
47
 
@@ -51,7 +55,7 @@ Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten unggulan Intla
51
55
 
52
56
  ### Langkah 1: Instalasi Dependensi
53
57
 
54
- Instal paket yang diperlukan:
58
+ Instal paket-paket yang diperlukan:
55
59
 
56
60
  ```bash packageManager="npm"
57
61
  npm install intlayer @intlayer/sync-json-plugin
@@ -65,6 +69,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
65
69
  yarn add intlayer @intlayer/sync-json-plugin
66
70
  ```
67
71
 
72
+ ```bash packageManager="bun"
73
+ bun add intlayer @intlayer/sync-json-plugin
74
+ ```
75
+
68
76
  **Deskripsi paket:**
69
77
 
70
78
  - **intlayer**: Perpustakaan inti untuk manajemen internasionalisasi, deklarasi konten, dan pembangunan
@@ -87,7 +95,7 @@ const config: IntlayerConfig = {
87
95
  },
88
96
  plugins: [
89
97
  syncJSON({
90
- source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
98
+ source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
91
99
  }),
92
100
  ],
93
101
  };
@@ -97,15 +105,56 @@ export default config;
97
105
 
98
106
  Plugin `syncJSON` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur kontennya.
99
107
 
100
- Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan melanjutkan dengan cara berikut:
108
+ Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan memprosesnya dengan cara berikut:
101
109
 
102
- 1. memuat kedua file JSON dan file deklarasi konten lalu mengubahnya menjadi kamus intlayer.
103
- 2. jika ada konflik antara JSON dan file deklarasi konten, Intlayer akan memproses penggabungan semua kamus tersebut. Tergantung pada prioritas plugin, dan prioritas file deklarasi konten (semua dapat dikonfigurasi).
110
+ 1. memuat baik file JSON maupun file deklarasi konten dan mengubahnya menjadi kamus intlayer.
111
+ 2. jika terdapat konflik antara file JSON dan file deklarasi konten, Intlayer akan melakukan penggabungan dari semua kamus tersebut. Bergantung pada prioritas plugin, dan prioritas file deklarasi konten (semuanya dapat dikonfigurasi).
104
112
 
105
- Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru.
113
+ Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru tersebut.
106
114
 
107
115
  Untuk melihat lebih detail tentang plugin `syncJSON`, silakan merujuk ke [dokumentasi plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/plugins/sync-json.md).
108
116
 
117
+ ### (Opsional) Langkah 3: Implementasi terjemahan JSON per-komponen
118
+
119
+ Secara default, Intlayer akan memuat, menggabungkan, dan menyinkronkan baik file JSON maupun file deklarasi konten. Lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md) untuk informasi lebih lanjut. Namun jika Anda lebih memilih, menggunakan plugin Intlayer, Anda juga dapat mengimplementasikan manajemen JSON terlokalisasi per-komponen di mana saja dalam basis kode Anda.
120
+
121
+ Untuk itu, Anda dapat menggunakan plugin `loadJSON`.
122
+
123
+ ```ts fileName="intlayer.config.ts"
124
+ import { Locales, type IntlayerConfig } from "intlayer";
125
+ import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
126
+
127
+ const config: IntlayerConfig = {
128
+ internationalization: {
129
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
130
+ defaultLocale: Locales.ENGLISH,
131
+ },
132
+
133
+ // Menjaga file JSON Anda saat ini tetap sinkron dengan kamus Intlayer
134
+ plugins: [
135
+ /**
136
+ * Akan memuat semua file JSON di src yang cocok dengan pola {key}.i18n.json
137
+ */
138
+ loadJSON({
139
+ source: ({ key }) => `./src/**/${key}.i18n.json`,
140
+ locale: Locales.ENGLISH,
141
+ priority: 1, // Memastikan file JSON ini memiliki prioritas lebih tinggi daripada file di `./locales/en/${key}.json`
142
+ }),
143
+ /**
144
+ * Akan memuat, dan menulis output serta terjemahan kembali ke file JSON di direktori locales
145
+ */
146
+ syncJSON({
147
+ source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
148
+ priority: 0,
149
+ }),
150
+ ],
151
+ };
152
+
153
+ export default config;
154
+ ```
155
+
156
+ Ini akan memuat semua file JSON di direktori `src` yang cocok dengan pola `{key}.i18n.json` dan memuatnya sebagai kamus Intlayer.
157
+
109
158
  ## Konfigurasi Git
110
159
 
111
160
  Disarankan untuk mengabaikan file Intlayer yang dihasilkan secara otomatis:
@@ -2,7 +2,7 @@
2
2
  createdAt: 2025-01-02
3
3
  updatedAt: 2025-10-29
4
4
  title: Cara mengotomatisasi terjemahan JSON react-intl Anda menggunakan Intlayer
5
- description: Otomatiskan terjemahan JSON Anda dengan Intlayer dan react-intl untuk meningkatkan internasionalisasi dalam aplikasi React.
5
+ description: Otomatiskan terjemahan JSON Anda dengan Intlayer dan react-intl untuk peningkatan internasionalisasi dalam aplikasi React.
6
6
  keywords:
7
7
  - react-intl
8
8
  - Intlayer
@@ -16,30 +16,38 @@ slugs:
16
16
  - blog
17
17
  - intlayer-with-react-intl
18
18
  history:
19
+ - version: 7.0.6
20
+ date: 2025-11-01
21
+ changes: Menambahkan plugin loadJSON
19
22
  - version: 7.0.0
20
23
  date: 2025-10-29
21
- changes: Berubah ke plugin syncJSON
24
+ changes: Mengubah ke plugin syncJSON
22
25
  ---
23
26
 
24
27
  # Cara mengotomatisasi terjemahan JSON react-intl Anda menggunakan Intlayer
25
28
 
29
+ ## Daftar Isi
30
+
31
+ <TOC/>
32
+
26
33
  ## Apa itu Intlayer?
27
34
 
28
35
  **Intlayer** adalah perpustakaan internasionalisasi sumber terbuka yang inovatif, dirancang untuk mengatasi kekurangan solusi i18n tradisional. Ini menawarkan pendekatan modern untuk manajemen konten dalam aplikasi React.
29
36
 
30
- Lihat perbandingan konkret dengan react-intl di posting blog kami [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).
37
+ Lihat perbandingan konkret dengan react-intl dalam posting blog kami [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/react-i18next_vs_react-intl_vs_intlayer.md).
31
38
 
32
39
  ## Mengapa Menggabungkan Intlayer dengan react-intl?
33
40
 
34
- Meskipun Intlayer menyediakan solusi i18n mandiri yang sangat baik (lihat [panduan integrasi React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react.md)), Anda mungkin ingin menggabungkannya dengan react-intl untuk beberapa alasan:
41
+ Meskipun Intlayer menyediakan solusi i18n mandiri yang sangat baik (lihat [panduan integrasi React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+react.md)), Anda mungkin ingin menggabungkannya dengan react-intl karena beberapa alasan:
35
42
 
36
43
  1. **Basis kode yang sudah ada**: Anda memiliki implementasi react-intl yang sudah mapan dan ingin secara bertahap bermigrasi ke pengalaman pengembang Intlayer yang lebih baik.
37
44
  2. **Persyaratan warisan**: Proyek Anda memerlukan kompatibilitas dengan plugin atau alur kerja react-intl yang sudah ada.
38
45
  3. **Kenyamanan tim**: Tim Anda sudah terbiasa dengan react-intl tetapi menginginkan manajemen konten yang lebih baik.
46
+ 4. **Menggunakan fitur Intlayer**: Anda ingin menggunakan fitur Intlayer seperti deklarasi konten, otomatisasi terjemahan, pengujian terjemahan, dan lainnya.
39
47
 
40
48
  **Untuk itu, Intlayer dapat diimplementasikan sebagai adaptor untuk react-intl guna membantu mengotomatisasi terjemahan JSON Anda di CLI atau pipeline CI/CD, menguji terjemahan Anda, dan lainnya.**
41
49
 
42
- Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten Intlayer yang unggul sambil mempertahankan kompatibilitas dengan react-intl.
50
+ Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten unggulan Intlayer sambil mempertahankan kompatibilitas dengan react-intl.
43
51
 
44
52
  ## Daftar Isi
45
53
 
@@ -49,7 +57,7 @@ Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten Intlayer yang
49
57
 
50
58
  ### Langkah 1: Instalasi Dependensi
51
59
 
52
- Pasang paket yang diperlukan:
60
+ Instal paket yang diperlukan:
53
61
 
54
62
  ```bash packageManager="npm"
55
63
  npm install intlayer @intlayer/sync-json-plugin
@@ -63,12 +71,16 @@ pnpm add intlayer @intlayer/sync-json-plugin
63
71
  yarn add intlayer @intlayer/sync-json-plugin
64
72
  ```
65
73
 
74
+ ```bash packageManager="bun"
75
+ bun add intlayer @intlayer/sync-json-plugin
76
+ ```
77
+
66
78
  **Deskripsi paket:**
67
79
 
68
80
  - **intlayer**: Perpustakaan inti untuk manajemen internasionalisasi, deklarasi konten, dan pembangunan
69
81
  - **@intlayer/sync-json-plugin**: Plugin untuk mengekspor deklarasi konten Intlayer ke format JSON yang kompatibel dengan react-intl
70
82
 
71
- ### Langkah 2: Implementasikan plugin Intlayer untuk membungkus JSON
83
+ ### Langkah 2: Terapkan plugin Intlayer untuk membungkus JSON
72
84
 
73
85
  Buat file konfigurasi Intlayer untuk mendefinisikan locale yang didukung:
74
86
 
@@ -93,17 +105,58 @@ const config: IntlayerConfig = {
93
105
  export default config;
94
106
  ```
95
107
 
96
- Plugin `syncJSON` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur konten.
108
+ Plugin `syncJSON` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur kontennya.
97
109
 
98
- Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan melanjutkan dengan cara berikut:
110
+ Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan memprosesnya dengan cara berikut:
99
111
 
100
112
  1. memuat baik file JSON maupun file deklarasi konten dan mengubahnya menjadi kamus intlayer.
101
- 2. jika terdapat konflik antara file JSON dan file deklarasi konten, Intlayer akan memproses penggabungan semua kamus tersebut. Tergantung pada prioritas plugin, dan prioritas file deklarasi konten (semua dapat dikonfigurasi).
113
+ 2. jika terdapat konflik antara file JSON dan file deklarasi konten, Intlayer akan melakukan penggabungan semua kamus tersebut. Ini tergantung pada prioritas plugin, dan prioritas file deklarasi konten (semua dapat dikonfigurasi).
102
114
 
103
- Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru.
115
+ Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru tersebut.
104
116
 
105
117
  Untuk melihat lebih detail tentang plugin `syncJSON`, silakan merujuk ke [dokumentasi plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/plugins/sync-json.md).
106
118
 
119
+ ### (Opsional) Langkah 3: Implementasikan terjemahan JSON per-komponen
120
+
121
+ Secara default, Intlayer akan memuat, menggabungkan, dan menyinkronkan baik file JSON maupun file deklarasi konten. Lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md) untuk informasi lebih lanjut. Namun jika Anda lebih memilih, menggunakan plugin Intlayer, Anda juga dapat mengimplementasikan manajemen JSON terlokalisasi per-komponen di mana saja dalam basis kode Anda.
122
+
123
+ Untuk itu, Anda dapat menggunakan plugin `loadJSON`.
124
+
125
+ ```ts fileName="intlayer.config.ts"
126
+ import { Locales, type IntlayerConfig } from "intlayer";
127
+ import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
128
+
129
+ const config: IntlayerConfig = {
130
+ internationalization: {
131
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
132
+ defaultLocale: Locales.ENGLISH,
133
+ },
134
+
135
+ // Menjaga file JSON Anda saat ini tetap sinkron dengan kamus Intlayer
136
+ plugins: [
137
+ /**
138
+ * Akan memuat semua file JSON di src yang cocok dengan pola {key}.i18n.json
139
+ */
140
+ loadJSON({
141
+ source: ({ key }) => `./src/**/${key}.i18n.json`,
142
+ locale: Locales.ENGLISH,
143
+ priority: 1, // Memastikan file JSON ini memiliki prioritas lebih tinggi daripada file di `./locales/en/${key}.json`
144
+ }),
145
+ /**
146
+ * Akan memuat, dan menulis output serta terjemahan kembali ke file JSON di direktori locales
147
+ */
148
+ syncJSON({
149
+ source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
150
+ priority: 0,
151
+ }),
152
+ ],
153
+ };
154
+
155
+ export default config;
156
+ ```
157
+
158
+ Ini akan memuat semua file JSON di direktori `src` yang cocok dengan pola `{key}.i18n.json` dan memuatnya sebagai kamus Intlayer.
159
+
107
160
  ## Konfigurasi Git
108
161
 
109
162
  Disarankan untuk mengabaikan file Intlayer yang dihasilkan secara otomatis:
@@ -113,10 +166,10 @@ Disarankan untuk mengabaikan file Intlayer yang dihasilkan secara otomatis:
113
166
  .intlayer
114
167
  ```
115
168
 
116
- File-file ini dapat dihasilkan ulang selama proses build Anda dan tidak perlu dikomit ke kontrol versi.
169
+ File-file ini dapat dibuat ulang selama proses build Anda dan tidak perlu dikomit ke kontrol versi.
117
170
 
118
171
  ### Ekstensi VS Code
119
172
 
120
- Untuk meningkatkan pengalaman pengembang, instal **Ekstensi VS Code Intlayer** resmi:
173
+ Untuk pengalaman pengembang yang lebih baik, pasang **Ekstensi VS Code Intlayer** resmi:
121
174
 
122
175
  [Pasang dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)