@intlayer/docs 7.0.4-canary.0 → 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.
- package/blog/ar/intlayer_with_i18next.md +68 -106
- package/blog/ar/intlayer_with_next-i18next.md +84 -288
- package/blog/ar/intlayer_with_next-intl.md +58 -337
- package/blog/ar/intlayer_with_react-i18next.md +68 -290
- package/blog/ar/intlayer_with_react-intl.md +63 -266
- package/blog/de/intlayer_with_i18next.md +77 -97
- package/blog/de/intlayer_with_next-i18next.md +69 -296
- package/blog/de/intlayer_with_next-intl.md +59 -340
- package/blog/de/intlayer_with_react-i18next.md +68 -290
- package/blog/de/intlayer_with_react-intl.md +62 -264
- package/blog/en/intlayer_with_i18next.md +36 -1638
- package/blog/en/intlayer_with_next-i18next.md +22 -847
- package/blog/en/intlayer_with_next-intl.md +32 -1053
- package/blog/en/intlayer_with_react-i18next.md +38 -764
- package/blog/en/intlayer_with_react-intl.md +42 -1018
- package/blog/en-GB/intlayer_with_i18next.md +67 -103
- package/blog/en-GB/intlayer_with_next-i18next.md +71 -292
- package/blog/en-GB/intlayer_with_next-intl.md +58 -337
- package/blog/en-GB/intlayer_with_react-i18next.md +67 -289
- package/blog/en-GB/intlayer_with_react-intl.md +61 -264
- package/blog/es/intlayer_with_i18next.md +67 -103
- package/blog/es/intlayer_with_next-i18next.md +71 -296
- package/blog/es/intlayer_with_next-intl.md +57 -338
- package/blog/es/intlayer_with_react-i18next.md +68 -290
- package/blog/es/intlayer_with_react-intl.md +62 -265
- package/blog/fr/intlayer_with_i18next.md +66 -104
- package/blog/fr/intlayer_with_next-i18next.md +82 -285
- package/blog/fr/intlayer_with_next-intl.md +57 -338
- package/blog/fr/intlayer_with_react-i18next.md +67 -289
- package/blog/fr/intlayer_with_react-intl.md +61 -264
- package/blog/hi/intlayer_with_i18next.md +68 -104
- package/blog/hi/intlayer_with_next-i18next.md +74 -299
- package/blog/hi/intlayer_with_next-intl.md +57 -239
- package/blog/hi/intlayer_with_react-i18next.md +69 -291
- package/blog/hi/intlayer_with_react-intl.md +65 -268
- package/blog/id/intlayer_with_i18next.md +126 -0
- package/blog/id/intlayer_with_next-i18next.md +142 -0
- package/blog/id/intlayer_with_next-intl.md +113 -0
- package/blog/id/intlayer_with_react-i18next.md +124 -0
- package/blog/id/intlayer_with_react-intl.md +122 -0
- package/blog/it/intlayer_with_i18next.md +67 -103
- package/blog/it/intlayer_with_next-i18next.md +71 -296
- package/blog/it/intlayer_with_next-intl.md +57 -338
- package/blog/it/intlayer_with_react-i18next.md +68 -290
- package/blog/it/intlayer_with_react-intl.md +62 -265
- package/blog/ja/intlayer_with_i18next.md +68 -103
- package/blog/ja/intlayer_with_next-i18next.md +85 -283
- package/blog/ja/intlayer_with_next-intl.md +58 -336
- package/blog/ja/intlayer_with_react-i18next.md +68 -290
- package/blog/ja/intlayer_with_react-intl.md +62 -264
- package/blog/ko/intlayer_with_i18next.md +80 -96
- package/blog/ko/intlayer_with_next-i18next.md +85 -287
- package/blog/ko/intlayer_with_next-intl.md +68 -327
- package/blog/ko/intlayer_with_react-i18next.md +68 -290
- package/blog/ko/intlayer_with_react-intl.md +64 -266
- package/blog/pl/intlayer_with_i18next.md +126 -0
- package/blog/pl/intlayer_with_next-i18next.md +142 -0
- package/blog/pl/intlayer_with_next-intl.md +111 -0
- package/blog/pl/intlayer_with_react-i18next.md +124 -0
- package/blog/pl/intlayer_with_react-intl.md +122 -0
- package/blog/pt/intlayer_with_i18next.md +67 -103
- package/blog/pt/intlayer_with_next-i18next.md +72 -293
- package/blog/pt/intlayer_with_next-intl.md +57 -256
- package/blog/pt/intlayer_with_react-i18next.md +104 -78
- package/blog/pt/intlayer_with_react-intl.md +62 -266
- package/blog/ru/intlayer_with_i18next.md +66 -104
- package/blog/ru/intlayer_with_next-i18next.md +71 -296
- package/blog/ru/intlayer_with_next-intl.md +58 -337
- package/blog/ru/intlayer_with_react-i18next.md +68 -290
- package/blog/ru/intlayer_with_react-intl.md +62 -265
- package/blog/tr/intlayer_with_i18next.md +71 -107
- package/blog/tr/intlayer_with_next-i18next.md +72 -297
- package/blog/tr/intlayer_with_next-intl.md +58 -339
- package/blog/tr/intlayer_with_react-i18next.md +69 -291
- package/blog/tr/intlayer_with_react-intl.md +63 -285
- package/blog/vi/intlayer_with_i18next.md +126 -0
- package/blog/vi/intlayer_with_next-i18next.md +142 -0
- package/blog/vi/intlayer_with_next-intl.md +111 -0
- package/blog/vi/intlayer_with_react-i18next.md +124 -0
- package/blog/vi/intlayer_with_react-intl.md +122 -0
- package/blog/zh/intlayer_with_i18next.md +67 -102
- package/blog/zh/intlayer_with_next-i18next.md +72 -296
- package/blog/zh/intlayer_with_next-intl.md +58 -336
- package/blog/zh/intlayer_with_react-i18next.md +68 -290
- package/blog/zh/intlayer_with_react-intl.md +63 -106
- package/docs/ar/plugins/sync-json.md +244 -0
- package/docs/de/plugins/sync-json.md +244 -0
- package/docs/en/intlayer_cli.md +25 -0
- package/docs/en/intlayer_with_nextjs_14.md +2 -0
- package/docs/en/intlayer_with_nextjs_15.md +2 -0
- package/docs/en/intlayer_with_nextjs_16.md +2 -0
- package/docs/en/plugins/sync-json.md +1 -1
- package/docs/en-GB/plugins/sync-json.md +244 -0
- package/docs/es/plugins/sync-json.md +244 -0
- package/docs/fr/plugins/sync-json.md +244 -0
- package/docs/hi/plugins/sync-json.md +244 -0
- package/docs/id/plugins/sync-json.md +244 -0
- package/docs/it/plugins/sync-json.md +244 -0
- package/docs/ja/plugins/sync-json.md +244 -0
- package/docs/ko/plugins/sync-json.md +244 -0
- package/docs/pl/plugins/sync-json.md +244 -0
- package/docs/pt/plugins/sync-json.md +244 -0
- package/docs/ru/plugins/sync-json.md +244 -0
- package/docs/tr/plugins/sync-json.md +245 -0
- package/docs/vi/plugins/sync-json.md +244 -0
- package/docs/zh/plugins/sync-json.md +244 -0
- 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)
|