@intlayer/docs 6.1.4 → 6.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +1135 -75
- package/blog/ar/nextjs-multilingual-seo-comparison.md +364 -0
- package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +1139 -72
- package/blog/de/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +224 -240
- package/blog/en/nextjs-multilingual-seo-comparison.md +360 -0
- package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +1134 -37
- package/blog/en-GB/nextjs-multilingual-seo-comparison.md +360 -0
- package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +1122 -64
- package/blog/es/nextjs-multilingual-seo-comparison.md +363 -0
- package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +1132 -75
- package/blog/fr/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/hi/nextjs-multilingual-seo-comparison.md +363 -0
- package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +1120 -55
- package/blog/it/nextjs-multilingual-seo-comparison.md +363 -0
- package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +1140 -76
- package/blog/ja/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +1129 -73
- package/blog/ko/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +1133 -76
- package/blog/pt/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +1142 -74
- package/blog/ru/nextjs-multilingual-seo-comparison.md +370 -0
- package/blog/tr/nextjs-multilingual-seo-comparison.md +362 -0
- package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +1142 -75
- package/blog/zh/nextjs-multilingual-seo-comparison.md +394 -0
- package/dist/cjs/generated/blog.entry.cjs +16 -0
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +16 -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/en/interest_of_intlayer.md +2 -2
- package/package.json +10 -10
- package/src/generated/blog.entry.ts +16 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-08-23
|
|
3
|
-
updatedAt: 2025-
|
|
3
|
+
updatedAt: 2025-09-29
|
|
4
4
|
title: next-i18next vs next-intl vs Intlayer
|
|
5
5
|
description: Comparaison de next-i18next avec next-intl et Intlayer pour l'internationalisation (i18n) d'une application Next.js
|
|
6
6
|
keywords:
|
|
@@ -19,144 +19,1201 @@ slugs:
|
|
|
19
19
|
|
|
20
20
|
# next-i18next VS next-intl VS intlayer | Internationalisation (i18n) Next.js
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
Examinons les similitudes et différences entre trois options i18n pour Next.js : next-i18next, next-intl, et Intlayer.
|
|
23
|
+
|
|
24
|
+
Ce n’est pas un tutoriel complet. C’est une comparaison pour vous aider à choisir.
|
|
25
|
+
|
|
23
26
|
Nous nous concentrons sur **Next.js 13+ App Router** (avec **React Server Components**) et évaluons :
|
|
24
27
|
|
|
25
|
-
1. **Architecture
|
|
26
|
-
2. **TypeScript
|
|
28
|
+
1. **Architecture et organisation du contenu**
|
|
29
|
+
2. **TypeScript et sécurité**
|
|
27
30
|
3. **Gestion des traductions manquantes**
|
|
28
|
-
4. **Routage
|
|
29
|
-
5. **Performance
|
|
30
|
-
6. **Expérience développeur (DX), outils
|
|
31
|
-
7. **SEO
|
|
31
|
+
4. **Routage et middleware**
|
|
32
|
+
5. **Performance et comportement de chargement**
|
|
33
|
+
6. **Expérience développeur (DX), outils et maintenance**
|
|
34
|
+
7. **SEO et évolutivité pour les grands projets**
|
|
35
|
+
|
|
36
|
+
> **En résumé** : Les trois solutions peuvent localiser une application Next.js. Si vous souhaitez un **contenu scoped par composant**, des **types TypeScript stricts**, des **vérifications des clés manquantes à la compilation**, des **dictionnaires optimisés par tree-shaking**, ainsi que des **helpers de premier ordre pour App Router et SEO**, **Intlayer** est le choix le plus complet et moderne.
|
|
32
37
|
|
|
33
|
-
>
|
|
38
|
+
> Une confusion fréquente chez les développeurs est de penser que `next-intl` est la version Next.js de `react-intl`. Ce n'est pas le cas — `next-intl` est maintenu par [Amann](https://github.com/amannn), tandis que `react-intl` est maintenu par [FormatJS](https://github.com/formatjs/formatjs).
|
|
34
39
|
|
|
35
40
|
---
|
|
36
41
|
|
|
37
|
-
##
|
|
42
|
+
## En bref
|
|
38
43
|
|
|
39
|
-
- **next-intl** - Formatage de messages léger et simple avec un bon support Next.js. Les catalogues centralisés sont courants ; l
|
|
44
|
+
- **next-intl** - Formatage de messages léger et simple avec un bon support Next.js. Les catalogues centralisés sont courants ; l'expérience développeur (DX) est simple, mais la sécurité et la maintenance à grande échelle restent principalement de votre responsabilité.
|
|
40
45
|
- **next-i18next** - i18next habillé pour Next.js. Écosystème mature et fonctionnalités via des plugins (par exemple, ICU), mais la configuration peut être verbeuse et les catalogues ont tendance à se centraliser à mesure que les projets grandissent.
|
|
41
|
-
- **Intlayer** - Modèle de contenu centré sur les composants pour Next.js, **typage TS
|
|
46
|
+
- **Intlayer** - Modèle de contenu centré sur les composants pour Next.js, **typage strict en TS**, **vérifications à la compilation**, **tree-shaking**, **middleware intégré et aides SEO**, **éditeur visuel/CMS** optionnel, et **traductions assistées par IA**.
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
| Library | GitHub Stars | Total Commits | Last Commit | First Version | NPM Version | NPM Downloads |
|
|
51
|
+
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
52
|
+
| `aymericzip/intlayer` | [](https://github.com/aymericzip/intlayer/stargazers) | [](https://github.com/aymericzip/intlayer/commits) | [](https://github.com/aymericzip/intlayer/commits) | April 2024 | [](https://www.npmjs.com/package/intlayer) | [](https://www.npmjs.com/package/intlayer) |
|
|
53
|
+
| `amannn/next-intl` | [](https://github.com/amannn/next-intl/stargazers) | [](https://github.com/amannn/next-intl/commits) | [](https://github.com/amannn/next-intl/commits) | Nov 2020 | [](https://www.npmjs.com/package/next-intl) | [](https://www.npmjs.com/package/next-intl) |
|
|
54
|
+
| `i18next/i18next` | [](https://github.com/i18next/i18next/stargazers) | [](https://github.com/i18next/i18next/commits) | [](https://github.com/i18next/i18next/commits) | Jan 2012 | [](https://www.npmjs.com/package/i18next) | [](https://www.npmjs.com/package/i18next) |
|
|
55
|
+
| `i18next/next-i18next` | [](https://github.com/i18next/next-i18next/stargazers) | [](https://github.com/i18next/next-i18next/commits) | [](https://github.com/i18next/next-i18next/commits) | Nov 2018 | [](https://www.npmjs.com/package/next-i18next) | [](https://www.npmjs.com/package/next-i18next) |
|
|
56
|
+
|
|
57
|
+
> Les badges se mettent à jour automatiquement. Les instantanés peuvent varier dans le temps.
|
|
42
58
|
|
|
43
59
|
---
|
|
44
60
|
|
|
45
61
|
## Comparaison des fonctionnalités côte à côte (axée sur Next.js)
|
|
46
62
|
|
|
47
|
-
| Fonctionnalité
|
|
48
|
-
|
|
|
49
|
-
| **Traductions Près des Composants**
|
|
50
|
-
| **Intégration TypeScript**
|
|
51
|
-
| **Détection des
|
|
52
|
-
| **Contenu
|
|
53
|
-
| **Traduction assistée par IA**
|
|
54
|
-
| **Éditeur Visuel**
|
|
55
|
-
| **Routage Localisé**
|
|
56
|
-
| **Génération
|
|
57
|
-
| **Pluriels**
|
|
58
|
-
| **Formatage (dates, nombres, devises)**
|
|
59
|
-
| **Format de contenu**
|
|
60
|
-
| **Support ICU**
|
|
61
|
-
| **Aides SEO (hreflang, sitemap)**
|
|
62
|
-
| **Écosystème / Communauté**
|
|
63
|
-
| **Rendu côté serveur & Composants
|
|
64
|
-
|
|
|
65
|
-
| **Chargement paresseux**
|
|
66
|
-
| **Purge du contenu inutilisé**
|
|
67
|
-
| **Gestion des grands projets**
|
|
63
|
+
| Fonctionnalité | `next-intlayer` (Intlayer) | `next-intl` | `next-i18next` |
|
|
64
|
+
| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
65
|
+
| **Traductions Près des Composants** | ✅ Oui, contenu collé à chaque composant | ❌ Non | ❌ Non |
|
|
66
|
+
| **Intégration TypeScript** | ✅ Avancée, types stricts générés automatiquement | ✅ Bonne | ⚠️ Basique |
|
|
67
|
+
| **Détection des traductions manquantes** | ✅ Mise en évidence des erreurs TypeScript et erreurs/avertissements à la compilation | ⚠️ Repli à l'exécution | ⚠️ Repli à l'exécution |
|
|
68
|
+
| **Contenu enrichi (JSX/Markdown/composants)** | ✅ Support direct | ❌ Non conçu pour des nœuds riches | ⚠️ Limité |
|
|
69
|
+
| **Traduction assistée par IA** | ✅ Oui, prend en charge plusieurs fournisseurs d'IA. Utilisable avec vos propres clés API. Prend en compte le contexte de votre application et la portée du contenu | ❌ Non | ❌ Non |
|
|
70
|
+
| **Éditeur Visuel** | ✅ Oui, éditeur visuel local + CMS optionnel ; peut externaliser le contenu de la base de code ; intégrable | ❌ Non / disponible via des plateformes de localisation externes | ❌ Non / disponible via des plateformes de localisation externes |
|
|
71
|
+
| **Routage Localisé** | ✅ Oui, prend en charge les chemins localisés nativement (fonctionne avec Next.js & Vite) | ✅ Intégré, App Router prend en charge le segment `[locale]` | ✅ Intégré |
|
|
72
|
+
| **Génération dynamique de routes** | ✅ Oui | ✅ Oui | ✅ Oui |
|
|
73
|
+
| **Pluriels** | ✅ Modèles basés sur des énumérations | ✅ Bon | ✅ Bon |
|
|
74
|
+
| **Formatage (dates, nombres, devises)** | ✅ Formatteurs optimisés (Intl en interne) | ✅ Bon (helpers Intl) | ✅ Bon (helpers Intl) |
|
|
75
|
+
| **Format de contenu** | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml en cours) | ✅ .json, .js, .ts | ⚠️ .json |
|
|
76
|
+
| **Support ICU** | ⚠️ En cours de développement | ✅ Oui | ⚠️ Via plugin (`i18next-icu`) |
|
|
77
|
+
| **Aides SEO (hreflang, sitemap)** | ✅ Outils intégrés : aides pour sitemap, robots.txt, métadonnées | ✅ Bon | ✅ Bon |
|
|
78
|
+
| **Écosystème / Communauté** | ⚠️ Plus petite mais en croissance rapide et réactive | ✅ Bonne | ✅ Bonne |
|
|
79
|
+
| **Rendu côté serveur & Composants serveur** | ✅ Oui, optimisé pour SSR / Composants serveur React | ⚠️ Pris en charge au niveau de la page mais nécessite de passer les fonctions t dans l'arbre des composants pour les composants serveur enfants | ⚠️ Pris en charge au niveau de la page mais nécessite de passer les fonctions t dans l'arbre des composants pour les composants serveur enfants |
|
|
80
|
+
| **Élimination des codes morts (chargement uniquement du contenu utilisé)** | ✅ Oui, par composant au moment de la compilation via des plugins Babel/SWC | ⚠️ Partiel | ⚠️ Partiel |
|
|
81
|
+
| **Chargement paresseux** | ✅ Oui, par locale / par dictionnaire | ✅ Oui (par route / par locale), nécessite une gestion des espaces de noms | ✅ Oui (par route / par locale), nécessite une gestion des espaces de noms |
|
|
82
|
+
| **Purge du contenu inutilisé** | ✅ Oui, par dictionnaire au moment de la compilation | ❌ Non, peut être géré manuellement avec la gestion des espaces de noms | ❌ Non, peut être géré manuellement avec la gestion des espaces de noms |
|
|
83
|
+
| **Gestion des grands projets** | ✅ Encourage la modularité, adapté aux systèmes de design | ✅ Modulaire avec configuration | ✅ Modulaire avec configuration |
|
|
84
|
+
| **Test des traductions manquantes (CLI/CI)** | ✅ CLI : `npx intlayer content test` (audit compatible CI) | ⚠️ Non intégré ; la documentation suggère `npx @lingual/i18n-check` | ⚠️ Non intégré ; dépend des outils i18next / runtime `saveMissing` |
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
## Introduction
|
|
89
|
+
|
|
90
|
+
Next.js offre un support intégré pour le routage internationalisé (par exemple, les segments de locale). Mais cette fonctionnalité ne réalise pas les traductions par elle-même. Vous avez toujours besoin d'une bibliothèque pour afficher du contenu localisé à vos utilisateurs.
|
|
91
|
+
|
|
92
|
+
De nombreuses bibliothèques i18n existent, mais dans l’univers Next.js aujourd’hui, trois gagnent en popularité : next-i18next, next-intl, et Intlayer.
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
## Architecture & évolutivité
|
|
97
|
+
|
|
98
|
+
- **next-intl / next-i18next** : Par défaut, utilisent des **catalogues centralisés** par locale (plus des **espaces de noms** dans i18next). Cela fonctionne bien au début, mais devient souvent une grande surface partagée avec un couplage croissant et une forte rotation des clés.
|
|
99
|
+
- **Intlayer** : Encourage des dictionnaires **par composant** (ou par fonctionnalité) **co-localisés** avec le code qu’ils servent. Cela réduit la charge cognitive, facilite la duplication/migration des éléments d’interface utilisateur, et diminue les conflits entre équipes. Le contenu inutilisé est naturellement plus facile à repérer et à supprimer.
|
|
100
|
+
|
|
101
|
+
**Pourquoi c’est important :** Dans les grandes bases de code ou les configurations de systèmes de design, le **contenu modulaire** évolue mieux que les catalogues monolithiques.
|
|
68
102
|
|
|
69
103
|
---
|
|
70
104
|
|
|
71
|
-
##
|
|
105
|
+
## Tailles des bundles & dépendances
|
|
106
|
+
|
|
107
|
+
Après la compilation de l'application, le bundle correspond au JavaScript que le navigateur chargera pour afficher la page. La taille du bundle est donc importante pour la performance de l'application.
|
|
108
|
+
|
|
109
|
+
Deux composants sont importants dans le contexte d'un bundle d'application multilingue :
|
|
110
|
+
|
|
111
|
+
- Le code de l'application
|
|
112
|
+
- Le contenu chargé par le navigateur
|
|
113
|
+
|
|
114
|
+
## Code de l'application
|
|
115
|
+
|
|
116
|
+
L'importance du code de l'application est minimale dans ce cas. Les trois solutions sont "tree-shakables", ce qui signifie que les parties inutilisées du code ne sont pas incluses dans le bundle.
|
|
117
|
+
|
|
118
|
+
Voici une comparaison de la taille du bundle JavaScript chargé par le navigateur pour une application multilingue avec les trois solutions.
|
|
119
|
+
|
|
120
|
+
Si aucun formateur n'est nécessaire dans l'application, la liste des fonctions exportées après tree-shaking sera :
|
|
121
|
+
|
|
122
|
+
- **next-intlayer** : `useIntlayer`, `useLocale`, `NextIntlClientProvider`, (La taille du bundle est de 180,6 kB -> 78,6 kB (gzip))
|
|
123
|
+
- **next-intl** : `useTranslations`, `useLocale`, `NextIntlClientProvider`, (La taille du bundle est de 101,3 kB -> 31,4 kB (gzip))
|
|
124
|
+
- **next-i18next** : `useTranslation`, `useI18n`, `I18nextProvider`, (La taille du bundle est de 80,7 kB -> 25,5 kB (gzip))
|
|
125
|
+
|
|
126
|
+
Ces fonctions ne sont que des wrappers autour du contexte/état React, donc l'impact total de la bibliothèque i18n sur la taille du bundle est minimal.
|
|
127
|
+
|
|
128
|
+
> Intlayer est légèrement plus volumineux que `next-intl` et `next-i18next` car il inclut plus de logique dans la fonction `useIntlayer`. Cela est lié à l'intégration de markdown et de `intlayer-editor`.
|
|
129
|
+
|
|
130
|
+
## Contenu et traductions
|
|
131
|
+
|
|
132
|
+
Cette partie est souvent ignorée par les développeurs, mais considérons le cas d'une application composée de 10 pages en 10 langues. Supposons que chaque page intègre un contenu 100 % unique pour simplifier le calcul (en réalité, beaucoup de contenu est redondant entre les pages, par exemple, le titre de la page, l'en-tête, le pied de page, etc.).
|
|
133
|
+
|
|
134
|
+
Un utilisateur souhaitant visiter la page `/fr/about` chargera le contenu d'une page dans une langue donnée. Ignorer l'optimisation du contenu reviendrait à charger inutilement 8 200 % `((1 + (((10 pages - 1) × (10 langues - 1)))) × 100)` du contenu de l'application. Voyez-vous le problème ? Même si ce contenu reste du texte, et alors que vous préférez probablement penser à optimiser les images de votre site, vous envoyez du contenu inutile à travers le monde et faites traiter cela aux ordinateurs des utilisateurs pour rien.
|
|
135
|
+
|
|
136
|
+
Deux problèmes importants :
|
|
137
|
+
|
|
138
|
+
- **Fractionnement par route :**
|
|
139
|
+
|
|
140
|
+
> Si je suis sur la page `/about`, je ne veux pas charger le contenu de la page `/home`
|
|
141
|
+
|
|
142
|
+
- **Fractionnement par locale :**
|
|
72
143
|
|
|
73
|
-
|
|
144
|
+
> Si je suis sur la page `/fr/about`, je ne veux pas charger le contenu de la page `/en/about`
|
|
74
145
|
|
|
75
|
-
|
|
76
|
-
- **Intlayer** : Encourage les dictionnaires **par composant** (ou par fonctionnalité) **co-localisés** avec le code qu’ils servent. Cela réduit la charge cognitive, facilite la duplication/migration des éléments UI, et diminue les conflits entre équipes. Le contenu inutilisé est naturellement plus facile à repérer et à purger.
|
|
146
|
+
Encore une fois, les trois solutions sont conscientes de ces problèmes et permettent de gérer ces optimisations. La différence entre les trois solutions réside dans l'expérience développeur (DX).
|
|
77
147
|
|
|
78
|
-
|
|
148
|
+
`next-intl` et `next-i18next` utilisent une approche centralisée pour gérer les traductions, permettant de fractionner les fichiers JSON par locale et par sous-fichiers. Dans `next-i18next`, nous appelons ces fichiers JSON des « namespaces » ; `next-intl` permet de déclarer des messages. Dans `intlayer`, nous appelons ces fichiers JSON des « dictionnaires ».
|
|
149
|
+
|
|
150
|
+
- Dans le cas de `next-intl`, comme pour `next-i18next`, le contenu est chargé au niveau de la page/layout, puis ce contenu est chargé dans un fournisseur de contexte. Cela signifie que le développeur doit gérer manuellement les fichiers JSON qui seront chargés pour chaque page.
|
|
151
|
+
|
|
152
|
+
> En pratique, cela implique que les développeurs sautent souvent cette optimisation, préférant charger tout le contenu dans le fournisseur de contexte de la page pour plus de simplicité.
|
|
153
|
+
|
|
154
|
+
- Dans le cas de `intlayer`, tout le contenu est chargé dans l'application. Ensuite, un plugin (`@intlayer/babel` / `@intlayer/swc`) s'occupe d'optimiser le bundle en ne chargeant que le contenu utilisé sur la page. Le développeur n'a donc pas besoin de gérer manuellement les dictionnaires qui seront chargés. Cela permet une meilleure optimisation, une meilleure maintenabilité, et réduit le temps de développement.
|
|
155
|
+
|
|
156
|
+
À mesure que l'application grandit (surtout lorsque plusieurs développeurs travaillent sur l'application), il est courant d'oublier de supprimer le contenu qui n'est plus utilisé dans les fichiers JSON.
|
|
157
|
+
|
|
158
|
+
> Notez que tous les JSON sont chargés dans tous les cas (next-intl, next-i18next, intlayer).
|
|
159
|
+
|
|
160
|
+
C'est pourquoi l'approche d'Intlayer est plus performante : si un composant n'est plus utilisé, son dictionnaire n'est pas chargé dans le bundle.
|
|
161
|
+
|
|
162
|
+
La manière dont la bibliothèque gère les valeurs de repli (fallbacks) est également importante. Considérons que l'application est en anglais par défaut, et que l'utilisateur visite la page `/fr/about`. Si des traductions manquent en français, nous considérerons le repli en anglais.
|
|
163
|
+
|
|
164
|
+
Dans le cas de `next-intl` et `next-i18next`, la bibliothèque nécessite de charger le JSON lié à la locale actuelle, mais aussi à la locale de secours. Ainsi, en supposant que tout le contenu a été traduit, chaque page chargera 100 % de contenu inutile. **En comparaison, `intlayer` traite la locale de secours lors de la construction du dictionnaire. Ainsi, chaque page ne chargera que le contenu utilisé.**
|
|
165
|
+
|
|
166
|
+
Voici un exemple de l'impact de l'optimisation de la taille du bundle en utilisant `intlayer` dans une application vite + react :
|
|
167
|
+
|
|
168
|
+
| Bundle optimisé | Bundle non optimisé |
|
|
169
|
+
| ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
|
|
170
|
+
|  |  |
|
|
79
171
|
|
|
80
172
|
---
|
|
81
173
|
|
|
82
|
-
|
|
174
|
+
## TypeScript & sécurité
|
|
175
|
+
|
|
176
|
+
<Columns>
|
|
177
|
+
<Column>
|
|
178
|
+
|
|
179
|
+
**next-intl**
|
|
180
|
+
|
|
181
|
+
- Support TypeScript solide, mais **les clés ne sont pas strictement typées par défaut** ; vous devrez maintenir manuellement les bonnes pratiques de sécurité.
|
|
182
|
+
|
|
183
|
+
</Column>
|
|
184
|
+
<Column>
|
|
185
|
+
|
|
186
|
+
**next-i18next**
|
|
187
|
+
|
|
188
|
+
- Typages de base pour les hooks ; **une typage stricte des clés nécessite des outils/configurations supplémentaires**.
|
|
189
|
+
|
|
190
|
+
</Column>
|
|
191
|
+
<Column>
|
|
83
192
|
|
|
84
|
-
|
|
85
|
-
- **next-i18next** : Typages de base pour les hooks ; la **typage strict des clés nécessite des outils/configurations supplémentaires**.
|
|
86
|
-
- **Intlayer** : **Génère des types stricts** à partir de votre contenu. L’**autocomplétion dans l’IDE** et les **erreurs à la compilation** détectent les fautes de frappe et les clés manquantes avant le déploiement.
|
|
193
|
+
**intlayer**
|
|
87
194
|
|
|
88
|
-
**
|
|
195
|
+
- **Génère des types stricts** à partir de votre contenu. **Autocomplétion IDE** et **erreurs à la compilation** détectent les fautes de frappe et les clés manquantes avant le déploiement.
|
|
196
|
+
|
|
197
|
+
</Column>
|
|
198
|
+
</Columns>
|
|
199
|
+
|
|
200
|
+
**Pourquoi c’est important :** Un typage fort déplace les erreurs vers la **gauche** (CI/build) au lieu de la **droite** (exécution).
|
|
89
201
|
|
|
90
202
|
---
|
|
91
203
|
|
|
92
|
-
|
|
204
|
+
## Gestion des traductions manquantes
|
|
205
|
+
|
|
206
|
+
**next-intl**
|
|
207
|
+
|
|
208
|
+
- S’appuie sur des **solutions de secours à l’exécution** (par exemple, afficher la clé ou la locale par défaut). La compilation ne plante pas.
|
|
209
|
+
|
|
210
|
+
**next-i18next**
|
|
93
211
|
|
|
94
|
-
-
|
|
95
|
-
|
|
212
|
+
- S’appuie sur des **solutions de secours à l’exécution** (par exemple, afficher la clé ou la locale par défaut). La compilation ne plante pas.
|
|
213
|
+
|
|
214
|
+
**intlayer**
|
|
215
|
+
|
|
216
|
+
- **Détection à la compilation** avec **avertissements/erreurs** pour les locales ou clés manquantes.
|
|
96
217
|
|
|
97
218
|
**Pourquoi c’est important :** Détecter les lacunes lors de la compilation évite les « chaînes mystères » en production et s’aligne avec des règles strictes de publication.
|
|
98
219
|
|
|
99
220
|
---
|
|
100
221
|
|
|
101
|
-
|
|
222
|
+
## Routage, middleware & stratégie d’URL
|
|
223
|
+
|
|
224
|
+
<Columns>
|
|
225
|
+
<Column>
|
|
226
|
+
|
|
227
|
+
**next-intl**
|
|
102
228
|
|
|
103
|
-
-
|
|
104
|
-
|
|
229
|
+
- Fonctionne avec le **routage localisé de Next.js** sur l'App Router.
|
|
230
|
+
|
|
231
|
+
</Column>
|
|
232
|
+
<Column>
|
|
233
|
+
|
|
234
|
+
**next-i18next**
|
|
235
|
+
|
|
236
|
+
- Fonctionne avec le **routage localisé de Next.js** sur l'App Router.
|
|
237
|
+
|
|
238
|
+
</Column>
|
|
239
|
+
<Column>
|
|
240
|
+
|
|
241
|
+
**intlayer**
|
|
242
|
+
|
|
243
|
+
- Tout ce qui précède, plus un **middleware i18n** (détection de la locale via headers/cookies) et des **helpers** pour générer des URLs localisées et des balises `<link rel="alternate" hreflang="…">`.
|
|
244
|
+
|
|
245
|
+
</Column>
|
|
246
|
+
</Columns>
|
|
105
247
|
|
|
106
248
|
**Pourquoi c’est important :** Moins de couches de liaison personnalisées ; **expérience utilisateur cohérente** et **SEO propre** à travers les locales.
|
|
107
249
|
|
|
108
250
|
---
|
|
109
251
|
|
|
110
|
-
|
|
252
|
+
## Alignement avec les Server Components (RSC)
|
|
111
253
|
|
|
112
|
-
|
|
113
|
-
|
|
254
|
+
<Columns>
|
|
255
|
+
<Column>
|
|
114
256
|
|
|
115
|
-
**
|
|
257
|
+
**next-intl**
|
|
116
258
|
|
|
117
|
-
|
|
259
|
+
- Supporte Next.js 13+. Nécessite souvent de passer les fonctions t/formatters à travers les arbres de composants dans des configurations hybrides.
|
|
118
260
|
|
|
119
|
-
|
|
261
|
+
</Column>
|
|
262
|
+
<Column>
|
|
120
263
|
|
|
121
|
-
|
|
122
|
-
- **Intlayer** : Effectue du **tree-shaking** à la compilation et **charge paresseusement par dictionnaire/locale**. Le contenu inutilisé n’est pas inclus.
|
|
264
|
+
**next-i18next**
|
|
123
265
|
|
|
124
|
-
|
|
266
|
+
- Prend en charge Next.js 13+. Contraintes similaires pour le passage des utilitaires de traduction à travers les frontières.
|
|
267
|
+
|
|
268
|
+
</Column>
|
|
269
|
+
<Column>
|
|
270
|
+
|
|
271
|
+
**intlayer**
|
|
272
|
+
|
|
273
|
+
- Prend en charge Next.js 13+ et facilite la **frontière serveur/client** avec une API cohérente et des fournisseurs orientés RSC, évitant le transfert de formateurs ou de fonctions t.
|
|
274
|
+
|
|
275
|
+
</Column>
|
|
276
|
+
</Columns>
|
|
277
|
+
|
|
278
|
+
**Pourquoi c'est important :** Modèle mental plus clair et moins de cas particuliers dans les arbres hybrides.
|
|
125
279
|
|
|
126
280
|
---
|
|
127
281
|
|
|
128
|
-
|
|
282
|
+
## DX, outils & maintenance
|
|
283
|
+
|
|
284
|
+
<Columns>
|
|
285
|
+
<Column>
|
|
286
|
+
|
|
287
|
+
**next-intl**
|
|
288
|
+
|
|
289
|
+
- Souvent associé à des plateformes de localisation externes et à des flux éditoriaux.
|
|
290
|
+
|
|
291
|
+
</Column>
|
|
292
|
+
<Column>
|
|
129
293
|
|
|
130
|
-
|
|
131
|
-
|
|
294
|
+
**next-i18next**
|
|
295
|
+
|
|
296
|
+
- Souvent associé à des plateformes de localisation externes et à des flux éditoriaux.
|
|
297
|
+
|
|
298
|
+
</Column>
|
|
299
|
+
<Column>
|
|
300
|
+
|
|
301
|
+
**intlayer**
|
|
302
|
+
|
|
303
|
+
- Propose un **éditeur visuel gratuit** et un **CMS optionnel** (compatible Git ou externalisé), ainsi qu’une **extension VSCode** et des **traductions assistées par IA** utilisant vos propres clés de fournisseur.
|
|
304
|
+
|
|
305
|
+
</Column>
|
|
306
|
+
</Columns>
|
|
132
307
|
|
|
133
308
|
**Pourquoi c’est important :** Réduit les coûts opérationnels et raccourcit la boucle entre les développeurs et les auteurs de contenu.
|
|
134
309
|
|
|
310
|
+
## Intégration avec les plateformes de localisation (TMS)
|
|
311
|
+
|
|
312
|
+
Les grandes organisations s’appuient souvent sur des systèmes de gestion de traduction (TMS) comme **Crowdin**, **Phrase**, **Lokalise**, **Localizely** ou **Localazy**.
|
|
313
|
+
|
|
314
|
+
- **Pourquoi les entreprises s’en soucient**
|
|
315
|
+
- **Collaboration & rôles** : Plusieurs acteurs sont impliqués : développeurs, chefs de produit, traducteurs, relecteurs, équipes marketing.
|
|
316
|
+
- **Échelle & efficacité** : localisation continue, relecture en contexte.
|
|
317
|
+
|
|
318
|
+
- **next-intl / next-i18next**
|
|
319
|
+
- Utilisent généralement des **catalogues JSON centralisés**, ce qui rend l’export/import avec un TMS simple.
|
|
320
|
+
- Écosystèmes matures et exemples/intégrations pour les plateformes mentionnées ci-dessus.
|
|
321
|
+
|
|
322
|
+
- **Intlayer**
|
|
323
|
+
- Encourage les **dictionnaires décentralisés par composant** et supporte du contenu **TypeScript/TSX/JS/JSON/MD**.
|
|
324
|
+
- Cela améliore la modularité dans le code, mais peut rendre l’intégration plug-and-play avec un TMS plus difficile lorsqu’un outil attend des fichiers JSON centralisés et plats.
|
|
325
|
+
- Intlayer propose des alternatives : **traductions assistées par IA** (en utilisant vos propres clés de fournisseur), un **éditeur visuel/CMS**, et des workflows **CLI/CI** pour détecter et préremplir les lacunes.
|
|
326
|
+
|
|
327
|
+
> Remarque : `next-intl` et `i18next` acceptent également les catalogues TypeScript. Si votre équipe stocke les messages dans des fichiers `.ts` ou les décentralise par fonctionnalité, vous pouvez rencontrer des frictions similaires avec le TMS. Cependant, de nombreuses configurations `next-intl` restent centralisées dans un dossier `locales/`, ce qui est un peu plus facile à refactoriser en JSON pour le TMS.
|
|
328
|
+
|
|
329
|
+
## Expérience développeur
|
|
330
|
+
|
|
331
|
+
Cette partie fait une comparaison approfondie entre les trois solutions. Plutôt que de considérer des cas simples, comme décrit dans la documentation « démarrage » de chaque solution, nous allons considérer un cas d'utilisation réel, plus proche d'un vrai projet.
|
|
332
|
+
|
|
333
|
+
### Structure de l'application
|
|
334
|
+
|
|
335
|
+
La structure de l'application est importante pour assurer une bonne maintenabilité de votre base de code.
|
|
336
|
+
|
|
337
|
+
<Tab defaultTab="next-intl" group='techno'>
|
|
338
|
+
|
|
339
|
+
<TabItem label="next-i18next" value="next-i18next">
|
|
340
|
+
|
|
341
|
+
```bash
|
|
342
|
+
.
|
|
343
|
+
├── public
|
|
344
|
+
│ └── locales
|
|
345
|
+
│ ├── en
|
|
346
|
+
│ │ ├── home.json
|
|
347
|
+
│ │ └── navbar.json
|
|
348
|
+
│ ├── fr
|
|
349
|
+
│ │ ├── home.json
|
|
350
|
+
│ │ └── navbar.json
|
|
351
|
+
│ └── es
|
|
352
|
+
│ ├── home.json
|
|
353
|
+
│ └── navbar.json
|
|
354
|
+
├── next-i18next.config.js
|
|
355
|
+
└── src
|
|
356
|
+
├── middleware.ts
|
|
357
|
+
├── app
|
|
358
|
+
│ └── home.tsx
|
|
359
|
+
└── components
|
|
360
|
+
└── Navbar
|
|
361
|
+
└── index.tsx
|
|
362
|
+
```
|
|
363
|
+
|
|
364
|
+
</TabItem>
|
|
365
|
+
<TabItem label="next-intl" value="next-intl">
|
|
366
|
+
|
|
367
|
+
```bash
|
|
368
|
+
.
|
|
369
|
+
├── locales
|
|
370
|
+
│ ├── en
|
|
371
|
+
│ │ ├── home.json
|
|
372
|
+
│ │ └── navbar.json
|
|
373
|
+
│ ├── fr
|
|
374
|
+
│ │ ├── home.json
|
|
375
|
+
│ │ └── navbar.json
|
|
376
|
+
│ └── es
|
|
377
|
+
│ ├── home.json
|
|
378
|
+
│ └── navbar.json
|
|
379
|
+
├── i18n.ts
|
|
380
|
+
└── src
|
|
381
|
+
├── middleware.ts
|
|
382
|
+
├── app
|
|
383
|
+
│ └── home.tsx
|
|
384
|
+
└── components
|
|
385
|
+
└── Navbar
|
|
386
|
+
└── index.tsx
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
</TabItem>
|
|
390
|
+
<TabItem label="intlayer" value="intlayer">
|
|
391
|
+
|
|
392
|
+
```bash
|
|
393
|
+
.
|
|
394
|
+
├── intlayer.config.ts
|
|
395
|
+
└── src
|
|
396
|
+
├── middleware.ts
|
|
397
|
+
├── app
|
|
398
|
+
│ └── home
|
|
399
|
+
│ └── index.tsx
|
|
400
|
+
│ └── index.content.ts
|
|
401
|
+
└── components
|
|
402
|
+
└── Navbar
|
|
403
|
+
├── index.tsx
|
|
404
|
+
└── index.content.ts
|
|
405
|
+
```
|
|
406
|
+
|
|
407
|
+
</TabItem>
|
|
408
|
+
</Tab>
|
|
409
|
+
|
|
410
|
+
#### Comparaison
|
|
411
|
+
|
|
412
|
+
- **next-intl / next-i18next** : Catalogues centralisés (JSON ; espaces de noms/messages). Structure claire, s'intègre bien avec les plateformes de traduction, mais peut entraîner plus de modifications croisées entre fichiers à mesure que les applications grandissent.
|
|
413
|
+
- **Intlayer** : Dictionnaires `.content.{ts|js|json}` par composant, co-localisés avec les composants. Facilite la réutilisation des composants et la réflexion locale ; ajoute des fichiers et repose sur des outils au moment de la compilation.
|
|
414
|
+
|
|
415
|
+
#### Configuration et Chargement du Contenu
|
|
416
|
+
|
|
417
|
+
Comme mentionné précédemment, vous devez optimiser la manière dont chaque fichier JSON est importé dans votre code.
|
|
418
|
+
La façon dont la bibliothèque gère le chargement du contenu est importante.
|
|
419
|
+
|
|
420
|
+
<Tab defaultTab="next-intl" group='techno'>
|
|
421
|
+
<TabItem label="next-i18next" value="next-i18next">
|
|
422
|
+
|
|
423
|
+
```tsx fileName="next-i18next.config.js"
|
|
424
|
+
module.exports = {
|
|
425
|
+
i18n: {
|
|
426
|
+
locales: ["en", "fr", "es"],
|
|
427
|
+
defaultLocale: "en",
|
|
428
|
+
},
|
|
429
|
+
};
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
```tsx fileName="src/app/_app.tsx"
|
|
433
|
+
import { appWithTranslation } from "next-i18next";
|
|
434
|
+
|
|
435
|
+
const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />;
|
|
436
|
+
|
|
437
|
+
export default appWithTranslation(MyApp);
|
|
438
|
+
```
|
|
439
|
+
|
|
440
|
+
```tsx fileName="src/app/[locale]/about/page.tsx"
|
|
441
|
+
import type { GetStaticProps } from "next";
|
|
442
|
+
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
|
443
|
+
import { useTranslation } from "next-i18next";
|
|
444
|
+
import { I18nextProvider, initReactI18next } from "react-i18next";
|
|
445
|
+
import { createInstance } from "i18next";
|
|
446
|
+
import { ClientComponent, ServerComponent } from "@components";
|
|
447
|
+
|
|
448
|
+
export default function HomePage({ locale }: { locale: string }) {
|
|
449
|
+
// Déclarez explicitement le namespace utilisé par ce composant
|
|
450
|
+
const resources = await loadMessagesFor(locale); // votre chargeur (JSON, etc.)
|
|
451
|
+
|
|
452
|
+
const i18n = createInstance();
|
|
453
|
+
i18n.use(initReactI18next).init({
|
|
454
|
+
lng: locale,
|
|
455
|
+
fallbackLng: "en",
|
|
456
|
+
resources,
|
|
457
|
+
ns: ["common", "about"],
|
|
458
|
+
defaultNS: "common",
|
|
459
|
+
interpolation: { escapeValue: false },
|
|
460
|
+
});
|
|
461
|
+
|
|
462
|
+
const { t } = useTranslation("about");
|
|
463
|
+
|
|
464
|
+
return (
|
|
465
|
+
<I18nextProvider i18n={i18n}>
|
|
466
|
+
<main>
|
|
467
|
+
<h1>{t("title")}</h1>
|
|
468
|
+
<ClientComponent />
|
|
469
|
+
<ServerComponent />
|
|
470
|
+
</main>
|
|
471
|
+
</I18nextProvider>
|
|
472
|
+
);
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
export const getStaticProps: GetStaticProps = async ({ locale }) => {
|
|
476
|
+
// Ne préchargez que les namespaces nécessaires à CETTE page
|
|
477
|
+
return {
|
|
478
|
+
props: {
|
|
479
|
+
...(await serverSideTranslations(locale ?? "en", ["common", "about"])),
|
|
480
|
+
},
|
|
481
|
+
};
|
|
482
|
+
};
|
|
483
|
+
```
|
|
484
|
+
|
|
485
|
+
</TabItem>
|
|
486
|
+
<TabItem label="next-intl" value="next-intl">
|
|
487
|
+
|
|
488
|
+
```tsx fileName="i18n.ts"
|
|
489
|
+
import { getRequestConfig } from "next-intl/server";
|
|
490
|
+
import { notFound } from "next/navigation";
|
|
491
|
+
|
|
492
|
+
// Peut être importé depuis une configuration partagée
|
|
493
|
+
const locales = ["en", "fr", "es"];
|
|
494
|
+
|
|
495
|
+
export default getRequestConfig(async ({ locale }) => {
|
|
496
|
+
// Valider que le paramètre `locale` reçu est valide
|
|
497
|
+
if (!locales.includes(locale as any)) notFound();
|
|
498
|
+
|
|
499
|
+
return {
|
|
500
|
+
messages: (await import(`../messages/${locale}.json`)).default,
|
|
501
|
+
};
|
|
502
|
+
});
|
|
503
|
+
```
|
|
504
|
+
|
|
505
|
+
```tsx fileName="src/app/[locale]/about/layout.tsx"
|
|
506
|
+
import { NextIntlClientProvider } from "next-intl";
|
|
507
|
+
import { getMessages, unstable_setRequestLocale } from "next-intl/server";
|
|
508
|
+
import pick from "lodash/pick";
|
|
509
|
+
|
|
510
|
+
export default async function LocaleLayout({
|
|
511
|
+
children,
|
|
512
|
+
params,
|
|
513
|
+
}: {
|
|
514
|
+
children: React.ReactNode;
|
|
515
|
+
params: { locale: string };
|
|
516
|
+
}) {
|
|
517
|
+
const { locale } = params;
|
|
518
|
+
|
|
519
|
+
// Définir la locale de requête active pour ce rendu serveur (RSC)
|
|
520
|
+
unstable_setRequestLocale(locale);
|
|
521
|
+
|
|
522
|
+
// Les messages sont chargés côté serveur via src/i18n/request.ts
|
|
523
|
+
// (voir la documentation next-intl). Ici, nous ne transmettons qu'un sous-ensemble au client
|
|
524
|
+
// nécessaire pour les composants client (optimisation de la charge utile).
|
|
525
|
+
const messages = await getMessages();
|
|
526
|
+
const clientMessages = pick(messages, ["common", "about"]);
|
|
527
|
+
|
|
528
|
+
return (
|
|
529
|
+
<html lang={locale}>
|
|
530
|
+
<body>
|
|
531
|
+
<NextIntlClientProvider locale={locale} messages={clientMessages}>
|
|
532
|
+
{children}
|
|
533
|
+
</NextIntlClientProvider>
|
|
534
|
+
</body>
|
|
535
|
+
</html>
|
|
536
|
+
);
|
|
537
|
+
}
|
|
538
|
+
```
|
|
539
|
+
|
|
540
|
+
```tsx fileName="src/app/[locale]/about/page.tsx"
|
|
541
|
+
import { getTranslations } from "next-intl/server";
|
|
542
|
+
import { ClientComponent, ServerComponent } from "@components";
|
|
543
|
+
|
|
544
|
+
export default async function LandingPage({
|
|
545
|
+
params,
|
|
546
|
+
}: {
|
|
547
|
+
params: { locale: string };
|
|
548
|
+
}) {
|
|
549
|
+
// Chargement strictement côté serveur (pas hydraté au client)
|
|
550
|
+
const t = await getTranslations("about");
|
|
551
|
+
|
|
552
|
+
return (
|
|
553
|
+
<main>
|
|
554
|
+
<h1>{t("title")}</h1>
|
|
555
|
+
<ClientComponent />
|
|
556
|
+
<ServerComponent />
|
|
557
|
+
</main>
|
|
558
|
+
);
|
|
559
|
+
}
|
|
560
|
+
```
|
|
561
|
+
|
|
562
|
+
</TabItem>
|
|
563
|
+
<TabItem label="intlayer" value="intlayer">
|
|
564
|
+
|
|
565
|
+
```tsx fileName="intlayer.config.ts"
|
|
566
|
+
export default {
|
|
567
|
+
internationalization: {
|
|
568
|
+
locales: ["en", "fr", "es"],
|
|
569
|
+
defaultLocale: "en",
|
|
570
|
+
},
|
|
571
|
+
};
|
|
572
|
+
```
|
|
573
|
+
|
|
574
|
+
```tsx fileName="src/app/[locale]/layout.tsx"
|
|
575
|
+
import { getHTMLTextDir } from "intlayer";
|
|
576
|
+
import {
|
|
577
|
+
IntlayerClientProvider,
|
|
578
|
+
generateStaticParams,
|
|
579
|
+
type NextLayoutIntlayer,
|
|
580
|
+
} from "next-intlayer";
|
|
581
|
+
|
|
582
|
+
export const dynamic = "force-static";
|
|
583
|
+
|
|
584
|
+
const LandingLayout: NextLayoutIntlayer = async ({ children, params }) => {
|
|
585
|
+
const { locale } = await params;
|
|
586
|
+
|
|
587
|
+
return (
|
|
588
|
+
<html lang={locale} dir={getHTMLTextDir(locale)}>
|
|
589
|
+
<IntlayerClientProvider locale={locale}>
|
|
590
|
+
{children}
|
|
591
|
+
</IntlayerClientProvider>
|
|
592
|
+
</html>
|
|
593
|
+
);
|
|
594
|
+
};
|
|
595
|
+
|
|
596
|
+
export default LandingLayout;
|
|
597
|
+
```
|
|
598
|
+
|
|
599
|
+
```tsx fileName="src/app/[locale]/about/page.tsx"
|
|
600
|
+
import { PageContent } from "@components/PageContent";
|
|
601
|
+
import type { NextPageIntlayer } from "next-intlayer";
|
|
602
|
+
import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";
|
|
603
|
+
import { ClientComponent, ServerComponent } from "@components";
|
|
604
|
+
|
|
605
|
+
const LandingPage: NextPageIntlayer = async ({ params }) => {
|
|
606
|
+
const { locale } = await params;
|
|
607
|
+
const { title } = useIntlayer("about", locale);
|
|
608
|
+
|
|
609
|
+
return (
|
|
610
|
+
<IntlayerServerProvider locale={locale}>
|
|
611
|
+
<main>
|
|
612
|
+
<h1>{title}</h1>
|
|
613
|
+
<ClientComponent />
|
|
614
|
+
<ServerComponent />
|
|
615
|
+
</main>
|
|
616
|
+
</IntlayerServerProvider>
|
|
617
|
+
);
|
|
618
|
+
};
|
|
619
|
+
|
|
620
|
+
export default LandingPage;
|
|
621
|
+
```
|
|
622
|
+
|
|
623
|
+
</TabItem>
|
|
624
|
+
</Tab>
|
|
625
|
+
|
|
626
|
+
#### Comparaison
|
|
627
|
+
|
|
628
|
+
Les trois prennent en charge le chargement de contenu par locale et les fournisseurs.
|
|
629
|
+
|
|
630
|
+
- Avec **next-intl/next-i18next**, vous chargez généralement les messages/namespaces sélectionnés par route et placez les providers là où c'est nécessaire.
|
|
631
|
+
|
|
632
|
+
- Avec **Intlayer**, une analyse au moment de la compilation est ajoutée pour déduire l'utilisation, ce qui peut réduire le câblage manuel et permettre un provider racine unique.
|
|
633
|
+
|
|
634
|
+
Choisissez entre un contrôle explicite et l'automatisation selon la préférence de l'équipe.
|
|
635
|
+
|
|
636
|
+
### Utilisation dans un composant client
|
|
637
|
+
|
|
638
|
+
Prenons un exemple d'un composant client affichant un compteur.
|
|
639
|
+
|
|
640
|
+
<Tab defaultTab="next-intl" group='techno'>
|
|
641
|
+
<TabItem label="next-i18next" value="next-i18next">
|
|
642
|
+
|
|
643
|
+
**Traductions (doivent être un vrai JSON dans `public/locales/...`)**
|
|
644
|
+
|
|
645
|
+
```json fileName="public/locales/en/about.json"
|
|
646
|
+
{
|
|
647
|
+
"counter": {
|
|
648
|
+
"label": "Counter",
|
|
649
|
+
"increment": "Increment"
|
|
650
|
+
}
|
|
651
|
+
}
|
|
652
|
+
```
|
|
653
|
+
|
|
654
|
+
```json fileName="public/locales/fr/about.json"
|
|
655
|
+
{
|
|
656
|
+
"counter": {
|
|
657
|
+
"label": "Compteur",
|
|
658
|
+
"increment": "Incrémenter"
|
|
659
|
+
}
|
|
660
|
+
}
|
|
661
|
+
```
|
|
662
|
+
|
|
663
|
+
**Composant client**
|
|
664
|
+
|
|
665
|
+
```tsx fileName="src/components/ClientComponentExample.tsx"
|
|
666
|
+
"use client";
|
|
667
|
+
|
|
668
|
+
import React, { useMemo, useState } from "react";
|
|
669
|
+
import { useTranslation } from "next-i18next";
|
|
670
|
+
|
|
671
|
+
const ClientComponentExample = () => {
|
|
672
|
+
const { t, i18n } = useTranslation("about");
|
|
673
|
+
const [count, setCount] = useState(0);
|
|
674
|
+
|
|
675
|
+
// next-i18next n'expose pas useNumber ; utilisez Intl.NumberFormat
|
|
676
|
+
const numberFormat = new Intl.NumberFormat(i18n.language);
|
|
677
|
+
|
|
678
|
+
return (
|
|
679
|
+
<div>
|
|
680
|
+
<p>{numberFormat.format(count)}</p>
|
|
681
|
+
<button
|
|
682
|
+
aria-label={t("counter.label")}
|
|
683
|
+
onClick={() => setCount((count) => count + 1)}
|
|
684
|
+
>
|
|
685
|
+
{t("counter.increment")}
|
|
686
|
+
</button>
|
|
687
|
+
</div>
|
|
688
|
+
);
|
|
689
|
+
};
|
|
690
|
+
```
|
|
691
|
+
|
|
692
|
+
> N'oubliez pas d'ajouter l'espace de noms "about" dans les serverSideTranslations de la page
|
|
693
|
+
> Nous utilisons ici la version 19.x.x de React, mais pour les versions inférieures, vous devrez utiliser useMemo pour stocker l'instance du formateur car c'est une fonction lourde
|
|
694
|
+
|
|
695
|
+
</TabItem>
|
|
696
|
+
<TabItem label="next-intl" value="next-intl">
|
|
697
|
+
|
|
698
|
+
**Traductions (forme réutilisée ; chargez-les dans les messages next-intl comme vous préférez)**
|
|
699
|
+
|
|
700
|
+
```json fileName="locales/en/about.json"
|
|
701
|
+
{
|
|
702
|
+
"counter": {
|
|
703
|
+
"label": "Counter",
|
|
704
|
+
"increment": "Increment"
|
|
705
|
+
}
|
|
706
|
+
}
|
|
707
|
+
```
|
|
708
|
+
|
|
709
|
+
```json fileName="locales/fr/about.json"
|
|
710
|
+
{
|
|
711
|
+
"counter": {
|
|
712
|
+
"label": "Compteur",
|
|
713
|
+
"increment": "Incrémenter"
|
|
714
|
+
}
|
|
715
|
+
}
|
|
716
|
+
```
|
|
717
|
+
|
|
718
|
+
**Composant client**
|
|
719
|
+
|
|
720
|
+
```tsx fileName="src/components/ClientComponentExample.tsx"
|
|
721
|
+
"use client";
|
|
722
|
+
|
|
723
|
+
import React, { useState } from "react";
|
|
724
|
+
import { useTranslations, useFormatter } from "next-intl";
|
|
725
|
+
|
|
726
|
+
const ClientComponentExample = () => {
|
|
727
|
+
// Portée directement sur l'objet imbriqué
|
|
728
|
+
const t = useTranslations("about.counter");
|
|
729
|
+
const format = useFormatter();
|
|
730
|
+
const [count, setCount] = useState(0);
|
|
731
|
+
|
|
732
|
+
return (
|
|
733
|
+
<div>
|
|
734
|
+
<p>{format.number(count)}</p>
|
|
735
|
+
<button
|
|
736
|
+
aria-label={t("label")}
|
|
737
|
+
onClick={() => setCount((count) => count + 1)}
|
|
738
|
+
>
|
|
739
|
+
{t("increment")}
|
|
740
|
+
</button>
|
|
741
|
+
</div>
|
|
742
|
+
);
|
|
743
|
+
};
|
|
744
|
+
```
|
|
745
|
+
|
|
746
|
+
> N'oubliez pas d'ajouter le message "about" dans les messages clients de la page
|
|
747
|
+
|
|
748
|
+
</TabItem>
|
|
749
|
+
<TabItem label="intlayer" value="intlayer">
|
|
750
|
+
|
|
751
|
+
**Contenu**
|
|
752
|
+
|
|
753
|
+
```ts fileName="src/components/ClientComponentExample/index.content.ts"
|
|
754
|
+
import { t, type Dictionary } from "intlayer";
|
|
755
|
+
|
|
756
|
+
const counterContent = {
|
|
757
|
+
key: "counter",
|
|
758
|
+
content: {
|
|
759
|
+
label: t({ en: "Counter", fr: "Compteur" }),
|
|
760
|
+
increment: t({ en: "Increment", fr: "Incrémenter" }),
|
|
761
|
+
},
|
|
762
|
+
} satisfies Dictionary;
|
|
763
|
+
|
|
764
|
+
export default counterContent;
|
|
765
|
+
```
|
|
766
|
+
|
|
767
|
+
**Composant client**
|
|
768
|
+
|
|
769
|
+
```tsx fileName="src/components/ClientComponentExample/index.tsx"
|
|
770
|
+
"use client";
|
|
771
|
+
|
|
772
|
+
import React, { useState } from "react";
|
|
773
|
+
import { useNumber, useIntlayer } from "next-intlayer";
|
|
774
|
+
|
|
775
|
+
const ClientComponentExample = () => {
|
|
776
|
+
const [count, setCount] = useState(0);
|
|
777
|
+
const { label, increment } = useIntlayer("counter"); // retourne des chaînes de caractères
|
|
778
|
+
const { number } = useNumber();
|
|
779
|
+
|
|
780
|
+
return (
|
|
781
|
+
<div>
|
|
782
|
+
<p>{number(count)}</p>
|
|
783
|
+
<button aria-label={label} onClick={() => setCount((count) => count + 1)}>
|
|
784
|
+
{increment}
|
|
785
|
+
</button>
|
|
786
|
+
</div>
|
|
787
|
+
);
|
|
788
|
+
};
|
|
789
|
+
```
|
|
790
|
+
|
|
791
|
+
</TabItem>
|
|
792
|
+
</Tab>
|
|
793
|
+
|
|
794
|
+
#### Comparaison
|
|
795
|
+
|
|
796
|
+
- **Formatage des nombres**
|
|
797
|
+
- **next-i18next** : pas de `useNumber` ; utilise `Intl.NumberFormat` (ou i18next-icu).
|
|
798
|
+
- **next-intl** : `useFormatter().number(value)`.
|
|
799
|
+
- **Intlayer** : `useNumber()` intégré.
|
|
800
|
+
|
|
801
|
+
- **Clés**
|
|
802
|
+
- Gardez une structure imbriquée (`about.counter.label`) et adaptez la portée de votre hook en conséquence (`useTranslation("about")` + `t("counter.label")` ou `useTranslations("about.counter")` + `t("label")`).
|
|
803
|
+
|
|
804
|
+
- **Emplacements des fichiers**
|
|
805
|
+
- **next-i18next** attend des JSON dans `public/locales/{lng}/{ns}.json`.
|
|
806
|
+
- **next-intl** est flexible ; chargez les messages comme vous le configurez.
|
|
807
|
+
- **Intlayer** stocke le contenu dans des dictionnaires TS/JS et résout par clé.
|
|
808
|
+
|
|
135
809
|
---
|
|
136
810
|
|
|
137
|
-
|
|
811
|
+
### Utilisation dans un composant serveur
|
|
812
|
+
|
|
813
|
+
Nous prendrons le cas d'un composant UI. Ce composant est un composant serveur, et doit pouvoir être inséré en tant qu'enfant d'un composant client. (page (composant serveur) -> composant client -> composant serveur). Comme ce composant peut être inséré en tant qu'enfant d'un composant client, il ne peut pas être asynchrone.
|
|
814
|
+
|
|
815
|
+
<Tab defaultTab="next-intl" group='techno'>
|
|
816
|
+
<TabItem label="next-i18next" value="next-i18next">
|
|
817
|
+
|
|
818
|
+
```tsx fileName="src/pages/about.tsx"
|
|
819
|
+
import type { GetStaticProps } from "next";
|
|
820
|
+
import { useTranslation } from "next-i18next";
|
|
821
|
+
|
|
822
|
+
type ServerComponentProps = {
|
|
823
|
+
count: number;
|
|
824
|
+
};
|
|
825
|
+
|
|
826
|
+
const ServerComponent = ({ count }: ServerComponentProps) => {
|
|
827
|
+
const { t, i18n } = useTranslation("about");
|
|
828
|
+
const formatted = new Intl.NumberFormat(i18n.language).format(count);
|
|
829
|
+
|
|
830
|
+
return (
|
|
831
|
+
<div>
|
|
832
|
+
<p>{formatted}</p>
|
|
833
|
+
<button aria-label={t("counter.label")}>{t("counter.increment")}</button>
|
|
834
|
+
</div>
|
|
835
|
+
);
|
|
836
|
+
};
|
|
837
|
+
```
|
|
838
|
+
|
|
839
|
+
</TabItem>
|
|
840
|
+
<TabItem label="next-intl" value="next-intl">
|
|
841
|
+
|
|
842
|
+
```tsx fileName="src/components/ServerComponent.tsx"
|
|
843
|
+
type ServerComponentProps = {
|
|
844
|
+
count: number;
|
|
845
|
+
t: (key: string) => string;
|
|
846
|
+
};
|
|
847
|
+
|
|
848
|
+
const ServerComponent = ({ t, count }: ServerComponentProps) => {
|
|
849
|
+
const formatted = new Intl.NumberFormat(i18n.language).format(count);
|
|
850
|
+
|
|
851
|
+
return (
|
|
852
|
+
<div>
|
|
853
|
+
<p>{formatted}</p>
|
|
854
|
+
<button aria-label={t("label")}>{t("increment")}</button>
|
|
855
|
+
</div>
|
|
856
|
+
);
|
|
857
|
+
};
|
|
858
|
+
```
|
|
859
|
+
|
|
860
|
+
> Comme le composant serveur ne peut pas être asynchrone, vous devez passer les traductions et la fonction de formatage en tant que props.
|
|
861
|
+
>
|
|
862
|
+
> - `const t = await getTranslations("about.counter");`
|
|
863
|
+
> - `const format = await getFormatter();`
|
|
864
|
+
|
|
865
|
+
</TabItem>
|
|
866
|
+
<TabItem label="intlayer" value="intlayer">
|
|
867
|
+
|
|
868
|
+
```tsx fileName="src/components/ServerComponent.tsx"
|
|
869
|
+
import { useIntlayer, useNumber } from "next-intlayer/server";
|
|
870
|
+
|
|
871
|
+
const ServerComponent = ({ count }: { count: number }) => {
|
|
872
|
+
const { label, increment } = useIntlayer("counter");
|
|
873
|
+
const { number } = useNumber();
|
|
874
|
+
|
|
875
|
+
return (
|
|
876
|
+
<div>
|
|
877
|
+
<p>{number(count)}</p>
|
|
878
|
+
<button aria-label={label}>{increment}</button>
|
|
879
|
+
</div>
|
|
880
|
+
);
|
|
881
|
+
};
|
|
882
|
+
```
|
|
883
|
+
|
|
884
|
+
</TabItem>
|
|
885
|
+
</Tab>
|
|
886
|
+
|
|
887
|
+
> Intlayer expose des hooks **sécurisés pour le serveur** via `next-intlayer/server`. Pour fonctionner, `useIntlayer` et `useNumber` utilisent une syntaxe de type hooks, similaire aux hooks côté client, mais dépendent en interne du contexte serveur (`IntlayerServerProvider`).
|
|
888
|
+
|
|
889
|
+
### Métadonnées / Sitemap / Robots
|
|
890
|
+
|
|
891
|
+
Traduire le contenu est excellent. Mais les gens oublient souvent que le but principal de l'internationalisation est de rendre votre site web plus visible dans le monde. L'i18n est un levier incroyable pour améliorer la visibilité de votre site web.
|
|
892
|
+
|
|
893
|
+
Voici une liste de bonnes pratiques concernant le SEO multilingue.
|
|
138
894
|
|
|
139
|
-
-
|
|
140
|
-
|
|
141
|
-
-
|
|
895
|
+
- définir les balises meta hreflang dans la balise `<head>`
|
|
896
|
+
> Cela aide les moteurs de recherche à comprendre quelles langues sont disponibles sur la page
|
|
897
|
+
- lister toutes les traductions des pages dans le sitemap.xml en utilisant le schéma XML `http://www.w3.org/1999/xhtml`
|
|
898
|
+
>
|
|
899
|
+
- ne pas oublier d'exclure les pages préfixées du robots.txt (par exemple `/dashboard`, et `/fr/dashboard`, `/es/dashboard`)
|
|
900
|
+
>
|
|
901
|
+
- utiliser un composant Link personnalisé pour rediriger vers la page la plus localisée (par exemple en français `<a href="/fr/about">À propos</a>`)
|
|
902
|
+
>
|
|
903
|
+
|
|
904
|
+
Les développeurs oublient souvent de référencer correctement leurs pages selon les locales.
|
|
905
|
+
|
|
906
|
+
<Tab defaultTab="next-intl" group='techno'>
|
|
907
|
+
|
|
908
|
+
<TabItem label="next-i18next" value="next-i18next">
|
|
909
|
+
|
|
910
|
+
```ts fileName="i18n.config.ts"
|
|
911
|
+
export const locales = ["en", "fr"] as const;
|
|
912
|
+
export type Locale = (typeof locales)[number];
|
|
913
|
+
export const defaultLocale: Locale = "en";
|
|
914
|
+
|
|
915
|
+
export function localizedPath(locale: string, path: string) {
|
|
916
|
+
return locale === defaultLocale ? path : "/" + locale + path;
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
const ORIGIN = "https://example.com";
|
|
920
|
+
export function abs(locale: string, path: string) {
|
|
921
|
+
return ORIGIN + localizedPath(locale, path);
|
|
922
|
+
}
|
|
923
|
+
```
|
|
924
|
+
|
|
925
|
+
```tsx fileName="src/app/[locale]/about/layout.tsx"
|
|
926
|
+
import type { Metadata } from "next";
|
|
927
|
+
import { locales, defaultLocale, localizedPath } from "@/i18n.config";
|
|
928
|
+
|
|
929
|
+
export async function generateMetadata({
|
|
930
|
+
params,
|
|
931
|
+
}: {
|
|
932
|
+
params: { locale: string };
|
|
933
|
+
}): Promise<Metadata> {
|
|
934
|
+
const { locale } = params;
|
|
935
|
+
|
|
936
|
+
// Importer dynamiquement le fichier JSON correct
|
|
937
|
+
const messages = (
|
|
938
|
+
await import("@/../public/locales/" + locale + "/about.json")
|
|
939
|
+
).default;
|
|
940
|
+
|
|
941
|
+
const languages = Object.fromEntries(
|
|
942
|
+
locales.map((locale) => [locale, localizedPath(locale, "/about")])
|
|
943
|
+
);
|
|
944
|
+
|
|
945
|
+
return {
|
|
946
|
+
title: messages.title,
|
|
947
|
+
description: messages.description,
|
|
948
|
+
alternates: {
|
|
949
|
+
canonical: localizedPath(locale, "/about"),
|
|
950
|
+
languages: { ...languages, "x-default": "/about" },
|
|
951
|
+
},
|
|
952
|
+
};
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
export default async function AboutPage() {
|
|
956
|
+
return <h1>À propos</h1>;
|
|
957
|
+
}
|
|
958
|
+
```
|
|
959
|
+
|
|
960
|
+
```ts fileName="src/app/sitemap.ts"
|
|
961
|
+
import type { MetadataRoute } from "next";
|
|
962
|
+
import { locales, defaultLocale, abs } from "@/i18n.config";
|
|
963
|
+
|
|
964
|
+
export default function sitemap(): MetadataRoute.Sitemap {
|
|
965
|
+
const languages = Object.fromEntries(
|
|
966
|
+
locales.map((locale) => [locale, abs(locale, "/about")])
|
|
967
|
+
);
|
|
968
|
+
return [
|
|
969
|
+
{
|
|
970
|
+
url: abs(defaultLocale, "/about"),
|
|
971
|
+
lastModified: new Date(),
|
|
972
|
+
changeFrequency: "monthly",
|
|
973
|
+
priority: 0.7,
|
|
974
|
+
alternates: { languages },
|
|
975
|
+
},
|
|
976
|
+
];
|
|
977
|
+
}
|
|
978
|
+
```
|
|
979
|
+
|
|
980
|
+
```ts fileName="src/app/robots.ts"
|
|
981
|
+
import type { MetadataRoute } from "next";
|
|
982
|
+
import { locales, defaultLocale, localizedPath } from "@/i18n.config";
|
|
983
|
+
|
|
984
|
+
const ORIGIN = "https://example.com";
|
|
985
|
+
|
|
986
|
+
const expandAllLocales = (path: string) => [
|
|
987
|
+
localizedPath(defaultLocale, path),
|
|
988
|
+
...locales
|
|
989
|
+
.filter((locale) => locale !== defaultLocale)
|
|
990
|
+
.map((locale) => localizedPath(locale, path)),
|
|
991
|
+
];
|
|
992
|
+
|
|
993
|
+
export default function robots(): MetadataRoute.Robots {
|
|
994
|
+
const disallow = [
|
|
995
|
+
...expandAllLocales("/dashboard"),
|
|
996
|
+
...expandAllLocales("/admin"),
|
|
997
|
+
];
|
|
998
|
+
|
|
999
|
+
return {
|
|
1000
|
+
rules: { userAgent: "*", allow: ["/"], disallow },
|
|
1001
|
+
host: ORIGIN,
|
|
1002
|
+
sitemap: ORIGIN + "/sitemap.xml",
|
|
1003
|
+
};
|
|
1004
|
+
}
|
|
1005
|
+
```
|
|
1006
|
+
|
|
1007
|
+
</TabItem>
|
|
1008
|
+
<TabItem label="next-intl" value="next-intl">
|
|
1009
|
+
|
|
1010
|
+
```tsx fileName="src/app/[locale]/about/layout.tsx"
|
|
1011
|
+
import type { Metadata } from "next";
|
|
1012
|
+
import { locales, defaultLocale } from "@/i18n";
|
|
1013
|
+
import { getTranslations } from "next-intl/server";
|
|
1014
|
+
|
|
1015
|
+
function localizedPath(locale: string, path: string) {
|
|
1016
|
+
return locale === defaultLocale ? path : "/" + locale + path;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
export async function generateMetadata({
|
|
1020
|
+
params,
|
|
1021
|
+
}: {
|
|
1022
|
+
params: { locale: string };
|
|
1023
|
+
}): Promise<Metadata> {
|
|
1024
|
+
const { locale } = params;
|
|
1025
|
+
const t = await getTranslations({ locale, namespace: "about" });
|
|
1026
|
+
|
|
1027
|
+
const url = "/about";
|
|
1028
|
+
const languages = Object.fromEntries(
|
|
1029
|
+
locales.map((locale) => [locale, localizedPath(locale, url)])
|
|
1030
|
+
);
|
|
1031
|
+
|
|
1032
|
+
return {
|
|
1033
|
+
title: t("title"),
|
|
1034
|
+
description: t("description"),
|
|
1035
|
+
alternates: {
|
|
1036
|
+
canonical: localizedPath(locale, url),
|
|
1037
|
+
languages: { ...languages, "x-default": url },
|
|
1038
|
+
},
|
|
1039
|
+
};
|
|
1040
|
+
}
|
|
1041
|
+
|
|
1042
|
+
// ... Le reste du code de la page
|
|
1043
|
+
```
|
|
1044
|
+
|
|
1045
|
+
```tsx fileName="src/app/sitemap.ts"
|
|
1046
|
+
import type { MetadataRoute } from "next";
|
|
1047
|
+
import { locales, defaultLocale } from "@/i18n";
|
|
1048
|
+
|
|
1049
|
+
const origin = "https://example.com";
|
|
1050
|
+
|
|
1051
|
+
const formatterLocalizedPath = (locale: string, path: string) =>
|
|
1052
|
+
locale === defaultLocale ? origin + path : origin + "/" + locale + path;
|
|
1053
|
+
|
|
1054
|
+
export default function sitemap(): MetadataRoute.Sitemap {
|
|
1055
|
+
const aboutLanguages = Object.fromEntries(
|
|
1056
|
+
locales.map((l) => [l, formatterLocalizedPath(l, "/about")])
|
|
1057
|
+
);
|
|
1058
|
+
|
|
1059
|
+
return [
|
|
1060
|
+
{
|
|
1061
|
+
url: formatterLocalizedPath(defaultLocale, "/about"),
|
|
1062
|
+
lastModified: new Date(),
|
|
1063
|
+
changeFrequency: "monthly", // fréquence de modification
|
|
1064
|
+
priority: 0.7, // priorité dans le sitemap
|
|
1065
|
+
alternates: { languages: aboutLanguages }, // versions alternatives par langue
|
|
1066
|
+
},
|
|
1067
|
+
];
|
|
1068
|
+
}
|
|
1069
|
+
```
|
|
1070
|
+
|
|
1071
|
+
```tsx fileName="src/app/robots.ts"
|
|
1072
|
+
import type { MetadataRoute } from "next";
|
|
1073
|
+
import { locales, defaultLocale } from "@/i18n";
|
|
1074
|
+
|
|
1075
|
+
const origin = "https://example.com";
|
|
1076
|
+
const withAllLocales = (path: string) => [
|
|
1077
|
+
path,
|
|
1078
|
+
...locales
|
|
1079
|
+
.filter((locale) => locale !== defaultLocale)
|
|
1080
|
+
.map((locale) => "/" + locale + path),
|
|
1081
|
+
];
|
|
1082
|
+
|
|
1083
|
+
export default function robots(): MetadataRoute.Robots {
|
|
1084
|
+
const disallow = [
|
|
1085
|
+
...withAllLocales("/dashboard"),
|
|
1086
|
+
...withAllLocales("/admin"),
|
|
1087
|
+
];
|
|
1088
|
+
|
|
1089
|
+
return {
|
|
1090
|
+
rules: { userAgent: "*", allow: ["/"], disallow },
|
|
1091
|
+
host: origin,
|
|
1092
|
+
sitemap: origin + "/sitemap.xml",
|
|
1093
|
+
};
|
|
1094
|
+
}
|
|
1095
|
+
```
|
|
1096
|
+
|
|
1097
|
+
</TabItem>
|
|
1098
|
+
<TabItem label="intlayer" value="intlayer">
|
|
1099
|
+
|
|
1100
|
+
```typescript fileName="src/app/[locale]/about/layout.tsx"
|
|
1101
|
+
import { getIntlayer, getMultilingualUrls } from "intlayer";
|
|
1102
|
+
import type { Metadata } from "next";
|
|
1103
|
+
import type { LocalPromiseParams } from "next-intlayer";
|
|
1104
|
+
|
|
1105
|
+
export const generateMetadata = async ({
|
|
1106
|
+
params,
|
|
1107
|
+
}: LocalPromiseParams): Promise<Metadata> => {
|
|
1108
|
+
const { locale } = await params;
|
|
1109
|
+
|
|
1110
|
+
const metadata = getIntlayer("page-metadata", locale);
|
|
1111
|
+
|
|
1112
|
+
const multilingualUrls = getMultilingualUrls("/about");
|
|
1113
|
+
|
|
1114
|
+
return {
|
|
1115
|
+
...metadata,
|
|
1116
|
+
alternates: {
|
|
1117
|
+
canonical: multilingualUrls[locale as keyof typeof multilingualUrls],
|
|
1118
|
+
languages: { ...multilingualUrls, "x-default": "/about" },
|
|
1119
|
+
},
|
|
1120
|
+
};
|
|
1121
|
+
};
|
|
1122
|
+
|
|
1123
|
+
// ... Reste du code de la page
|
|
1124
|
+
```
|
|
1125
|
+
|
|
1126
|
+
```tsx fileName="src/app/sitemap.ts"
|
|
1127
|
+
import { getMultilingualUrls } from "intlayer";
|
|
1128
|
+
import type { MetadataRoute } from "next";
|
|
1129
|
+
|
|
1130
|
+
const sitemap = (): MetadataRoute.Sitemap => [
|
|
1131
|
+
{
|
|
1132
|
+
url: "https://example.com/about",
|
|
1133
|
+
alternates: {
|
|
1134
|
+
languages: { ...getMultilingualUrls("https://example.com/about") },
|
|
1135
|
+
},
|
|
1136
|
+
},
|
|
1137
|
+
];
|
|
1138
|
+
```
|
|
1139
|
+
|
|
1140
|
+
```tsx fileName="src/app/robots.ts"
|
|
1141
|
+
import { getMultilingualUrls } from "intlayer";
|
|
1142
|
+
import type { MetadataRoute } from "next";
|
|
1143
|
+
|
|
1144
|
+
const getAllMultilingualUrls = (urls: string[]) =>
|
|
1145
|
+
urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
|
|
1146
|
+
|
|
1147
|
+
// Règles pour le fichier robots.txt
|
|
1148
|
+
const robots = (): MetadataRoute.Robots => ({
|
|
1149
|
+
rules: {
|
|
1150
|
+
userAgent: "*",
|
|
1151
|
+
allow: ["/"],
|
|
1152
|
+
disallow: getAllMultilingualUrls(["/dashboard"]), // Interdire l'accès à toutes les URLs multilingues du dashboard
|
|
1153
|
+
},
|
|
1154
|
+
host: "https://example.com",
|
|
1155
|
+
sitemap: "https://example.com/sitemap.xml",
|
|
1156
|
+
});
|
|
1157
|
+
|
|
1158
|
+
export default robots;
|
|
1159
|
+
```
|
|
1160
|
+
|
|
1161
|
+
</TabItem>
|
|
1162
|
+
</Tab>
|
|
1163
|
+
|
|
1164
|
+
> Intlayer fournit une fonction `getMultilingualUrls` pour générer des URLs multilingues pour votre sitemap.
|
|
1165
|
+
|
|
1166
|
+
---
|
|
142
1167
|
|
|
143
1168
|
---
|
|
144
1169
|
|
|
145
|
-
##
|
|
1170
|
+
## Et le gagnant est…
|
|
1171
|
+
|
|
1172
|
+
Ce n’est pas simple. Chaque option a ses compromis. Voici comment je le vois :
|
|
1173
|
+
|
|
1174
|
+
<Columns>
|
|
1175
|
+
<Column>
|
|
1176
|
+
|
|
1177
|
+
**next-intl**
|
|
1178
|
+
|
|
1179
|
+
- le plus simple, léger, avec moins de décisions imposées. Si vous voulez une solution **minimale**, que vous êtes à l’aise avec des catalogues centralisés, et que votre application est de taille **petite à moyenne**.
|
|
1180
|
+
|
|
1181
|
+
</Column>
|
|
1182
|
+
<Column>
|
|
1183
|
+
|
|
1184
|
+
**next-i18next**
|
|
1185
|
+
|
|
1186
|
+
- mature, riche en fonctionnalités, avec beaucoup de plugins communautaires, mais un coût de configuration plus élevé. Si vous avez besoin de **l’écosystème de plugins d’i18next** (par exemple, des règles ICU avancées via des plugins) et que votre équipe connaît déjà i18next, en acceptant **plus de configuration** pour plus de flexibilité.
|
|
1187
|
+
|
|
1188
|
+
</Column>
|
|
1189
|
+
<Column>
|
|
1190
|
+
|
|
1191
|
+
**Intlayer**
|
|
1192
|
+
|
|
1193
|
+
- conçu pour Next.js moderne, avec un contenu modulaire, une sécurité de type, des outils, et moins de code répétitif. Si vous valorisez le **contenu limité au composant**, le **TypeScript strict**, les **garanties à la compilation**, le **tree-shaking**, et des outils de routage/SEO/éditeur **inclus d’office** - en particulier pour le **Next.js App Router**, les systèmes de design et les **bases de code larges et modulaires**.
|
|
1194
|
+
|
|
1195
|
+
</Column>
|
|
1196
|
+
</Columns>
|
|
1197
|
+
|
|
1198
|
+
Si vous préférez une configuration minimale et acceptez un certain câblage manuel, next-intl est un bon choix. Si vous avez besoin de toutes les fonctionnalités et que la complexité ne vous dérange pas, next-i18next fonctionne. Mais si vous voulez une solution moderne, évolutive, modulaire avec des outils intégrés, Intlayer vise à vous offrir cela prêt à l’emploi.
|
|
1199
|
+
|
|
1200
|
+
> **Alternative pour les équipes d'entreprise** : Si vous avez besoin d'une solution éprouvée qui fonctionne parfaitement avec des plateformes de localisation établies comme **Crowdin**, **Phrase**, ou d'autres systèmes professionnels de gestion de traduction, considérez **next-intl** ou **next-i18next** pour leur écosystème mature et leurs intégrations éprouvées.
|
|
1201
|
+
|
|
1202
|
+
> **Feuille de route future** : Intlayer prévoit également de développer des plugins qui fonctionneront par-dessus les solutions **i18next** et **next-intl**. Cela vous offrira les avantages d'Intlayer pour l'automatisation, la syntaxe et la gestion de contenu tout en conservant la sécurité et la stabilité fournies par ces solutions établies dans votre code applicatif.
|
|
1203
|
+
|
|
1204
|
+
## Étoiles GitHub (GitHub STARs)
|
|
1205
|
+
|
|
1206
|
+
Les étoiles GitHub sont un indicateur fort de la popularité d’un projet, de la confiance de la communauté et de sa pertinence à long terme. Bien qu’elles ne mesurent pas directement la qualité technique, elles reflètent combien de développeurs trouvent le projet utile, suivent son évolution et sont susceptibles de l’adopter. Pour estimer la valeur d’un projet, les étoiles aident à comparer la traction entre différentes alternatives et fournissent des informations sur la croissance de l’écosystème.
|
|
146
1207
|
|
|
147
|
-
|
|
148
|
-
- **Conservez les anciens catalogues en parallèle** : Assurez une transition progressive ; évitez un changement brutal.
|
|
149
|
-
- **Activez les vérifications strictes** : Laissez la détection à la compilation révéler les lacunes tôt.
|
|
150
|
-
- **Adoptez middleware et helpers** : Standardisez la détection de la locale et les balises SEO sur tout le site.
|
|
151
|
-
- **Mesurez les bundles** : Attendez-vous à des **réductions de taille des bundles** grâce à la suppression du contenu inutilisé.
|
|
1208
|
+
[](https://www.star-history.com/#i18next/next-i18next&amannn/next-intl&aymericzip/intlayer)
|
|
152
1209
|
|
|
153
1210
|
---
|
|
154
1211
|
|
|
155
1212
|
## Conclusion
|
|
156
1213
|
|
|
157
|
-
Les trois bibliothèques réussissent la localisation de base. La différence réside dans **la quantité de travail
|
|
1214
|
+
Les trois bibliothèques réussissent la localisation de base. La différence réside dans **la quantité de travail que vous devez fournir** pour obtenir une configuration robuste et évolutive dans **Next.js moderne** :
|
|
158
1215
|
|
|
159
|
-
- Avec **Intlayer**, le **contenu modulaire**,
|
|
160
|
-
- Si votre équipe valorise la **maintenabilité et la rapidité** dans une application multi-
|
|
1216
|
+
- Avec **Intlayer**, le **contenu modulaire**, **TypeScript strict**, **la sécurité à la compilation**, **les bundles optimisés par tree-shaking**, et **un App Router de première classe avec des outils SEO** sont des **paramètres par défaut**, et non des corvées.
|
|
1217
|
+
- Si votre équipe valorise la **maintenabilité et la rapidité** dans une application multi-langues pilotée par composants, Intlayer offre aujourd’hui l’expérience la **plus complète**.
|
|
161
1218
|
|
|
162
|
-
Consultez
|
|
1219
|
+
Consultez la documentation ['Pourquoi Intlayer ?'](https://intlayer.org/doc/why) pour plus de détails.
|