@intlayer/docs 7.0.5 → 7.0.6
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
|
@@ -16,12 +16,15 @@ 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: Ajout du plugin loadJSON
|
|
19
22
|
- version: 7.0.0
|
|
20
23
|
date: 2025-10-29
|
|
21
24
|
changes: Passage au plugin syncJSON et réécriture complète
|
|
22
25
|
---
|
|
23
26
|
|
|
24
|
-
# Internationalisation (i18n)
|
|
27
|
+
# Internationalisation Next.js (i18n) avec next-i18next et Intlayer
|
|
25
28
|
|
|
26
29
|
## Table des matières
|
|
27
30
|
|
|
@@ -29,32 +32,32 @@ history:
|
|
|
29
32
|
|
|
30
33
|
## Qu'est-ce que next-i18next ?
|
|
31
34
|
|
|
32
|
-
**next-i18next** est l
|
|
35
|
+
**next-i18next** est l'un des frameworks d'internationalisation (i18n) les plus populaires pour les applications Next.js. Construit sur l'écosystème puissant de **i18next**, il offre une solution complète pour gérer les traductions, la localisation et le changement de langue dans les projets Next.js.
|
|
33
36
|
|
|
34
37
|
Cependant, next-i18next présente certains défis :
|
|
35
38
|
|
|
36
39
|
- **Configuration complexe** : La mise en place de next-i18next nécessite plusieurs fichiers de configuration et une configuration minutieuse des instances i18n côté serveur et côté client.
|
|
37
40
|
- **Traductions dispersées** : Les fichiers de traduction sont généralement stockés dans des répertoires séparés des composants, ce qui complique le maintien de la cohérence.
|
|
38
|
-
- **Gestion manuelle des namespaces** : Les développeurs doivent gérer manuellement les namespaces et s
|
|
39
|
-
- **Sécurité de type limitée** :
|
|
41
|
+
- **Gestion manuelle des namespaces** : Les développeurs doivent gérer manuellement les namespaces et s'assurer du chargement correct des ressources de traduction.
|
|
42
|
+
- **Sécurité de type limitée** : Le support de TypeScript nécessite une configuration supplémentaire et ne fournit pas de génération automatique de types pour les traductions.
|
|
40
43
|
|
|
41
|
-
## Qu
|
|
44
|
+
## Qu'est-ce qu'Intlayer ?
|
|
42
45
|
|
|
43
|
-
**Intlayer** est une bibliothèque d
|
|
46
|
+
**Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les lacunes des solutions i18n traditionnelles. Elle propose une approche moderne de la gestion de contenu dans les applications Next.js.
|
|
44
47
|
|
|
45
48
|
Consultez une comparaison concrète avec next-intl dans notre article de blog [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md).
|
|
46
49
|
|
|
47
50
|
## Pourquoi combiner Intlayer avec next-i18next ?
|
|
48
51
|
|
|
49
|
-
Bien qu
|
|
52
|
+
Bien qu'Intlayer offre une excellente solution i18n autonome (voir notre [guide d'intégration Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_16.md)), vous pourriez vouloir le combiner avec next-i18next pour plusieurs raisons :
|
|
50
53
|
|
|
51
|
-
1. **Base de code existante** : Vous disposez d
|
|
54
|
+
1. **Base de code existante** : Vous disposez d'une implémentation next-i18next établie et souhaitez migrer progressivement vers la meilleure expérience développeur d'Intlayer.
|
|
52
55
|
2. **Exigences héritées** : Votre projet nécessite une compatibilité avec les plugins ou workflows i18next existants.
|
|
53
|
-
3. **Familiarité de l
|
|
56
|
+
3. **Familiarité de l'équipe** : Votre équipe est à l'aise avec next-i18next mais souhaite une meilleure gestion du contenu.
|
|
54
57
|
|
|
55
|
-
**Pour cela, Intlayer peut être implémenté comme un adaptateur pour next-i18next afin d
|
|
58
|
+
**Pour cela, Intlayer peut être implémenté comme un adaptateur pour next-i18next afin d'automatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et plus encore.**
|
|
56
59
|
|
|
57
|
-
Ce guide vous montre comment tirer parti du système supérieur de déclaration de contenu d
|
|
60
|
+
Ce guide vous montre comment tirer parti du système supérieur de déclaration de contenu d'Intlayer tout en maintenant la compatibilité avec next-i18next.
|
|
58
61
|
|
|
59
62
|
---
|
|
60
63
|
|
|
@@ -76,13 +79,13 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
76
79
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
77
80
|
```
|
|
78
81
|
|
|
82
|
+
```bash packageManager="bun"
|
|
83
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
84
|
+
```
|
|
85
|
+
|
|
79
86
|
**Explications des paquets :**
|
|
80
87
|
|
|
81
88
|
- **intlayer** : Bibliothèque principale pour la déclaration et la gestion de contenu
|
|
82
|
-
- **next-intlayer** : Couche d’intégration Next.js avec des plugins de build
|
|
83
|
-
- **i18next** : Framework i18n principal
|
|
84
|
-
- **next-i18next** : Wrapper Next.js pour i18next
|
|
85
|
-
- **i18next-resources-to-backend** : Chargement dynamique des ressources pour i18next
|
|
86
89
|
- **@intlayer/sync-json-plugin** : Plugin pour synchroniser les déclarations de contenu Intlayer au format JSON i18next
|
|
87
90
|
|
|
88
91
|
### Étape 2 : Implémenter le plugin Intlayer pour envelopper le JSON
|
|
@@ -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
|
};
|
|
@@ -119,29 +122,50 @@ Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de c
|
|
|
119
122
|
|
|
120
123
|
Si des modifications sont effectuées via la CLI pour traduire le JSON, ou en utilisant le CMS, Intlayer mettra à jour le fichier JSON avec les nouvelles traductions.
|
|
121
124
|
|
|
125
|
+
Pour plus de détails sur le plugin `syncJSON`, veuillez consulter la [documentation du plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/plugins/sync-json.md).
|
|
126
|
+
|
|
122
127
|
---
|
|
123
128
|
|
|
124
|
-
|
|
129
|
+
### (Optionnel) Étape 3 : Implémenter des traductions JSON par composant
|
|
125
130
|
|
|
126
|
-
|
|
131
|
+
Par défaut, Intlayer chargera, fusionnera et synchronisera à la fois les fichiers JSON et les fichiers de déclaration de contenu. Voir [la documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md) pour plus de détails. Mais si vous préférez, en utilisant un plugin Intlayer, vous pouvez également implémenter une gestion par composant des JSON localisés n'importe où dans votre base de code.
|
|
127
132
|
|
|
128
|
-
|
|
129
|
-
# Ignorer les fichiers générés par Intlayer
|
|
130
|
-
.intlayer
|
|
131
|
-
intl
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
Ces fichiers sont automatiquement régénérés lors du processus de build et n'ont pas besoin d'être commités dans votre dépôt.
|
|
133
|
+
Pour cela, vous pouvez utiliser le plugin `loadJSON`.
|
|
135
134
|
|
|
136
|
-
|
|
135
|
+
```ts fileName="intlayer.config.ts"
|
|
136
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
137
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
137
138
|
|
|
138
|
-
|
|
139
|
+
const config: IntlayerConfig = {
|
|
140
|
+
internationalization: {
|
|
141
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
142
|
+
defaultLocale: Locales.ENGLISH,
|
|
143
|
+
},
|
|
139
144
|
|
|
140
|
-
|
|
145
|
+
// Gardez vos fichiers JSON actuels synchronisés avec les dictionnaires Intlayer
|
|
146
|
+
plugins: [
|
|
147
|
+
/**
|
|
148
|
+
* Chargera tous les fichiers JSON dans src qui correspondent au motif {key}.i18n.json
|
|
149
|
+
*/
|
|
150
|
+
loadJSON({
|
|
151
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
152
|
+
locale: Locales.ENGLISH,
|
|
153
|
+
priority: 1, // Assure que ces fichiers JSON ont la priorité sur les fichiers dans `./public/locales/en/${key}.json`
|
|
154
|
+
}),
|
|
155
|
+
/**
|
|
156
|
+
* Chargera et écrira la sortie ainsi que les traductions dans les fichiers JSON du répertoire des locales
|
|
157
|
+
*/
|
|
158
|
+
syncJSON({
|
|
159
|
+
source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
|
|
160
|
+
priority: 0,
|
|
161
|
+
}),
|
|
162
|
+
],
|
|
163
|
+
};
|
|
141
164
|
|
|
142
|
-
|
|
165
|
+
export default config;
|
|
166
|
+
```
|
|
143
167
|
|
|
144
|
-
|
|
168
|
+
Cela chargera tous les fichiers JSON dans le répertoire `src` qui correspondent au modèle `{key}.i18n.json` et les chargera comme dictionnaires Intlayer.
|
|
145
169
|
|
|
146
170
|
---
|
|
147
171
|
|
|
@@ -159,6 +183,6 @@ Ces fichiers sont automatiquement régénérés lors du processus de build et n'
|
|
|
159
183
|
|
|
160
184
|
### Extension VS Code
|
|
161
185
|
|
|
162
|
-
Pour une meilleure expérience développeur, installez l
|
|
186
|
+
Pour une meilleure expérience développeur, installez l’extension officielle **Intlayer VS Code** :
|
|
163
187
|
|
|
164
188
|
[Installer depuis le Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -7,6 +7,9 @@ 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: Ajout du plugin loadJSON
|
|
10
13
|
- version: 7.0.0
|
|
11
14
|
date: 2025-10-29
|
|
12
15
|
changes: Passage au plugin syncJSON
|
|
@@ -14,17 +17,17 @@ history:
|
|
|
14
17
|
|
|
15
18
|
# Comment automatiser vos traductions JSON next-intl avec Intlayer
|
|
16
19
|
|
|
17
|
-
## Qu'est-ce
|
|
20
|
+
## Qu'est-ce qu'Intlayer ?
|
|
18
21
|
|
|
19
22
|
**Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les limites des solutions i18n traditionnelles. Elle propose une approche moderne de la gestion de contenu dans les applications Next.js.
|
|
20
23
|
|
|
21
|
-
|
|
24
|
+
Consultez une comparaison concrète avec next-intl dans notre article de blog [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md).
|
|
22
25
|
|
|
23
26
|
## Pourquoi combiner Intlayer avec next-intl ?
|
|
24
27
|
|
|
25
28
|
Bien qu'Intlayer offre une excellente solution i18n autonome (voir notre [guide d'intégration Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_16.md)), vous pourriez vouloir le combiner avec next-intl pour plusieurs raisons :
|
|
26
29
|
|
|
27
|
-
1. **Code existant** : Vous
|
|
30
|
+
1. **Code existant** : Vous disposez d'une implémentation next-intl établie et souhaitez migrer progressivement vers la meilleure expérience développeur d'Intlayer.
|
|
28
31
|
2. **Exigences héritées** : Votre projet nécessite une compatibilité avec les plugins ou workflows existants de next-intl.
|
|
29
32
|
3. **Familiarité de l'équipe** : Votre équipe est à l'aise avec next-intl mais souhaite une meilleure gestion du contenu.
|
|
30
33
|
|
|
@@ -54,6 +57,10 @@ 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
|
**Descriptions des paquets :**
|
|
58
65
|
|
|
59
66
|
- **intlayer** : Bibliothèque principale pour la gestion de l'internationalisation, la déclaration de contenu et la construction
|
|
@@ -84,14 +91,57 @@ const config: IntlayerConfig = {
|
|
|
84
91
|
export default config;
|
|
85
92
|
```
|
|
86
93
|
|
|
87
|
-
Le plugin `syncJSON` enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans
|
|
94
|
+
Le plugin `syncJSON` enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans changer l'architecture du contenu.
|
|
88
95
|
|
|
89
|
-
Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de contenu intlayer (`.content`), Intlayer procédera de la manière suivante :
|
|
96
|
+
Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de contenu intlayer (`.content` files), Intlayer procédera de la manière suivante :
|
|
90
97
|
|
|
91
98
|
1. charger à la fois les fichiers JSON et les fichiers de déclaration de contenu et les transformer en un dictionnaire intlayer.
|
|
92
|
-
2. s'il y a des conflits entre
|
|
99
|
+
2. s'il y a des conflits entre les fichiers JSON et les fichiers de déclaration de contenu, Intlayer procédera à la fusion de tous ces dictionnaires. Cela dépendra de la priorité des plugins, ainsi que de celle du fichier de déclaration de contenu (tout est configurable).
|
|
100
|
+
|
|
101
|
+
Si des modifications sont effectuées via la CLI pour traduire le JSON, ou en utilisant le CMS, Intlayer mettra à jour le fichier JSON avec les nouvelles traductions.
|
|
102
|
+
|
|
103
|
+
Pour plus de détails sur le plugin `syncJSON`, veuillez consulter la [documentation du plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/plugins/sync-json.md).
|
|
104
|
+
|
|
105
|
+
### (Optionnel) Étape 3 : Implémenter des traductions JSON par composant
|
|
106
|
+
|
|
107
|
+
Par défaut, Intlayer chargera, fusionnera et synchronisera à la fois les fichiers JSON et les fichiers de déclaration de contenu. Consultez [la documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md) pour plus de détails. Mais si vous préférez, en utilisant un plugin Intlayer, vous pouvez également implémenter une gestion par composant des JSON localisés n'importe où dans votre base de code.
|
|
108
|
+
|
|
109
|
+
Pour cela, vous pouvez utiliser le 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
|
+
// Gardez vos fichiers JSON actuels synchronisés avec les dictionnaires Intlayer
|
|
122
|
+
plugins: [
|
|
123
|
+
/**
|
|
124
|
+
* Chargera tous les fichiers JSON dans le répertoire src correspondant au modèle {key}.i18n.json
|
|
125
|
+
*/
|
|
126
|
+
loadJSON({
|
|
127
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
128
|
+
locale: Locales.ENGLISH,
|
|
129
|
+
priority: 1, // Assure que ces fichiers JSON ont la priorité sur les fichiers dans `./locales/en/${key}.json`
|
|
130
|
+
}),
|
|
131
|
+
/**
|
|
132
|
+
* Chargera, puis écrira la sortie et les traductions dans les fichiers JSON du répertoire locales
|
|
133
|
+
*/
|
|
134
|
+
syncJSON({
|
|
135
|
+
source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
|
|
136
|
+
priority: 0,
|
|
137
|
+
}),
|
|
138
|
+
],
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
export default config;
|
|
142
|
+
```
|
|
93
143
|
|
|
94
|
-
|
|
144
|
+
Cela chargera tous les fichiers JSON dans le répertoire `src` qui correspondent au modèle `{key}.i18n.json` et les chargera en tant que dictionnaires Intlayer.
|
|
95
145
|
|
|
96
146
|
## Configuration Git
|
|
97
147
|
|
|
@@ -18,6 +18,9 @@ slugs:
|
|
|
18
18
|
- blog
|
|
19
19
|
- intlayer-with-react-i18next
|
|
20
20
|
history:
|
|
21
|
+
- version: 7.0.6
|
|
22
|
+
date: 2025-11-01
|
|
23
|
+
changes: Ajout du plugin loadJSON
|
|
21
24
|
- version: 7.0.0
|
|
22
25
|
date: 2025-10-29
|
|
23
26
|
changes: Passage au plugin syncJSON
|
|
@@ -27,6 +30,14 @@ history:
|
|
|
27
30
|
|
|
28
31
|
## Qu'est-ce que Intlayer ?
|
|
29
32
|
|
|
33
|
+
**Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les limites des solutions i18n traditionnelles. Elle offre une approche moderne de la gestion de contenu dans les applications React.
|
|
34
|
+
|
|
35
|
+
Découvrez une comparaison concrète avec react-i18next dans notre article de blog [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/react-i18next_vs_react-intl_vs_intlayer.md).
|
|
36
|
+
|
|
37
|
+
## Pourquoi combiner Intlayer avec react-i18next ?
|
|
38
|
+
|
|
39
|
+
Alors qu'Intlayer propose une excellente solution i18n autonome (voir notre [guide d'intégration React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+react.md)), vous pourriez vouloir la combiner avec react-i18next pour plusieurs raisons :
|
|
40
|
+
|
|
30
41
|
**Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les lacunes des solutions i18n traditionnelles. Elle offre une approche moderne de la gestion de contenu dans les applications React.
|
|
31
42
|
|
|
32
43
|
Consultez une comparaison concrète avec react-i18next dans notre article de blog [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/react-i18next_vs_react-intl_vs_intlayer.md).
|
|
@@ -38,8 +49,9 @@ Bien qu'Intlayer fournisse une excellente solution i18n autonome (voir notre [gu
|
|
|
38
49
|
1. **Base de code existante** : Vous disposez d'une implémentation react-i18next établie et souhaitez migrer progressivement vers la meilleure expérience développeur d'Intlayer.
|
|
39
50
|
2. **Exigences héritées** : Votre projet nécessite une compatibilité avec les plugins ou workflows react-i18next existants.
|
|
40
51
|
3. **Familiarité de l'équipe** : Votre équipe est à l'aise avec react-i18next mais souhaite une meilleure gestion du contenu.
|
|
52
|
+
4. **Utilisation des fonctionnalités d'Intlayer** : Vous souhaitez utiliser les fonctionnalités d'Intlayer telles que la déclaration de contenu, l'automatisation des traductions, le test des traductions, et plus encore.
|
|
41
53
|
|
|
42
|
-
**Pour cela, Intlayer peut être implémenté comme un adaptateur pour react-i18next afin d'automatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et plus
|
|
54
|
+
**Pour cela, Intlayer peut être implémenté comme un adaptateur pour react-i18next afin d'automatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et bien plus.**
|
|
43
55
|
|
|
44
56
|
Ce guide vous montre comment tirer parti du système supérieur de déclaration de contenu d'Intlayer tout en maintenant la compatibilité avec react-i18next.
|
|
45
57
|
|
|
@@ -65,9 +77,13 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
65
77
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
66
78
|
```
|
|
67
79
|
|
|
80
|
+
```bash packageManager="bun"
|
|
81
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
82
|
+
```
|
|
83
|
+
|
|
68
84
|
**Descriptions des paquets :**
|
|
69
85
|
|
|
70
|
-
- **intlayer** : Bibliothèque principale pour la gestion de l'internationalisation, la déclaration de contenu et la
|
|
86
|
+
- **intlayer** : Bibliothèque principale pour la gestion de l'internationalisation, la déclaration de contenu et la compilation
|
|
71
87
|
- **@intlayer/sync-json-plugin** : Plugin pour exporter les déclarations de contenu Intlayer au format JSON compatible avec react-i18next
|
|
72
88
|
|
|
73
89
|
### Étape 2 : Implémenter le plugin Intlayer pour envelopper le JSON
|
|
@@ -87,7 +103,7 @@ const config: IntlayerConfig = {
|
|
|
87
103
|
},
|
|
88
104
|
plugins: [
|
|
89
105
|
syncJSON({
|
|
90
|
-
source: ({ key, locale }) => `./
|
|
106
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
91
107
|
}),
|
|
92
108
|
],
|
|
93
109
|
};
|
|
@@ -95,17 +111,58 @@ const config: IntlayerConfig = {
|
|
|
95
111
|
export default config;
|
|
96
112
|
```
|
|
97
113
|
|
|
98
|
-
Le plugin `syncJSON` enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans
|
|
114
|
+
Le plugin `syncJSON` enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans modifier l'architecture du contenu.
|
|
99
115
|
|
|
100
116
|
Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de contenu intlayer (`.content`), Intlayer procédera de la manière suivante :
|
|
101
117
|
|
|
102
|
-
1. charger à la fois les fichiers JSON et les fichiers de déclaration de contenu
|
|
103
|
-
2. s'il y a des conflits entre
|
|
118
|
+
1. charger à la fois les fichiers JSON et les fichiers de déclaration de contenu, puis les transformer en un dictionnaire intlayer.
|
|
119
|
+
2. s'il y a des conflits entre le JSON et les fichiers de déclaration de contenu, Intlayer procédera à la fusion de tous ces dictionnaires. Cela dépendra de la priorité des plugins, ainsi que de celle des fichiers de déclaration de contenu (tout est configurable).
|
|
104
120
|
|
|
105
|
-
Si des modifications sont effectuées via la CLI pour traduire le JSON, ou
|
|
121
|
+
Si des modifications sont effectuées via la CLI pour traduire le JSON, ou via le CMS, Intlayer mettra à jour le fichier JSON avec les nouvelles traductions.
|
|
106
122
|
|
|
107
123
|
Pour plus de détails sur le plugin `syncJSON`, veuillez consulter la [documentation du plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/plugins/sync-json.md).
|
|
108
124
|
|
|
125
|
+
### (Optionnel) Étape 3 : Implémenter des traductions JSON par composant
|
|
126
|
+
|
|
127
|
+
Par défaut, Intlayer chargera, fusionnera et synchronisera à la fois les fichiers JSON et les fichiers de déclaration de contenu. Voir [la documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md) pour plus de détails. Mais si vous préférez, en utilisant un plugin Intlayer, vous pouvez également implémenter une gestion par composant des JSON localisés n'importe où dans votre base de code.
|
|
128
|
+
|
|
129
|
+
Pour cela, vous pouvez utiliser le plugin `loadJSON`.
|
|
130
|
+
|
|
131
|
+
```ts fileName="intlayer.config.ts"
|
|
132
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
133
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
134
|
+
|
|
135
|
+
const config: IntlayerConfig = {
|
|
136
|
+
internationalization: {
|
|
137
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
138
|
+
defaultLocale: Locales.ENGLISH,
|
|
139
|
+
},
|
|
140
|
+
|
|
141
|
+
// Gardez vos fichiers JSON actuels synchronisés avec les dictionnaires Intlayer
|
|
142
|
+
plugins: [
|
|
143
|
+
/**
|
|
144
|
+
* Chargera tous les fichiers JSON dans src qui correspondent au modèle {key}.i18n.json
|
|
145
|
+
*/
|
|
146
|
+
loadJSON({
|
|
147
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
148
|
+
locale: Locales.ENGLISH,
|
|
149
|
+
priority: 1, // Assure que ces fichiers JSON ont la priorité sur les fichiers dans `./locales/en/${key}.json`
|
|
150
|
+
}),
|
|
151
|
+
/**
|
|
152
|
+
* Chargera, puis écrira la sortie et les traductions dans les fichiers JSON du répertoire locales
|
|
153
|
+
*/
|
|
154
|
+
syncJSON({
|
|
155
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
156
|
+
priority: 0,
|
|
157
|
+
}),
|
|
158
|
+
],
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
export default config;
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
Cela chargera tous les fichiers JSON dans le répertoire `src` correspondant au modèle `{key}.i18n.json` et les chargera en tant que dictionnaires Intlayer.
|
|
165
|
+
|
|
109
166
|
## Configuration Git
|
|
110
167
|
|
|
111
168
|
Il est recommandé d'ignorer les fichiers Intlayer générés automatiquement :
|
|
@@ -16,6 +16,9 @@ slugs:
|
|
|
16
16
|
- blog
|
|
17
17
|
- intlayer-with-react-intl
|
|
18
18
|
history:
|
|
19
|
+
- version: 7.0.6
|
|
20
|
+
date: 2025-11-01
|
|
21
|
+
changes: Ajout du plugin loadJSON
|
|
19
22
|
- version: 7.0.0
|
|
20
23
|
date: 2025-10-29
|
|
21
24
|
changes: Passage au plugin syncJSON
|
|
@@ -23,21 +26,26 @@ history:
|
|
|
23
26
|
|
|
24
27
|
# Comment automatiser vos traductions JSON react-intl avec Intlayer
|
|
25
28
|
|
|
29
|
+
## Table des matières
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
26
33
|
## Qu'est-ce que Intlayer ?
|
|
27
34
|
|
|
28
|
-
**Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les limites des solutions i18n traditionnelles. Elle
|
|
35
|
+
**Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les limites des solutions i18n traditionnelles. Elle offre une approche moderne de la gestion de contenu dans les applications React.
|
|
29
36
|
|
|
30
37
|
Consultez une comparaison concrète avec react-intl dans notre article de blog [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/react-i18next_vs_react-intl_vs_intlayer.md).
|
|
31
38
|
|
|
32
39
|
## Pourquoi combiner Intlayer avec react-intl ?
|
|
33
40
|
|
|
34
|
-
Bien qu'Intlayer
|
|
41
|
+
Bien qu'Intlayer fournisse une excellente solution i18n autonome (voir notre [guide d'intégration React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+react.md)), vous pourriez vouloir le combiner avec react-intl pour plusieurs raisons :
|
|
35
42
|
|
|
36
43
|
1. **Code existant** : Vous disposez d'une implémentation react-intl établie et souhaitez migrer progressivement vers la meilleure expérience développeur d'Intlayer.
|
|
37
|
-
2. **
|
|
44
|
+
2. **Exigences héritées** : Votre projet nécessite une compatibilité avec les plugins ou workflows react-intl existants.
|
|
38
45
|
3. **Familiarité de l'équipe** : Votre équipe est à l'aise avec react-intl mais souhaite une meilleure gestion du contenu.
|
|
46
|
+
4. **Utilisation des fonctionnalités d'Intlayer** : Vous souhaitez utiliser les fonctionnalités d'Intlayer telles que la déclaration de contenu, l'automatisation des traductions, le test des traductions, et plus encore.
|
|
39
47
|
|
|
40
|
-
**Pour cela, Intlayer peut être implémenté comme un adaptateur pour react-intl afin d'automatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et plus
|
|
48
|
+
**Pour cela, Intlayer peut être implémenté comme un adaptateur pour react-intl afin d'automatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et bien plus.**
|
|
41
49
|
|
|
42
50
|
Ce guide vous montre comment tirer parti du système supérieur de déclaration de contenu d'Intlayer tout en maintenant la compatibilité avec react-intl.
|
|
43
51
|
|
|
@@ -63,10 +71,14 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
63
71
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
64
72
|
```
|
|
65
73
|
|
|
74
|
+
```bash packageManager="bun"
|
|
75
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
76
|
+
```
|
|
77
|
+
|
|
66
78
|
**Descriptions des paquets :**
|
|
67
79
|
|
|
68
|
-
- **intlayer** : Bibliothèque principale pour la gestion de l'internationalisation, la déclaration de contenu et la
|
|
69
|
-
- **@intlayer/sync-json-plugin** : Plugin pour exporter les déclarations de contenu Intlayer au format JSON compatible react-intl
|
|
80
|
+
- **intlayer** : Bibliothèque principale pour la gestion de l'internationalisation, la déclaration de contenu et la construction
|
|
81
|
+
- **@intlayer/sync-json-plugin** : Plugin pour exporter les déclarations de contenu Intlayer au format JSON compatible avec react-intl
|
|
70
82
|
|
|
71
83
|
### Étape 2 : Implémenter le plugin Intlayer pour envelopper le JSON
|
|
72
84
|
|
|
@@ -93,17 +105,58 @@ const config: IntlayerConfig = {
|
|
|
93
105
|
export default config;
|
|
94
106
|
```
|
|
95
107
|
|
|
96
|
-
Le plugin `syncJSON` enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans
|
|
108
|
+
Le plugin `syncJSON` enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans changer l'architecture du contenu.
|
|
97
109
|
|
|
98
|
-
Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de contenu
|
|
110
|
+
Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de contenu Intlayer (`.content` files), Intlayer procédera de la manière suivante :
|
|
99
111
|
|
|
100
|
-
1. charger à la fois les fichiers JSON et les fichiers de déclaration de contenu et les transformer en un dictionnaire
|
|
112
|
+
1. charger à la fois les fichiers JSON et les fichiers de déclaration de contenu et les transformer en un dictionnaire Intlayer.
|
|
101
113
|
2. s'il y a des conflits entre le JSON et les fichiers de déclaration de contenu, Intlayer procédera à la fusion de tous ces dictionnaires. Cela dépendra de la priorité des plugins, ainsi que de celle du fichier de déclaration de contenu (tout est configurable).
|
|
102
114
|
|
|
103
|
-
Si des modifications sont effectuées via la CLI pour traduire le JSON, ou
|
|
115
|
+
Si des modifications sont effectuées via la CLI pour traduire le JSON, ou via le CMS, Intlayer mettra à jour le fichier JSON avec les nouvelles traductions.
|
|
104
116
|
|
|
105
117
|
Pour plus de détails sur le plugin `syncJSON`, veuillez consulter la [documentation du plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/plugins/sync-json.md).
|
|
106
118
|
|
|
119
|
+
### (Optionnel) Étape 3 : Implémenter des traductions JSON par composant
|
|
120
|
+
|
|
121
|
+
Par défaut, Intlayer chargera, fusionnera et synchronisera à la fois les fichiers JSON et les fichiers de déclaration de contenu. Voir [la documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md) pour plus de détails. Mais si vous préférez, en utilisant un plugin Intlayer, vous pouvez également implémenter une gestion par composant des JSON localisés n'importe où dans votre base de code.
|
|
122
|
+
|
|
123
|
+
Pour cela, vous pouvez utiliser le 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
|
+
// Gardez vos fichiers JSON actuels synchronisés avec les dictionnaires Intlayer
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* Chargera tous les fichiers JSON dans src correspondant au modèle {key}.i18n.json
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // Assure que ces fichiers JSON ont la priorité sur les fichiers dans `./locales/en/${key}.json`
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* Chargera, et écrira la sortie ainsi que les traductions dans les fichiers JSON du répertoire locales
|
|
147
|
+
*/
|
|
148
|
+
syncJSON({
|
|
149
|
+
source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Cela chargera tous les fichiers JSON dans le répertoire `src` qui correspondent au modèle `{key}.i18n.json` et les chargera en tant que dictionnaires Intlayer.
|
|
159
|
+
|
|
107
160
|
## Configuration Git
|
|
108
161
|
|
|
109
162
|
Il est recommandé d'ignorer les fichiers Intlayer générés automatiquement :
|