@intlayer/docs 7.0.4-canary.0 → 7.0.5

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 (107) 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 +36 -1638
  12. package/blog/en/intlayer_with_next-i18next.md +22 -847
  13. package/blog/en/intlayer_with_next-intl.md +32 -1053
  14. package/blog/en/intlayer_with_react-i18next.md +38 -764
  15. package/blog/en/intlayer_with_react-intl.md +42 -1018
  16. package/blog/en-GB/intlayer_with_i18next.md +67 -103
  17. package/blog/en-GB/intlayer_with_next-i18next.md +71 -292
  18. package/blog/en-GB/intlayer_with_next-intl.md +58 -337
  19. package/blog/en-GB/intlayer_with_react-i18next.md +67 -289
  20. package/blog/en-GB/intlayer_with_react-intl.md +61 -264
  21. package/blog/es/intlayer_with_i18next.md +67 -103
  22. package/blog/es/intlayer_with_next-i18next.md +71 -296
  23. package/blog/es/intlayer_with_next-intl.md +57 -338
  24. package/blog/es/intlayer_with_react-i18next.md +68 -290
  25. package/blog/es/intlayer_with_react-intl.md +62 -265
  26. package/blog/fr/intlayer_with_i18next.md +66 -104
  27. package/blog/fr/intlayer_with_next-i18next.md +82 -285
  28. package/blog/fr/intlayer_with_next-intl.md +57 -338
  29. package/blog/fr/intlayer_with_react-i18next.md +67 -289
  30. package/blog/fr/intlayer_with_react-intl.md +61 -264
  31. package/blog/hi/intlayer_with_i18next.md +68 -104
  32. package/blog/hi/intlayer_with_next-i18next.md +74 -299
  33. package/blog/hi/intlayer_with_next-intl.md +57 -239
  34. package/blog/hi/intlayer_with_react-i18next.md +69 -291
  35. package/blog/hi/intlayer_with_react-intl.md +65 -268
  36. package/blog/id/intlayer_with_i18next.md +126 -0
  37. package/blog/id/intlayer_with_next-i18next.md +142 -0
  38. package/blog/id/intlayer_with_next-intl.md +113 -0
  39. package/blog/id/intlayer_with_react-i18next.md +124 -0
  40. package/blog/id/intlayer_with_react-intl.md +122 -0
  41. package/blog/it/intlayer_with_i18next.md +67 -103
  42. package/blog/it/intlayer_with_next-i18next.md +71 -296
  43. package/blog/it/intlayer_with_next-intl.md +57 -338
  44. package/blog/it/intlayer_with_react-i18next.md +68 -290
  45. package/blog/it/intlayer_with_react-intl.md +62 -265
  46. package/blog/ja/intlayer_with_i18next.md +68 -103
  47. package/blog/ja/intlayer_with_next-i18next.md +85 -283
  48. package/blog/ja/intlayer_with_next-intl.md +58 -336
  49. package/blog/ja/intlayer_with_react-i18next.md +68 -290
  50. package/blog/ja/intlayer_with_react-intl.md +62 -264
  51. package/blog/ko/intlayer_with_i18next.md +80 -96
  52. package/blog/ko/intlayer_with_next-i18next.md +85 -287
  53. package/blog/ko/intlayer_with_next-intl.md +68 -327
  54. package/blog/ko/intlayer_with_react-i18next.md +68 -290
  55. package/blog/ko/intlayer_with_react-intl.md +64 -266
  56. package/blog/pl/intlayer_with_i18next.md +126 -0
  57. package/blog/pl/intlayer_with_next-i18next.md +142 -0
  58. package/blog/pl/intlayer_with_next-intl.md +111 -0
  59. package/blog/pl/intlayer_with_react-i18next.md +124 -0
  60. package/blog/pl/intlayer_with_react-intl.md +122 -0
  61. package/blog/pt/intlayer_with_i18next.md +67 -103
  62. package/blog/pt/intlayer_with_next-i18next.md +72 -293
  63. package/blog/pt/intlayer_with_next-intl.md +57 -256
  64. package/blog/pt/intlayer_with_react-i18next.md +104 -78
  65. package/blog/pt/intlayer_with_react-intl.md +62 -266
  66. package/blog/ru/intlayer_with_i18next.md +66 -104
  67. package/blog/ru/intlayer_with_next-i18next.md +71 -296
  68. package/blog/ru/intlayer_with_next-intl.md +58 -337
  69. package/blog/ru/intlayer_with_react-i18next.md +68 -290
  70. package/blog/ru/intlayer_with_react-intl.md +62 -265
  71. package/blog/tr/intlayer_with_i18next.md +71 -107
  72. package/blog/tr/intlayer_with_next-i18next.md +72 -297
  73. package/blog/tr/intlayer_with_next-intl.md +58 -339
  74. package/blog/tr/intlayer_with_react-i18next.md +69 -291
  75. package/blog/tr/intlayer_with_react-intl.md +63 -285
  76. package/blog/vi/intlayer_with_i18next.md +126 -0
  77. package/blog/vi/intlayer_with_next-i18next.md +142 -0
  78. package/blog/vi/intlayer_with_next-intl.md +111 -0
  79. package/blog/vi/intlayer_with_react-i18next.md +124 -0
  80. package/blog/vi/intlayer_with_react-intl.md +122 -0
  81. package/blog/zh/intlayer_with_i18next.md +67 -102
  82. package/blog/zh/intlayer_with_next-i18next.md +72 -296
  83. package/blog/zh/intlayer_with_next-intl.md +58 -336
  84. package/blog/zh/intlayer_with_react-i18next.md +68 -290
  85. package/blog/zh/intlayer_with_react-intl.md +63 -106
  86. package/docs/ar/plugins/sync-json.md +244 -0
  87. package/docs/de/plugins/sync-json.md +244 -0
  88. package/docs/en/intlayer_cli.md +25 -0
  89. package/docs/en/intlayer_with_nextjs_14.md +2 -0
  90. package/docs/en/intlayer_with_nextjs_15.md +2 -0
  91. package/docs/en/intlayer_with_nextjs_16.md +2 -0
  92. package/docs/en/plugins/sync-json.md +1 -1
  93. package/docs/en-GB/plugins/sync-json.md +244 -0
  94. package/docs/es/plugins/sync-json.md +244 -0
  95. package/docs/fr/plugins/sync-json.md +244 -0
  96. package/docs/hi/plugins/sync-json.md +244 -0
  97. package/docs/id/plugins/sync-json.md +244 -0
  98. package/docs/it/plugins/sync-json.md +244 -0
  99. package/docs/ja/plugins/sync-json.md +244 -0
  100. package/docs/ko/plugins/sync-json.md +244 -0
  101. package/docs/pl/plugins/sync-json.md +244 -0
  102. package/docs/pt/plugins/sync-json.md +244 -0
  103. package/docs/ru/plugins/sync-json.md +244 -0
  104. package/docs/tr/plugins/sync-json.md +245 -0
  105. package/docs/vi/plugins/sync-json.md +244 -0
  106. package/docs/zh/plugins/sync-json.md +244 -0
  107. package/package.json +14 -14
@@ -0,0 +1,142 @@
1
+ ---
2
+ createdAt: 2025-08-23
3
+ updatedAt: 2025-10-29
4
+ title: Intlayer dan next-i18next
5
+ description: Integrasikan Intlayer dengan next-i18next untuk solusi internasionalisasi Next.js yang komprehensif
6
+ keywords:
7
+ - i18next
8
+ - next-i18next
9
+ - Intlayer
10
+ - Internasionalisasi
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: Berubah ke plugin syncJSON dan penulisan ulang yang komprehensif
22
+ ---
23
+
24
+ # Internasionalisasi Next.js (i18n) dengan next-i18next dan Intlayer
25
+
26
+ ## Daftar Isi
27
+
28
+ <TOC/>
29
+
30
+ ## Apa itu next-i18next?
31
+
32
+ **next-i18next** adalah salah satu kerangka kerja internasionalisasi (i18n) yang paling populer untuk aplikasi Next.js. Dibangun di atas ekosistem **i18next** yang kuat, ia menyediakan solusi komprehensif untuk mengelola terjemahan, lokalisasi, dan pergantian bahasa dalam proyek Next.js.
33
+
34
+ Namun, next-i18next memiliki beberapa tantangan:
35
+
36
+ - **Konfigurasi yang kompleks**: Mengatur next-i18next memerlukan beberapa file konfigurasi dan pengaturan yang cermat untuk instance i18n di sisi server dan klien.
37
+ - **Terjemahan yang tersebar**: File terjemahan biasanya disimpan di direktori yang terpisah dari komponen, sehingga lebih sulit untuk menjaga konsistensi.
38
+ - **Manajemen namespace manual**: Pengembang perlu mengelola namespace secara manual dan memastikan pemuatan sumber daya terjemahan yang tepat.
39
+ - **Keamanan tipe terbatas**: Dukungan TypeScript memerlukan konfigurasi tambahan dan tidak menyediakan pembuatan tipe otomatis untuk terjemahan.
40
+
41
+ ## Apa itu Intlayer?
42
+
43
+ **Intlayer** adalah perpustakaan internasionalisasi sumber terbuka yang inovatif, dirancang untuk mengatasi kekurangan solusi i18n tradisional. Ini menawarkan pendekatan modern untuk manajemen konten dalam aplikasi Next.js.
44
+
45
+ Lihat perbandingan konkret dengan next-intl dalam posting blog kami [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/next-i18next_vs_next-intl_vs_intlayer.md).
46
+
47
+ ## Mengapa Menggabungkan Intlayer dengan next-i18next?
48
+
49
+ Sementara 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) kami), Anda mungkin ingin menggabungkannya dengan next-i18next untuk beberapa alasan:
50
+
51
+ 1. **Basis kode yang sudah ada**: Anda memiliki implementasi next-i18next yang sudah mapan dan ingin secara bertahap bermigrasi ke pengalaman pengembang Intlayer yang lebih baik.
52
+ 2. **Persyaratan warisan**: Proyek Anda memerlukan kompatibilitas dengan plugin atau alur kerja i18next yang sudah ada.
53
+ 3. **Kenyamanan tim**: Tim Anda sudah terbiasa dengan next-i18next tetapi menginginkan manajemen konten yang lebih baik.
54
+
55
+ **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
+
57
+ Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten Intlayer yang unggul sambil mempertahankan kompatibilitas dengan next-i18next.
58
+
59
+ ---
60
+
61
+ ## Panduan Langkah demi Langkah untuk Mengatur Intlayer dengan next-i18next
62
+
63
+ ### Langkah 1: Instalasi Dependensi
64
+
65
+ Pasang paket yang diperlukan menggunakan manajer paket pilihan Anda:
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
+ **Penjelasan paket:**
80
+
81
+ - **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
+ - **@intlayer/sync-json-plugin**: Plugin untuk menyinkronkan deklarasi konten Intlayer ke format JSON i18next
87
+
88
+ ### Langkah 2: Implementasikan plugin Intlayer untuk membungkus JSON
89
+
90
+ Buat file konfigurasi Intlayer untuk mendefinisikan locale yang didukung:
91
+
92
+ **Jika Anda juga ingin mengekspor kamus JSON untuk i18next**, tambahkan 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: Locales.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` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur konten.
114
+
115
+ Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan melanjutkan dengan cara berikut:
116
+
117
+ 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).
119
+
120
+ Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru.
121
+
122
+ 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).
123
+
124
+ ---
125
+
126
+ ## Konfigurasi Git
127
+
128
+ Kecualikan file yang dihasilkan dari kontrol versi:
129
+
130
+ ```plaintext fileName=".gitignore"
131
+ # Abaikan file yang dihasilkan oleh Intlayer
132
+ .intlayer
133
+ intl
134
+ ```
135
+
136
+ File-file ini secara otomatis dihasilkan ulang selama proses build dan tidak perlu dikomit ke repositori Anda.
137
+
138
+ ### Ekstensi VS Code
139
+
140
+ Untuk meningkatkan pengalaman pengembang, pasang **Ekstensi VS Code Intlayer** resmi:
141
+
142
+ [Pasang dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
@@ -0,0 +1,113 @@
1
+ ---
2
+ createdAt: 2025-01-02
3
+ updatedAt: 2025-10-29
4
+ title: Cara mengotomatiskan terjemahan JSON next-intl Anda menggunakan Intlayer
5
+ description: Otomatiskan terjemahan JSON Anda dengan Intlayer dan next-intl untuk peningkatan internasionalisasi dalam aplikasi 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: Berubah ke plugin syncJSON
13
+ ---
14
+
15
+ # Cara mengotomatiskan terjemahan JSON next-intl Anda menggunakan Intlayer
16
+
17
+ ## Apa itu Intlayer?
18
+
19
+ **Intlayer** adalah perpustakaan internasionalisasi sumber terbuka yang inovatif, dirancang untuk mengatasi kekurangan solusi i18n tradisional. Ini menawarkan pendekatan modern untuk manajemen konten dalam aplikasi Next.js.
20
+
21
+ Lihat perbandingan konkret dengan next-intl dalam posting blog kami [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/next-i18next_vs_next-intl_vs_intlayer.md).
22
+
23
+ ## Mengapa Menggabungkan Intlayer dengan next-intl?
24
+
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:
26
+
27
+ 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
+ 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.
30
+
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.**
32
+
33
+ Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten unggulan Intlayer sambil mempertahankan kompatibilitas dengan next-intl.
34
+
35
+ ## Daftar Isi
36
+
37
+ <TOC/>
38
+
39
+ ## Panduan Langkah demi Langkah untuk Mengatur Intlayer dengan next-intl
40
+
41
+ ### Langkah 1: Instalasi Dependensi
42
+
43
+ Instal paket-paket yang diperlukan:
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
+ **Deskripsi paket:**
58
+
59
+ - **intlayer**: Perpustakaan inti untuk manajemen internasionalisasi, deklarasi konten, dan pembangunan
60
+ - **@intlayer/sync-json-plugin**: Plugin untuk mengekspor deklarasi konten Intlayer ke format JSON yang kompatibel dengan next-intl
61
+
62
+ ### Langkah 2: Implementasikan plugin Intlayer untuk membungkus JSON
63
+
64
+ Buat file konfigurasi Intlayer untuk mendefinisikan locale yang didukung:
65
+
66
+ **Jika Anda juga ingin mengekspor kamus JSON untuk next-intl**, tambahkan 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` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur kontennya.
88
+
89
+ Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan melanjutkan dengan cara berikut:
90
+
91
+ 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).
93
+
94
+ Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru.
95
+
96
+ ## Konfigurasi Git
97
+
98
+ Disarankan untuk mengabaikan file Intlayer yang dihasilkan secara otomatis:
99
+
100
+ ```plaintext fileName=".gitignore"
101
+ # Abaikan file yang dihasilkan oleh Intlayer
102
+ .intlayer
103
+ ```
104
+
105
+ File-file ini dapat dihasilkan ulang selama proses build Anda dan tidak perlu dikomit ke kontrol versi.
106
+
107
+ ### Ekstensi VS Code
108
+
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)
112
+
113
+ [Pasang dari 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: 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.
6
+ keywords:
7
+ - react-i18next
8
+ - i18next
9
+ - Intlayer
10
+ - Internasionalisasi
11
+ - i18n
12
+ - Blog
13
+ - React
14
+ - JavaScript
15
+ - TypeScript
16
+ - Manajemen Konten
17
+ slugs:
18
+ - blog
19
+ - intlayer-with-react-i18next
20
+ history:
21
+ - version: 7.0.0
22
+ date: 2025-10-29
23
+ changes: Berubah ke plugin syncJSON
24
+ ---
25
+
26
+ # Cara mengotomatisasi terjemahan JSON react-i18next Anda menggunakan Intlayer
27
+
28
+ ## Apa itu Intlayer?
29
+
30
+ **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.
31
+
32
+ Lihat perbandingan konkret dengan react-i18next 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).
33
+
34
+ ## Mengapa Menggabungkan Intlayer dengan react-i18next?
35
+
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:
37
+
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.
39
+ 2. **Persyaratan warisan**: Proyek Anda memerlukan kompatibilitas dengan plugin atau alur kerja react-i18next yang sudah ada.
40
+ 3. **Kenyamanan tim**: Tim Anda sudah terbiasa dengan react-i18next tetapi menginginkan manajemen konten yang lebih baik.
41
+
42
+ **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
+
44
+ Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten unggulan Intlayer sambil mempertahankan kompatibilitas dengan react-i18next.
45
+
46
+ ## Daftar Isi
47
+
48
+ <TOC/>
49
+
50
+ ## Panduan Langkah demi Langkah untuk Mengatur Intlayer dengan react-i18next
51
+
52
+ ### Langkah 1: Instalasi Dependensi
53
+
54
+ Instal paket yang diperlukan:
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
+ **Deskripsi paket:**
69
+
70
+ - **intlayer**: Perpustakaan inti untuk manajemen internasionalisasi, deklarasi konten, dan pembangunan
71
+ - **@intlayer/sync-json-plugin**: Plugin untuk mengekspor deklarasi konten Intlayer ke format JSON yang kompatibel dengan react-i18next
72
+
73
+ ### Langkah 2: Implementasikan plugin Intlayer untuk membungkus JSON
74
+
75
+ Buat file konfigurasi Intlayer untuk mendefinisikan locale yang didukung:
76
+
77
+ **Jika Anda juga ingin mengekspor kamus JSON untuk react-i18next**, tambahkan 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` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur kontennya.
99
+
100
+ Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan melanjutkan dengan cara berikut:
101
+
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).
104
+
105
+ Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru.
106
+
107
+ 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
+
109
+ ## Konfigurasi Git
110
+
111
+ Disarankan untuk mengabaikan file Intlayer yang dihasilkan secara otomatis:
112
+
113
+ ```plaintext fileName=".gitignore"
114
+ # Abaikan file yang dihasilkan oleh Intlayer
115
+ .intlayer
116
+ ```
117
+
118
+ File-file ini dapat dibuat ulang selama proses build Anda dan tidak perlu dikomit ke kontrol versi.
119
+
120
+ ### Ekstensi VS Code
121
+
122
+ Untuk pengalaman pengembang yang lebih baik, pasang **Ekstensi VS Code Intlayer** resmi:
123
+
124
+ [Pasang dari 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: 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.
6
+ keywords:
7
+ - react-intl
8
+ - Intlayer
9
+ - Internasionalisasi
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: Berubah ke plugin syncJSON
22
+ ---
23
+
24
+ # Cara mengotomatisasi terjemahan JSON react-intl Anda menggunakan Intlayer
25
+
26
+ ## Apa itu Intlayer?
27
+
28
+ **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
+
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).
31
+
32
+ ## Mengapa Menggabungkan Intlayer dengan react-intl?
33
+
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:
35
+
36
+ 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
+ 2. **Persyaratan warisan**: Proyek Anda memerlukan kompatibilitas dengan plugin atau alur kerja react-intl yang sudah ada.
38
+ 3. **Kenyamanan tim**: Tim Anda sudah terbiasa dengan react-intl tetapi menginginkan manajemen konten yang lebih baik.
39
+
40
+ **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
+
42
+ Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten Intlayer yang unggul sambil mempertahankan kompatibilitas dengan react-intl.
43
+
44
+ ## Daftar Isi
45
+
46
+ <TOC/>
47
+
48
+ ## Panduan Langkah demi Langkah untuk Mengatur Intlayer dengan react-intl
49
+
50
+ ### Langkah 1: Instalasi Dependensi
51
+
52
+ Pasang paket yang diperlukan:
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
+ **Deskripsi paket:**
67
+
68
+ - **intlayer**: Perpustakaan inti untuk manajemen internasionalisasi, deklarasi konten, dan pembangunan
69
+ - **@intlayer/sync-json-plugin**: Plugin untuk mengekspor deklarasi konten Intlayer ke format JSON yang kompatibel dengan react-intl
70
+
71
+ ### Langkah 2: Implementasikan plugin Intlayer untuk membungkus JSON
72
+
73
+ Buat file konfigurasi Intlayer untuk mendefinisikan locale yang didukung:
74
+
75
+ **Jika Anda juga ingin mengekspor kamus JSON untuk react-intl**, tambahkan 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` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur konten.
97
+
98
+ Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan melanjutkan dengan cara berikut:
99
+
100
+ 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).
102
+
103
+ Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru.
104
+
105
+ 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
+
107
+ ## Konfigurasi Git
108
+
109
+ Disarankan untuk mengabaikan file Intlayer yang dihasilkan secara otomatis:
110
+
111
+ ```plaintext fileName=".gitignore"
112
+ # Abaikan file yang dihasilkan oleh Intlayer
113
+ .intlayer
114
+ ```
115
+
116
+ File-file ini dapat dihasilkan ulang selama proses build Anda dan tidak perlu dikomit ke kontrol versi.
117
+
118
+ ### Ekstensi VS Code
119
+
120
+ Untuk meningkatkan pengalaman pengembang, instal **Ekstensi VS Code Intlayer** resmi:
121
+
122
+ [Pasang dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)