@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.
- package/blog/ar/intlayer_with_i18next.md +72 -19
- package/blog/ar/intlayer_with_next-i18next.md +61 -36
- package/blog/ar/intlayer_with_next-intl.md +61 -13
- package/blog/ar/intlayer_with_react-i18next.md +67 -18
- package/blog/ar/intlayer_with_react-intl.md +66 -13
- package/blog/ar/intlayer_with_vue-i18n.md +180 -0
- package/blog/de/intlayer_with_i18next.md +61 -26
- package/blog/de/intlayer_with_next-i18next.md +66 -17
- package/blog/de/intlayer_with_next-intl.md +62 -13
- package/blog/de/intlayer_with_react-i18next.md +66 -17
- package/blog/de/intlayer_with_react-intl.md +66 -14
- package/blog/de/intlayer_with_vue-i18n.md +178 -0
- package/blog/en/intlayer_with_i18next.md +53 -2
- package/blog/en/intlayer_with_next-i18next.md +52 -16
- package/blog/en/intlayer_with_next-intl.md +49 -0
- package/blog/en/intlayer_with_react-i18next.md +50 -1
- package/blog/en/intlayer_with_react-intl.md +53 -0
- package/blog/en/intlayer_with_vue-i18n.md +178 -0
- package/blog/en-GB/intlayer_with_i18next.md +58 -7
- package/blog/en-GB/intlayer_with_next-i18next.md +55 -9
- package/blog/en-GB/intlayer_with_next-intl.md +55 -6
- package/blog/en-GB/intlayer_with_react-i18next.md +55 -6
- package/blog/en-GB/intlayer_with_react-intl.md +56 -3
- package/blog/en-GB/intlayer_with_vue-i18n.md +180 -0
- package/blog/es/intlayer_with_i18next.md +69 -18
- package/blog/es/intlayer_with_next-i18next.md +70 -24
- package/blog/es/intlayer_with_next-intl.md +64 -13
- package/blog/es/intlayer_with_react-i18next.md +61 -12
- package/blog/es/intlayer_with_react-intl.md +65 -12
- package/blog/es/intlayer_with_vue-i18n.md +178 -0
- package/blog/fr/intlayer_with_i18next.md +77 -16
- package/blog/fr/intlayer_with_next-i18next.md +55 -31
- package/blog/fr/intlayer_with_next-intl.md +57 -7
- package/blog/fr/intlayer_with_react-i18next.md +64 -7
- package/blog/fr/intlayer_with_react-intl.md +63 -10
- package/blog/fr/intlayer_with_vue-i18n.md +178 -0
- package/blog/hi/intlayer_with_i18next.md +67 -16
- package/blog/hi/intlayer_with_next-i18next.md +69 -23
- package/blog/hi/intlayer_with_next-intl.md +61 -8
- package/blog/hi/intlayer_with_react-i18next.md +63 -14
- package/blog/hi/intlayer_with_react-intl.md +66 -13
- package/blog/hi/intlayer_with_vue-i18n.md +180 -0
- package/blog/id/intlayer_with_i18next.md +65 -14
- package/blog/id/intlayer_with_next-i18next.md +58 -12
- package/blog/id/intlayer_with_next-intl.md +60 -11
- package/blog/id/intlayer_with_react-i18next.md +59 -10
- package/blog/id/intlayer_with_react-intl.md +66 -13
- package/blog/id/intlayer_with_vue-i18n.md +178 -0
- package/blog/it/intlayer_with_i18next.md +70 -19
- package/blog/it/intlayer_with_next-i18next.md +68 -22
- package/blog/it/intlayer_with_next-intl.md +62 -12
- package/blog/it/intlayer_with_react-i18next.md +65 -16
- package/blog/it/intlayer_with_react-intl.md +67 -14
- package/blog/it/intlayer_with_vue-i18n.md +178 -0
- package/blog/ja/intlayer_with_i18next.md +74 -24
- package/blog/ja/intlayer_with_next-i18next.md +60 -37
- package/blog/ja/intlayer_with_next-intl.md +63 -15
- package/blog/ja/intlayer_with_react-i18next.md +70 -21
- package/blog/ja/intlayer_with_react-intl.md +73 -21
- package/blog/ja/intlayer_with_vue-i18n.md +180 -0
- package/blog/ko/intlayer_with_i18next.md +60 -29
- package/blog/ko/intlayer_with_next-i18next.md +59 -32
- package/blog/ko/intlayer_with_next-intl.md +52 -23
- package/blog/ko/intlayer_with_react-i18next.md +65 -16
- package/blog/ko/intlayer_with_react-intl.md +74 -22
- package/blog/ko/intlayer_with_vue-i18n.md +180 -0
- package/blog/pl/intlayer_with_i18next.md +63 -12
- package/blog/pl/intlayer_with_next-i18next.md +74 -17
- package/blog/pl/intlayer_with_next-intl.md +59 -8
- package/blog/pl/intlayer_with_react-i18next.md +59 -10
- package/blog/pl/intlayer_with_react-intl.md +65 -12
- package/blog/pl/intlayer_with_vue-i18n.md +180 -0
- package/blog/pt/intlayer_with_i18next.md +67 -16
- package/blog/pt/intlayer_with_next-i18next.md +65 -19
- package/blog/pt/intlayer_with_next-intl.md +62 -12
- package/blog/pt/intlayer_with_react-i18next.md +67 -18
- package/blog/pt/intlayer_with_react-intl.md +62 -10
- package/blog/pt/intlayer_with_vue-i18n.md +178 -0
- package/blog/ru/intlayer_with_i18next.md +68 -15
- package/blog/ru/intlayer_with_next-i18next.md +71 -25
- package/blog/ru/intlayer_with_next-intl.md +56 -7
- package/blog/ru/intlayer_with_react-i18next.md +65 -16
- package/blog/ru/intlayer_with_react-intl.md +69 -16
- package/blog/ru/intlayer_with_vue-i18n.md +180 -0
- package/blog/tr/intlayer_with_i18next.md +67 -16
- package/blog/tr/intlayer_with_next-i18next.md +78 -21
- package/blog/tr/intlayer_with_next-intl.md +69 -18
- package/blog/tr/intlayer_with_react-i18next.md +65 -16
- package/blog/tr/intlayer_with_react-intl.md +71 -19
- package/blog/tr/intlayer_with_vue-i18n.md +180 -0
- package/blog/vi/intlayer_with_i18next.md +64 -13
- package/blog/vi/intlayer_with_next-i18next.md +72 -26
- package/blog/vi/intlayer_with_next-intl.md +62 -11
- package/blog/vi/intlayer_with_react-i18next.md +66 -17
- package/blog/vi/intlayer_with_react-intl.md +70 -17
- package/blog/vi/intlayer_with_vue-i18n.md +180 -0
- package/blog/zh/intlayer_with_i18next.md +67 -17
- package/blog/zh/intlayer_with_next-i18next.md +67 -22
- package/blog/zh/intlayer_with_next-intl.md +61 -13
- package/blog/zh/intlayer_with_react-i18next.md +67 -18
- package/blog/zh/intlayer_with_react-intl.md +69 -17
- package/blog/zh/intlayer_with_vue-i18n.md +180 -0
- package/dist/cjs/generated/blog.entry.cjs +19 -0
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +19 -0
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/types/generated/blog.entry.d.ts +1 -0
- package/dist/types/generated/blog.entry.d.ts.map +1 -1
- package/docs/ar/intlayer_with_nextjs_15.md +36 -9
- package/docs/ar/intlayer_with_nextjs_16.md +36 -9
- package/docs/de/intlayer_with_nextjs_15.md +36 -9
- package/docs/de/intlayer_with_nextjs_16.md +24 -6
- package/docs/en/intlayer_with_nextjs_14.md +37 -9
- package/docs/en/intlayer_with_nextjs_15.md +40 -10
- package/docs/en/intlayer_with_nextjs_16.md +40 -10
- package/docs/en/plugins/sync-json.md +152 -55
- package/docs/en/releases/v7.md +1 -1
- package/docs/en-GB/intlayer_with_nextjs_15.md +36 -9
- package/docs/en-GB/intlayer_with_nextjs_16.md +36 -9
- package/docs/en-GB/releases/v7.md +1 -1
- package/docs/es/intlayer_with_nextjs_15.md +36 -9
- package/docs/es/intlayer_with_nextjs_16.md +36 -9
- package/docs/fr/intlayer_with_nextjs_15.md +36 -9
- package/docs/fr/intlayer_with_nextjs_16.md +37 -24
- package/docs/hi/intlayer_with_nextjs_15.md +36 -9
- package/docs/hi/intlayer_with_nextjs_16.md +36 -9
- package/docs/id/intlayer_with_nextjs_16.md +36 -9
- package/docs/it/intlayer_with_nextjs_15.md +36 -9
- package/docs/it/intlayer_with_nextjs_16.md +36 -9
- package/docs/ja/intlayer_with_nextjs_15.md +36 -9
- package/docs/ja/intlayer_with_nextjs_16.md +36 -9
- package/docs/ko/intlayer_with_nextjs_15.md +36 -9
- package/docs/ko/intlayer_with_nextjs_16.md +36 -9
- package/docs/pl/intlayer_with_nextjs_16.md +36 -9
- package/docs/pt/intlayer_with_nextjs_15.md +36 -9
- package/docs/pt/intlayer_with_nextjs_16.md +36 -9
- package/docs/ru/intlayer_with_nextjs_15.md +36 -9
- package/docs/ru/intlayer_with_nextjs_16.md +36 -9
- package/docs/tr/intlayer_with_nextjs_15.md +36 -9
- package/docs/tr/intlayer_with_nextjs_16.md +39 -21
- package/docs/vi/intlayer_with_nextjs_16.md +36 -9
- package/docs/zh/intlayer_with_nextjs_15.md +36 -9
- package/docs/zh/intlayer_with_nextjs_16.md +36 -9
- package/package.json +14 -14
- package/src/generated/blog.entry.ts +19 -0
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-08-23
|
|
3
|
+
updatedAt: 2025-10-29
|
|
4
|
+
title: Intlayer dan vue-i18n
|
|
5
|
+
description: Integrasikan Intlayer dengan vue-i18n untuk solusi internasionalisasi Vue.js yang komprehensif
|
|
6
|
+
keywords:
|
|
7
|
+
- vue-i18n
|
|
8
|
+
- Intlayer
|
|
9
|
+
- Internasionalisasi
|
|
10
|
+
- Blog
|
|
11
|
+
- Vue.js
|
|
12
|
+
- Nuxt
|
|
13
|
+
- JavaScript
|
|
14
|
+
- Vue
|
|
15
|
+
slugs:
|
|
16
|
+
- blog
|
|
17
|
+
- intlayer-with-vue-i18n
|
|
18
|
+
history:
|
|
19
|
+
- version: 7.0.6
|
|
20
|
+
date: 2025-11-01
|
|
21
|
+
changes: Menambahkan plugin loadJSON
|
|
22
|
+
- version: 7.0.0
|
|
23
|
+
date: 2025-10-29
|
|
24
|
+
changes: Berubah ke plugin syncJSON dan penulisan ulang secara menyeluruh
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
# Internasionalisasi Vue.js (i18n) dengan vue-i18n dan Intlayer
|
|
28
|
+
|
|
29
|
+
## Daftar Isi
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
33
|
+
## Apa itu Intlayer?
|
|
34
|
+
|
|
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 Vue.js dan Nuxt.
|
|
36
|
+
|
|
37
|
+
Lihat perbandingan konkret dengan vue-i18n dalam posting blog kami [vue-i18n vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/vue-i18n_vs_intlayer.md).
|
|
38
|
+
|
|
39
|
+
## Mengapa Menggabungkan Intlayer dengan vue-i18n?
|
|
40
|
+
|
|
41
|
+
Meskipun Intlayer menyediakan solusi i18n mandiri yang sangat baik (lihat [panduan integrasi Vue.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+vue.md)), Anda mungkin ingin menggabungkannya dengan vue-i18n untuk beberapa alasan:
|
|
42
|
+
|
|
43
|
+
1. **Basis kode yang ada**: Anda memiliki implementasi vue-i18n yang sudah mapan dan ingin secara bertahap bermigrasi ke pengalaman pengembang yang lebih baik dari Intlayer.
|
|
44
|
+
2. **Persyaratan warisan**: Proyek Anda memerlukan kompatibilitas dengan plugin atau alur kerja vue-i18n yang sudah ada.
|
|
45
|
+
3. **Kenyamanan tim**: Tim Anda sudah terbiasa dengan vue-i18n 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.
|
|
47
|
+
|
|
48
|
+
**Untuk itu, Intlayer dapat diimplementasikan sebagai adaptor untuk vue-i18n guna membantu mengotomatisasi terjemahan JSON Anda di CLI atau pipeline CI/CD, menguji terjemahan Anda, dan lainnya.**
|
|
49
|
+
|
|
50
|
+
Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten unggulan Intlayer sambil mempertahankan kompatibilitas dengan vue-i18n.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## Panduan Langkah demi Langkah untuk Mengatur Intlayer dengan vue-i18n
|
|
55
|
+
|
|
56
|
+
### Langkah 1: Instalasi Dependensi
|
|
57
|
+
|
|
58
|
+
Instal paket yang diperlukan menggunakan manajer paket pilihan Anda:
|
|
59
|
+
|
|
60
|
+
```bash packageManager="npm"
|
|
61
|
+
npm install intlayer @intlayer/sync-json-plugin
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
```bash packageManager="pnpm"
|
|
65
|
+
pnpm add intlayer @intlayer/sync-json-plugin
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
```bash packageManager="yarn"
|
|
69
|
+
yarn add intlayer @intlayer/sync-json-plugin
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
```bash packageManager="bun"
|
|
73
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
**Penjelasan paket:**
|
|
77
|
+
|
|
78
|
+
- **intlayer**: Perpustakaan inti untuk deklarasi dan manajemen konten
|
|
79
|
+
- **@intlayer/sync-json-plugin**: Plugin untuk menyinkronkan deklarasi konten Intlayer ke format JSON vue-i18n
|
|
80
|
+
|
|
81
|
+
### Langkah 2: Terapkan plugin Intlayer untuk membungkus JSON
|
|
82
|
+
|
|
83
|
+
Buat file konfigurasi Intlayer untuk mendefinisikan locale yang didukung:
|
|
84
|
+
|
|
85
|
+
**Jika Anda juga ingin mengekspor kamus JSON untuk vue-i18n**, tambahkan plugin `syncJSON`:
|
|
86
|
+
|
|
87
|
+
```typescript fileName="intlayer.config.ts"
|
|
88
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
89
|
+
import { syncJSON } from "@intlayer/sync-json-plugin";
|
|
90
|
+
|
|
91
|
+
const config: IntlayerConfig = {
|
|
92
|
+
internationalization: {
|
|
93
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
94
|
+
defaultLocale: Locales.ENGLISH,
|
|
95
|
+
},
|
|
96
|
+
plugins: [
|
|
97
|
+
syncJSON({
|
|
98
|
+
source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
|
|
99
|
+
}),
|
|
100
|
+
],
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export default config;
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
Plugin `syncJSON` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur kontennya.
|
|
107
|
+
|
|
108
|
+
Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan memprosesnya dengan cara berikut:
|
|
109
|
+
|
|
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 (semua dapat dikonfigurasi).
|
|
112
|
+
|
|
113
|
+
Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru.
|
|
114
|
+
|
|
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).
|
|
116
|
+
|
|
117
|
+
---
|
|
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 detail lebih lanjut. Namun jika Anda lebih memilih, dengan menggunakan plugin Intlayer, Anda juga dapat mengimplementasikan manajemen JSON per-komponen yang dilokalkan 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
|
+
// Jaga agar 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 dibanding 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 }) => `./src/locales/${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
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Konfigurasi Git
|
|
163
|
+
|
|
164
|
+
Kecualikan file yang dihasilkan dari kontrol versi:
|
|
165
|
+
|
|
166
|
+
```plaintext fileName=".gitignore"
|
|
167
|
+
# Abaikan file yang dihasilkan oleh Intlayer
|
|
168
|
+
.intlayer
|
|
169
|
+
intl
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
File-file ini secara otomatis dibuat ulang selama proses build dan tidak perlu dikomit ke repositori Anda.
|
|
173
|
+
|
|
174
|
+
### Ekstensi VS Code
|
|
175
|
+
|
|
176
|
+
Untuk pengalaman pengembang yang lebih baik, pasang **Ekstensi VS Code Intlayer** resmi:
|
|
177
|
+
|
|
178
|
+
[Pasang dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2024-12-24
|
|
3
|
-
updatedAt: 2025-
|
|
4
|
-
title: Come automatizzare le
|
|
3
|
+
updatedAt: 2025-11-01
|
|
4
|
+
title: Come automatizzare le traduzioni JSON di i18next usando Intlayer
|
|
5
5
|
description: Automatizza le tue traduzioni JSON con Intlayer e i18next per una migliore internazionalizzazione nelle applicazioni JavaScript.
|
|
6
6
|
keywords:
|
|
7
7
|
- Intlayer
|
|
@@ -20,12 +20,15 @@ slugs:
|
|
|
20
20
|
- blog
|
|
21
21
|
- intlayer-with-i18next
|
|
22
22
|
history:
|
|
23
|
+
- version: 7.0.6
|
|
24
|
+
date: 2025-11-01
|
|
25
|
+
changes: Aggiunto plugin loadJSON
|
|
23
26
|
- version: 7.0.0
|
|
24
27
|
date: 2025-10-29
|
|
25
|
-
changes:
|
|
28
|
+
changes: Cambiato in plugin syncJSON
|
|
26
29
|
---
|
|
27
30
|
|
|
28
|
-
# Come automatizzare le
|
|
31
|
+
# Come automatizzare le traduzioni JSON di i18next usando Intlayer
|
|
29
32
|
|
|
30
33
|
## Cos'è Intlayer?
|
|
31
34
|
|
|
@@ -37,11 +40,12 @@ Consulta un confronto concreto con i18next nel nostro post sul blog [next-i18nex
|
|
|
37
40
|
|
|
38
41
|
Sebbene Intlayer offra una soluzione i18n autonoma eccellente (vedi la nostra [guida all'integrazione con Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_nextjs_16.md)), potresti volerlo combinare con i18next per diversi motivi:
|
|
39
42
|
|
|
40
|
-
1. **Codice esistente**: Hai un'implementazione consolidata
|
|
41
|
-
2. **Requisiti legacy**: Il tuo progetto richiede compatibilità con plugin o flussi di lavoro i18next esistenti.
|
|
43
|
+
1. **Codice esistente**: Hai un'implementazione i18next consolidata e desideri migrare gradualmente alla migliore esperienza sviluppatore offerta da Intlayer.
|
|
44
|
+
2. **Requisiti legacy**: Il tuo progetto richiede la compatibilità con plugin o flussi di lavoro i18next esistenti.
|
|
42
45
|
3. **Familiarità del team**: Il tuo team è abituato a i18next ma desidera una migliore gestione dei contenuti.
|
|
46
|
+
4. **Utilizzo delle funzionalità di Intlayer**: Vuoi utilizzare funzionalità di Intlayer come la dichiarazione dei contenuti, la gestione delle chiavi di traduzione, lo stato delle traduzioni e altro ancora.
|
|
43
47
|
|
|
44
|
-
**Per questo, Intlayer può essere implementato come un adattatore per i18next per aiutarti ad automatizzare le traduzioni JSON
|
|
48
|
+
**Per questo, Intlayer può essere implementato come un adattatore per i18next per aiutarti ad automatizzare le traduzioni JSON tramite CLI o pipeline CI/CD, testare le tue traduzioni e molto altro.**
|
|
45
49
|
|
|
46
50
|
Questa guida ti mostra come sfruttare il sistema superiore di dichiarazione dei contenuti di Intlayer mantenendo la compatibilità con i18next.
|
|
47
51
|
|
|
@@ -67,12 +71,16 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
67
71
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
68
72
|
```
|
|
69
73
|
|
|
74
|
+
```bash packageManager="bun"
|
|
75
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
76
|
+
```
|
|
77
|
+
|
|
70
78
|
**Descrizione dei pacchetti:**
|
|
71
79
|
|
|
72
80
|
- **intlayer**: Libreria core per la gestione dell'internazionalizzazione, dichiarazione dei contenuti e build
|
|
73
|
-
- **@intlayer/sync-json-plugin**: Plugin per esportare le dichiarazioni di contenuto di Intlayer in formato JSON compatibile con i18next
|
|
81
|
+
- **@intlayer/sync-json-plugin**: Plugin per esportare le dichiarazioni di contenuto di Intlayer in un formato JSON compatibile con i18next
|
|
74
82
|
|
|
75
|
-
### Passo 2: Implementa il plugin Intlayer per
|
|
83
|
+
### Passo 2: Implementa il plugin Intlayer per avvolgere il JSON
|
|
76
84
|
|
|
77
85
|
Crea un file di configurazione Intlayer per definire le tue localizzazioni supportate:
|
|
78
86
|
|
|
@@ -89,7 +97,7 @@ const config: IntlayerConfig = {
|
|
|
89
97
|
},
|
|
90
98
|
plugins: [
|
|
91
99
|
syncJSON({
|
|
92
|
-
source: ({ key, locale }) => `./
|
|
100
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
93
101
|
}),
|
|
94
102
|
],
|
|
95
103
|
};
|
|
@@ -97,30 +105,73 @@ const config: IntlayerConfig = {
|
|
|
97
105
|
export default config;
|
|
98
106
|
```
|
|
99
107
|
|
|
100
|
-
Il plugin `syncJSON`
|
|
108
|
+
Il plugin `syncJSON` avvolgerà automaticamente il JSON. Leggerà e scriverà i file JSON senza modificare l'architettura del contenuto.
|
|
109
|
+
|
|
110
|
+
Se vuoi far coesistere quel JSON con i file di dichiarazione del contenuto di Intlayer (file `.content`), Intlayer procederà in questo modo:
|
|
111
|
+
|
|
112
|
+
1. caricherà sia i file JSON che i file di dichiarazione del contenuto e li trasformerà in un dizionario Intlayer.
|
|
113
|
+
2. se ci sono conflitti tra i file JSON e i file di dichiarazione del contenuto, Intlayer procederà alla fusione di tutti quei dizionari. A seconda della priorità dei plugin e di quella del file di dichiarazione del contenuto (tutti configurabili).
|
|
101
114
|
|
|
102
|
-
Se
|
|
115
|
+
Se vengono apportate modifiche utilizzando la CLI per tradurre il JSON, o utilizzando il CMS, Intlayer aggiornerà il file JSON con le nuove traduzioni.
|
|
103
116
|
|
|
104
|
-
|
|
105
|
-
2. se ci sono conflitti tra il JSON e i file di dichiarazione del contenuto, Intlayer procederà alla fusione di tutti questi dizionari. A seconda della priorità dei plugin e di quella del file di dichiarazione del contenuto (tutti configurabili).
|
|
117
|
+
Per maggiori dettagli sul plugin `syncJSON`, si prega di fare riferimento alla [documentazione del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/plugins/sync-json.md).
|
|
106
118
|
|
|
107
|
-
|
|
119
|
+
### (Opzionale) Passo 3: Implementare traduzioni JSON per componente
|
|
120
|
+
|
|
121
|
+
Per impostazione predefinita, Intlayer caricherà, unirà e sincronizzerà sia i file JSON che i file di dichiarazione del contenuto. Vedi [la documentazione sulla dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md) per maggiori dettagli. Ma se preferisci, utilizzando un plugin Intlayer, puoi anche implementare una gestione per componente del JSON localizzato ovunque nel tuo codice.
|
|
122
|
+
|
|
123
|
+
Per questo, puoi usare il 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
|
+
// Mantieni i tuoi file JSON attuali sincronizzati con i dizionari Intlayer
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* Caricherà tutti i file JSON nella cartella src che corrispondono al pattern {key}.i18n.json
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // Garantisce che questi file JSON abbiano la precedenza sui file in `./locales/en/${key}.json`
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* Caricherà e scriverà l'output e le traduzioni nei file JSON nella directory delle localizzazioni
|
|
147
|
+
*/
|
|
148
|
+
syncJSON({
|
|
149
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Questo caricherà tutti i file JSON nella directory `src` che corrispondono al modello `{key}.i18n.json` e li caricherà come dizionari Intlayer.
|
|
159
|
+
|
|
160
|
+
---
|
|
108
161
|
|
|
109
162
|
## Configurazione Git
|
|
110
163
|
|
|
111
|
-
Si consiglia di ignorare i file
|
|
164
|
+
Si consiglia di ignorare i file generati automaticamente da Intlayer:
|
|
112
165
|
|
|
113
166
|
```plaintext fileName=".gitignore"
|
|
114
167
|
# Ignora i file generati da Intlayer
|
|
115
168
|
.intlayer
|
|
116
169
|
```
|
|
117
170
|
|
|
118
|
-
Questi file possono essere rigenerati durante il processo di build e non
|
|
171
|
+
Questi file possono essere rigenerati durante il processo di build e non devono essere inseriti nel controllo di versione.
|
|
119
172
|
|
|
120
173
|
### Estensione VS Code
|
|
121
174
|
|
|
122
175
|
Per migliorare l'esperienza dello sviluppatore, installa l'**Estensione ufficiale Intlayer per VS Code**:
|
|
123
176
|
|
|
124
177
|
[Installa dal Marketplace di VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
125
|
-
|
|
126
|
-
[Installa dal Marketplace di VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -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: Aggiunto plugin loadJSON
|
|
19
22
|
- version: 7.0.0
|
|
20
23
|
date: 2025-10-29
|
|
21
|
-
changes:
|
|
24
|
+
changes: Modificato in plugin syncJSON e riscrittura completa
|
|
22
25
|
---
|
|
23
26
|
|
|
24
27
|
# Internazionalizzazione (i18n) in Next.js con next-i18next e Intlayer
|
|
@@ -29,7 +32,7 @@ history:
|
|
|
29
32
|
|
|
30
33
|
## Cos'è next-i18next?
|
|
31
34
|
|
|
32
|
-
**next-i18next** è uno dei framework di internazionalizzazione (i18n) più popolari per applicazioni Next.js. Costruito sopra il potente ecosistema **i18next**, offre una soluzione completa per la gestione delle traduzioni, della localizzazione e del cambio lingua nei progetti Next.js.
|
|
35
|
+
**next-i18next** è uno dei framework di internazionalizzazione (i18n) più popolari per le applicazioni Next.js. Costruito sopra il potente ecosistema **i18next**, offre una soluzione completa per la gestione delle traduzioni, della localizzazione e del cambio lingua nei progetti Next.js.
|
|
33
36
|
|
|
34
37
|
Tuttavia, next-i18next presenta alcune sfide:
|
|
35
38
|
|
|
@@ -40,17 +43,17 @@ Tuttavia, next-i18next presenta alcune sfide:
|
|
|
40
43
|
|
|
41
44
|
## Cos'è Intlayer?
|
|
42
45
|
|
|
43
|
-
**Intlayer** è una libreria di internazionalizzazione innovativa e open-source progettata per
|
|
46
|
+
**Intlayer** è una libreria di internazionalizzazione innovativa e open-source progettata per affrontare le carenze delle soluzioni i18n tradizionali. Offre un approccio moderno alla gestione dei contenuti nelle applicazioni Next.js.
|
|
44
47
|
|
|
45
|
-
Consulta un confronto concreto con next-intl nel nostro post
|
|
48
|
+
Consulta un confronto concreto con next-intl nel nostro post del blog [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/it/next-i18next_vs_next-intl_vs_intlayer.md).
|
|
46
49
|
|
|
47
50
|
## Perché combinare Intlayer con next-i18next?
|
|
48
51
|
|
|
49
|
-
Mentre Intlayer offre
|
|
52
|
+
Mentre Intlayer offre un'eccellente soluzione i18n autonoma (consulta la nostra [guida all'integrazione con Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_nextjs_16.md)), potresti volerlo combinare con next-i18next per diversi motivi:
|
|
50
53
|
|
|
51
|
-
1. **Codice esistente**: Hai un'implementazione consolidata di next-i18next e desideri migrare gradualmente verso la migliore esperienza sviluppatore
|
|
54
|
+
1. **Codice esistente**: Hai un'implementazione consolidata di next-i18next e desideri migrare gradualmente verso la migliore esperienza sviluppatore di Intlayer.
|
|
52
55
|
2. **Requisiti legacy**: Il tuo progetto richiede compatibilità con plugin o flussi di lavoro i18next esistenti.
|
|
53
|
-
3. **Familiarità del team**: Il tuo team è
|
|
56
|
+
3. **Familiarità del team**: Il tuo team è a suo agio con next-i18next ma desidera una migliore gestione dei contenuti.
|
|
54
57
|
|
|
55
58
|
**Per questo, Intlayer può essere implementato come un adattatore per next-i18next per aiutarti ad automatizzare le tue traduzioni JSON in CLI o pipeline CI/CD, testare le tue traduzioni e altro ancora.**
|
|
56
59
|
|
|
@@ -76,16 +79,16 @@ 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
|
**Spiegazioni dei pacchetti:**
|
|
80
87
|
|
|
81
88
|
- **intlayer**: Libreria core per la dichiarazione e gestione dei contenuti
|
|
82
|
-
- **next-intlayer**: Layer di integrazione per Next.js con plugin di build
|
|
83
|
-
- **i18next**: Framework core per l'internazionalizzazione
|
|
84
|
-
- **next-i18next**: Wrapper Next.js per i18next
|
|
85
|
-
- **i18next-resources-to-backend**: Caricamento dinamico delle risorse per i18next
|
|
86
89
|
- **@intlayer/sync-json-plugin**: Plugin per sincronizzare le dichiarazioni di contenuto Intlayer nel formato JSON di i18next
|
|
87
90
|
|
|
88
|
-
### Passo 2:
|
|
91
|
+
### Passo 2: Implementa il plugin Intlayer per avvolgere il JSON
|
|
89
92
|
|
|
90
93
|
Crea un file di configurazione Intlayer per definire le tue localizzazioni supportate:
|
|
91
94
|
|
|
@@ -102,7 +105,7 @@ const config: IntlayerConfig = {
|
|
|
102
105
|
},
|
|
103
106
|
plugins: [
|
|
104
107
|
syncJSON({
|
|
105
|
-
source: ({ key, locale }) => `./
|
|
108
|
+
source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
|
|
106
109
|
}),
|
|
107
110
|
],
|
|
108
111
|
};
|
|
@@ -110,20 +113,65 @@ const config: IntlayerConfig = {
|
|
|
110
113
|
export default config;
|
|
111
114
|
```
|
|
112
115
|
|
|
113
|
-
Il plugin `syncJSON`
|
|
116
|
+
Il plugin `syncJSON` avvolgerà automaticamente il JSON. Leggerà e scriverà i file JSON senza modificare l'architettura del contenuto.
|
|
114
117
|
|
|
115
|
-
Se vuoi far coesistere quel JSON con i file di dichiarazione dei contenuti di
|
|
118
|
+
Se vuoi far coesistere quel JSON con i file di dichiarazione dei contenuti di Intlayer (file `.content`), Intlayer procederà in questo modo:
|
|
116
119
|
|
|
117
|
-
1. caricherà sia i file JSON che i file di dichiarazione dei contenuti e li trasformerà in un dizionario
|
|
118
|
-
2. se ci sono conflitti tra i file JSON e i file di dichiarazione dei contenuti, Intlayer procederà alla fusione di tutti
|
|
120
|
+
1. caricherà sia i file JSON che i file di dichiarazione dei contenuti e li trasformerà in un dizionario Intlayer.
|
|
121
|
+
2. se ci sono conflitti tra i file JSON e i file di dichiarazione dei contenuti, Intlayer procederà alla fusione di tutti quei dizionari. A seconda della priorità dei plugin e di quella del file di dichiarazione dei contenuti (tutti configurabili).
|
|
119
122
|
|
|
120
123
|
Se vengono apportate modifiche utilizzando la CLI per tradurre il JSON, o utilizzando il CMS, Intlayer aggiornerà il file JSON con le nuove traduzioni.
|
|
121
124
|
|
|
125
|
+
Per maggiori dettagli sul plugin `syncJSON`, si prega di fare riferimento alla [documentazione del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/plugins/sync-json.md).
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
### (Opzionale) Passo 3: Implementare traduzioni JSON per componente
|
|
130
|
+
|
|
131
|
+
Per impostazione predefinita, Intlayer caricherà, unirà e sincronizzerà sia i file JSON che i file di dichiarazione dei contenuti. Vedi [la documentazione sulla dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md) per maggiori dettagli. Ma se preferisci, utilizzando un plugin di Intlayer, puoi anche implementare la gestione per componente di JSON localizzati ovunque nel tuo codice.
|
|
132
|
+
|
|
133
|
+
Per questo, puoi usare il 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
|
+
// Mantieni i tuoi file JSON attuali sincronizzati con i dizionari Intlayer
|
|
146
|
+
plugins: [
|
|
147
|
+
/**
|
|
148
|
+
* Caricherà tutti i file JSON nella cartella src che corrispondono al pattern {key}.i18n.json
|
|
149
|
+
*/
|
|
150
|
+
loadJSON({
|
|
151
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
152
|
+
locale: Locales.ENGLISH,
|
|
153
|
+
priority: 1, // Garantisce che questi file JSON abbiano priorità rispetto ai file in `./public/locales/en/${key}.json`
|
|
154
|
+
}),
|
|
155
|
+
/**
|
|
156
|
+
* Caricherà e scriverà l'output e le traduzioni nei file JSON nella directory delle localizzazioni
|
|
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
|
+
Questo caricherà tutti i file JSON nella directory `src` che corrispondono al modello `{key}.i18n.json` e li caricherà come dizionari Intlayer.
|
|
169
|
+
|
|
122
170
|
---
|
|
123
171
|
|
|
124
172
|
## Configurazione Git
|
|
125
173
|
|
|
126
|
-
Escludi i file generati dal controllo versione:
|
|
174
|
+
Escludi i file generati dal controllo di versione:
|
|
127
175
|
|
|
128
176
|
```plaintext fileName=".gitignore"
|
|
129
177
|
# Ignora i file generati da Intlayer
|
|
@@ -131,12 +179,10 @@ Escludi i file generati dal controllo versione:
|
|
|
131
179
|
intl
|
|
132
180
|
```
|
|
133
181
|
|
|
134
|
-
Questi file vengono rigenerati automaticamente durante il processo di build e non devono essere
|
|
182
|
+
Questi file vengono rigenerati automaticamente durante il processo di build e non devono essere aggiunti al tuo repository.
|
|
135
183
|
|
|
136
184
|
### Estensione VS Code
|
|
137
185
|
|
|
138
|
-
Per
|
|
139
|
-
|
|
140
|
-
[Installa dal Marketplace di VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
186
|
+
Per una migliore esperienza di sviluppo, installa l'**Estensione ufficiale Intlayer per VS Code**:
|
|
141
187
|
|
|
142
188
|
[Installa dal Marketplace di VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -7,9 +7,12 @@ 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: Aggiunto il plugin loadJSON
|
|
10
13
|
- version: 7.0.0
|
|
11
14
|
date: 2025-10-29
|
|
12
|
-
changes:
|
|
15
|
+
changes: Modificato in plugin syncJSON
|
|
13
16
|
---
|
|
14
17
|
|
|
15
18
|
# Come automatizzare le traduzioni JSON di next-intl usando Intlayer
|
|
@@ -22,13 +25,13 @@ Vedi un confronto concreto con next-intl nel nostro post sul blog [next-i18next
|
|
|
22
25
|
|
|
23
26
|
## Perché combinare Intlayer con next-intl?
|
|
24
27
|
|
|
25
|
-
Sebbene Intlayer offra
|
|
28
|
+
Sebbene Intlayer offra un'eccellente soluzione i18n autonoma (vedi la nostra [guida all'integrazione con Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_nextjs_16.md)), potresti volerlo combinare con next-intl per diversi motivi:
|
|
26
29
|
|
|
27
|
-
1. **Codice esistente**: Hai un'implementazione consolidata di next-intl e vuoi migrare gradualmente
|
|
30
|
+
1. **Codice esistente**: Hai un'implementazione consolidata di next-intl e vuoi migrare gradualmente verso la migliore esperienza sviluppatore di Intlayer.
|
|
28
31
|
2. **Requisiti legacy**: Il tuo progetto richiede compatibilità con plugin o flussi di lavoro esistenti di next-intl.
|
|
29
32
|
3. **Familiarità del team**: Il tuo team è a suo agio con next-intl ma desidera una migliore gestione dei contenuti.
|
|
30
33
|
|
|
31
|
-
**Per questo, Intlayer può essere implementato come un adattatore per next-intl per
|
|
34
|
+
**Per questo, Intlayer può essere implementato come un adattatore per next-intl per aiutare ad automatizzare le tue traduzioni JSON in CLI o pipeline CI/CD, testare le tue traduzioni e altro ancora.**
|
|
32
35
|
|
|
33
36
|
Questa guida ti mostra come sfruttare il sistema superiore di dichiarazione dei contenuti di Intlayer mantenendo la compatibilità con next-intl.
|
|
34
37
|
|
|
@@ -54,16 +57,20 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
54
57
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
55
58
|
```
|
|
56
59
|
|
|
60
|
+
```bash packageManager="bun"
|
|
61
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
62
|
+
```
|
|
63
|
+
|
|
57
64
|
**Descrizione dei pacchetti:**
|
|
58
65
|
|
|
59
|
-
- **intlayer**: Libreria
|
|
66
|
+
- **intlayer**: Libreria core per la gestione dell'internazionalizzazione, dichiarazione dei contenuti e build
|
|
60
67
|
- **@intlayer/sync-json-plugin**: Plugin per esportare le dichiarazioni di contenuto di Intlayer in formato JSON compatibile con next-intl
|
|
61
68
|
|
|
62
|
-
### Passo 2: Implementa il plugin Intlayer per
|
|
69
|
+
### Passo 2: Implementa il plugin Intlayer per avvolgere il JSON
|
|
63
70
|
|
|
64
71
|
Crea un file di configurazione Intlayer per definire le tue localizzazioni supportate:
|
|
65
72
|
|
|
66
|
-
**Se vuoi anche esportare dizionari JSON per next-intl**, aggiungi il plugin `syncJSON`:
|
|
73
|
+
**Se vuoi anche esportare i dizionari JSON per next-intl**, aggiungi il plugin `syncJSON`:
|
|
67
74
|
|
|
68
75
|
```typescript fileName="intlayer.config.ts"
|
|
69
76
|
import { Locales, type IntlayerConfig } from "intlayer";
|
|
@@ -84,28 +91,71 @@ const config: IntlayerConfig = {
|
|
|
84
91
|
export default config;
|
|
85
92
|
```
|
|
86
93
|
|
|
87
|
-
Il plugin `syncJSON`
|
|
94
|
+
Il plugin `syncJSON` avvolgerà automaticamente il JSON. Leggerà e scriverà i file JSON senza modificare l'architettura del contenuto.
|
|
88
95
|
|
|
89
96
|
Se vuoi far coesistere quel JSON con i file di dichiarazione dei contenuti di intlayer (file `.content`), Intlayer procederà in questo modo:
|
|
90
97
|
|
|
91
98
|
1. caricherà sia i file JSON che i file di dichiarazione dei contenuti e li trasformerà in un dizionario intlayer.
|
|
92
|
-
2. se ci sono conflitti tra
|
|
99
|
+
2. se ci sono conflitti tra i file JSON e i file di dichiarazione del contenuto, Intlayer procederà alla fusione di tutti quei dizionari. A seconda della priorità dei plugin e di quella del file di dichiarazione del contenuto (tutti configurabili).
|
|
93
100
|
|
|
94
101
|
Se vengono effettuate modifiche utilizzando la CLI per tradurre il JSON, o utilizzando il CMS, Intlayer aggiornerà il file JSON con le nuove traduzioni.
|
|
95
102
|
|
|
103
|
+
Per maggiori dettagli sul plugin `syncJSON`, si prega di consultare la [documentazione del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/plugins/sync-json.md).
|
|
104
|
+
|
|
105
|
+
### (Opzionale) Passo 3: Implementare traduzioni JSON per componente
|
|
106
|
+
|
|
107
|
+
Per impostazione predefinita, Intlayer caricherà, fonderà e sincronizzerà sia i file JSON che i file di dichiarazione del contenuto. Consulta [la documentazione sulla dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md) per maggiori dettagli. Ma se preferisci, utilizzando un plugin di Intlayer, puoi anche implementare la gestione per componente dei JSON localizzati ovunque nel tuo codice.
|
|
108
|
+
|
|
109
|
+
Per questo, puoi utilizzare il plugin `loadJSON`.
|
|
110
|
+
|
|
111
|
+
```ts fileName="intlayer.config.ts"
|
|
112
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
113
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
114
|
+
|
|
115
|
+
const config: IntlayerConfig = {
|
|
116
|
+
internationalization: {
|
|
117
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
118
|
+
defaultLocale: Locales.ENGLISH,
|
|
119
|
+
},
|
|
120
|
+
|
|
121
|
+
// Mantieni i tuoi file JSON attuali sincronizzati con i dizionari Intlayer
|
|
122
|
+
plugins: [
|
|
123
|
+
/**
|
|
124
|
+
* Caricherà tutti i file JSON nella cartella src che corrispondono al pattern {key}.i18n.json
|
|
125
|
+
*/
|
|
126
|
+
loadJSON({
|
|
127
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
128
|
+
locale: Locales.ENGLISH,
|
|
129
|
+
priority: 1, // Garantisce che questi file JSON abbiano la precedenza sui file in `./locales/en/${key}.json`
|
|
130
|
+
}),
|
|
131
|
+
/**
|
|
132
|
+
* Caricherà e scriverà l'output e le traduzioni nei file JSON nella directory delle localizzazioni
|
|
133
|
+
*/
|
|
134
|
+
syncJSON({
|
|
135
|
+
source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
|
|
136
|
+
priority: 0,
|
|
137
|
+
}),
|
|
138
|
+
],
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
export default config;
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
Questo caricherà tutti i file JSON nella directory `src` che corrispondono al pattern `{key}.i18n.json` e li caricherà come dizionari Intlayer.
|
|
145
|
+
|
|
96
146
|
## Configurazione Git
|
|
97
147
|
|
|
98
|
-
Si consiglia di ignorare i file generati automaticamente
|
|
148
|
+
Si consiglia di ignorare i file Intlayer generati automaticamente:
|
|
99
149
|
|
|
100
150
|
```plaintext fileName=".gitignore"
|
|
101
151
|
# Ignora i file generati da Intlayer
|
|
102
152
|
.intlayer
|
|
103
153
|
```
|
|
104
154
|
|
|
105
|
-
Questi file possono essere rigenerati durante il processo di build e non
|
|
155
|
+
Questi file possono essere rigenerati durante il processo di build e non è necessario includerli nel controllo di versione.
|
|
106
156
|
|
|
107
157
|
### Estensione VS Code
|
|
108
158
|
|
|
109
|
-
Per migliorare l'esperienza dello sviluppatore, installa
|
|
159
|
+
Per migliorare l'esperienza dello sviluppatore, installa l'**Estensione ufficiale Intlayer per VS Code**:
|
|
110
160
|
|
|
111
161
|
[Installa dal Marketplace di VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|