@intlayer/docs 5.7.8 → 5.8.0-canary.0

package/docs/fr/formatters.md

@@ -0,0 +1,239 @@
+---
+createdAt: 2024-08-13
+updatedAt: 2025-08-20
+title: Formatteurs
+description: Utilitaires de formatage sensibles à la locale basés sur Intl pour les nombres, pourcentages, devises, dates, temps relatifs, unités et notation compacte. Inclut un helper Intl mis en cache.
+keywords:
+  - Formatteurs
+  - Intl
+  - Nombre
+  - Devise
+  - Pourcentage
+  - Date
+  - Temps Relatif
+  - Unités
+  - Compact
+  - Internationalisation
+slugs:
+  - doc
+  - formatters
+---
+
+# Formatteurs Intlayer
+
+## Vue d'ensemble
+
+Intlayer fournit un ensemble d'aides légères construites au-dessus des API natives `Intl`, ainsi qu'un wrapper `Intl` mis en cache pour éviter de reconstruire à plusieurs reprises des formatteurs lourds. Ces utilitaires sont entièrement sensibles à la locale et peuvent être utilisés depuis le package principal `intlayer`.
+
+### Import
+
+```ts
+import {
+  Intl,
+  number,
+  percentage,
+  currency,
+  date,
+  relativeTime,
+  units,
+  compact,
+} from "intlayer";
+```
+
+Si vous utilisez React, des hooks sont également disponibles ; voir `react-intlayer/format`.
+
+## Intl mis en cache
+
+L'`Intl` exporté est un wrapper léger et mis en cache autour de l'`Intl` global. Il mémorise les instances de `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, ce qui évite de reconstruire le même formateur à plusieurs reprises.
+
+Comme la construction des formatteurs est relativement coûteuse, cette mise en cache améliore les performances sans changer le comportement. Le wrapper expose la même API que l'`Intl` natif, donc l'utilisation est identique.
+
+- La mise en cache est par processus et transparente pour les appelants.
+
+> Si `Intl.DisplayNames` n'est pas disponible dans l'environnement, un seul avertissement destiné aux développeurs est affiché (envisagez un polyfill).
+
+Exemple :
+
+```ts
+import { Intl } from "intlayer";
+
+const numberFormat = new Intl.NumberFormat("en-GB", {
+  style: "currency",
+  currency: "GBP",
+});
+numberFormat.format(1234.5); // "£1,234.50"
+```
+
+## Formatteurs
+
+Tous les helpers ci-dessous sont exportés depuis `intlayer`.
+
+### `number(value, options?)`
+
+Formate une valeur numérique en utilisant le regroupement et les décimales adaptés à la locale.
+
+- **value** : `number | string`
+- **options** : `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+Exemples :
+
+```ts
+import { number } from "intlayer";
+
+number(123456.789); // "123,456.789" (en en-US)
+number("1000000", { locale: "fr" }); // "1 000 000"
+number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
+```
+
+### `percentage(value, options?)`
+
+Formate un nombre en chaîne de pourcentage.
+
+Comportement : les valeurs supérieures à 1 sont interprétées comme des pourcentages entiers et normalisées (par exemple, `25` → `25%`, `0.25` → `25%`).
+
+- **value** : `number | string`
+- **options** : `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+Exemples :
+
+```ts
+import { percentage } from "intlayer";
+
+percentage(0.25); // "25%"
+percentage(25); // "25%"
+percentage(0.237, { minimumFractionDigits: 1 }); // "23,7%"
+```
+
+### `currency(value, options?)`
+
+Formate une valeur en devise localisée. Par défaut, la devise est `USD` avec deux chiffres fractionnaires.
+
+- **value** : `number | string`
+- **options** : `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Champs courants : `currency` (ex. `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
+
+Exemples :
+
+```ts
+import { currency } from "intlayer";
+
+currency(1234.5, { currency: "EUR" }); // "€1 234,50"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
+```
+
+### `date(date, optionsOrPreset?)`
+
+Formate une valeur de date/heure avec `Intl.DateTimeFormat`.
+
+- **date** : `Date | string | number`
+- **optionsOrPreset** : `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` ou l'un des préréglages :
+  - Préréglages : `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
+
+Exemples :
+
+```ts
+import { date } from "intlayer";
+
+date(new Date(), "short"); // par ex., "02/08/25, 14:30"
+date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
+```
+
+### `relativeTime(from, to = new Date(), options?)`
+
+Formate le temps relatif entre deux instants avec `Intl.RelativeTimeFormat`.
+
+- Passez "now" comme premier argument et la cible comme second pour obtenir une formulation naturelle.
+- **from** : `Date | string | number`
+- **to** : `Date | string | number` (par défaut `new Date()`)
+- **options** : `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
+  - L'`unit` par défaut est `"second"`.
+
+Exemples :
+
+```ts
+import { relativeTime } from "intlayer";
+
+const now = new Date();
+const in3Days = new Date(now.getTime() + 3 * 864e5);
+relativeTime(now, in3Days, { unit: "day" }); // "dans 3 jours"
+
+const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
+relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "il y a 2 heures"
+```
+
+### `units(value, options?)`
+
+Formate une valeur numérique en une chaîne d'unité localisée en utilisant `Intl.NumberFormat` avec `style: 'unit'`.
+
+- **value** : `number | string`
+- **options** : `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Champs courants : `unit` (par exemple, `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
+  - Valeurs par défaut : `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
+
+Exemples :
+
+```ts
+import { units } from "intlayer";
+
+units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kilometers"
+units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (dépendant de la locale)
+```
+
+### `compact(value, options?)`
+
+Formate un nombre en utilisant la notation compacte (par exemple, `1.2K`, `1M`).
+
+- **value** : `number | string`
+- **options** : `Intl.NumberFormatOptions & { locale?: LocalesValues }` (utilise `notation: 'compact'` en interne)
+
+Exemples :
+
+```ts
+import { compact } from "intlayer";
+
+compact(1200); // "1.2K"
+compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
+```
+
+## Notes
+
+- Tous les helpers acceptent des entrées de type `string` ; elles sont converties en interne en nombres ou dates.
+- La locale par défaut est celle configurée dans `internationalization.defaultLocale` si elle n'est pas fournie.
+- Ces utilitaires sont des wrappers légers ; pour un formatage avancé, utilisez directement les options standard d'`Intl`.
+
+## Points d'entrée et réexportations (`@index.ts`)
+
+Les formateurs résident dans le package core et sont réexportés depuis des packages de plus haut niveau pour garder des imports ergonomiques à travers les environnements d'exécution :
+
+Exemples :
+
+```ts
+// Code de l'application (recommandé)
+import { number, currency, date, Intl } from "intlayer";
+```
+
+### React
+
+Composants client :
+
+```ts
+import { useNumber, useCurrency, useDate } from "react-intlayer/format";
+// ou dans les applications Next.js
+import { useNumber, useCurrency, useDate } from "next-intlayer/client/format";
+```
+
+Composants serveur (ou runtime React Server) :
+
+```ts
+import { useNumber, useCurrency, useDate } from "intlayer/server/format";
+// ou dans les applications Next.js
+import { useNumber, useCurrency, useDate } from "next-intlayer/server/format";
+```
+
+> Ces hooks prendront en compte la locale depuis le `IntlayerProvider` ou `IntlayerServerProvider`
+
+## Historique de la documentation
+
+| Version | Date       | Modifications                            |
+| ------- | ---------- | ---------------------------------------- |
+| 5.8.0   | 2025-08-18 | Ajout de la documentation des formatters |

package/docs/fr/interest_of_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-14
-updatedAt: 2025-06-29
+updatedAt: 2025-08-20
 title: Intérêt d'Intlayer
 description: Découvrez les bénéfices et avantages d'utiliser Intlayer dans vos projets. Comprenez pourquoi Intlayer se démarque parmi les autres frameworks.
 keywords:
@@ -11,41 +11,104 @@ keywords:
   - Comparaison
 slugs:
   - doc
-  - concept
-  - interest
+  - why
 ---
 
-# Intlayer : Une méthode sur mesure pour traduire votre site web
+# Pourquoi devriez-vous envisager Intlayer ?
 
-**Intlayer** est une bibliothèque d'internationalisation conçue spécifiquement pour les développeurs JavaScript. Elle permet la déclaration de votre contenu partout dans votre code. Elle convertit la déclaration de contenu multilingue en dictionnaires structurés pour une intégration facile dans votre code. En utilisant TypeScript, **Intlayer** rend votre développement plus robuste et plus efficace.
+## Qu'est-ce qu'Intlayer ?
 
-## Exemple d'utilisation
+**Intlayer** est une bibliothèque d'internationalisation conçue spécifiquement pour les développeurs JavaScript. Elle permet la déclaration de votre contenu partout dans votre code. Elle convertit les déclarations de contenu multilingue en dictionnaires structurés pour une intégration facile dans votre code. En utilisant TypeScript, **Intlayer** rend votre développement plus robuste et plus efficace.
+
+## Pourquoi Intlayer a-t-il été créé ?
+
+Intlayer a été créé pour résoudre un problème courant qui affecte toutes les bibliothèques i18n classiques telles que `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl` et `vue-i18n`.
+
+Toutes ces solutions adoptent une approche centralisée pour lister et gérer votre contenu. Par exemple :
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── fr.json
+│   └── es.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Ou ici en utilisant des namespaces :
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Ce type d'architecture ralentit le processus de développement et rend la base de code plus complexe à maintenir pour plusieurs raisons :
+
+1.  **Pour chaque nouveau composant créé, vous devez :**
+    - Créer la nouvelle ressource/namespace dans le dossier `locales`
+    - Penser à importer le nouveau namespace dans votre page
+    - Traduire votre contenu (souvent fait manuellement par copier/coller depuis des fournisseurs d'IA)
+
+2.  **Pour chaque modification apportée à vos composants, vous devez :**
+    - Rechercher la ressource/namespace concernée (loin du composant)
+    - Traduire votre contenu
+    - S'assurer que votre contenu est à jour pour chaque locale
+    - Vérifier que votre namespace ne contient pas de clés/valeurs inutilisées
+    - S'assurer que la structure de vos fichiers JSON est la même pour toutes les locales
+
+Sur les projets professionnels utilisant ces solutions, des plateformes de localisation sont souvent utilisées pour aider à gérer la traduction de votre contenu. Cependant, cela peut rapidement devenir coûteux pour les grands projets.
+
+Pour résoudre ce problème, Intlayer adopte une approche qui scope votre contenu par composant et garde votre contenu proche de votre composant, comme nous le faisons souvent avec le CSS (`styled-components`), les types, la documentation (`storybook`), ou les tests unitaires (`jest`).
 
 ```bash codeFormat="typescript"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.ts
+        ├── index.test.tsx
+        ├── index.stories.tsx
         └── index.tsx
 ```
 
 ```bash codeFormat="commonjs"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.cjs
-        └── index.mjs
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
 ```bash codeFormat="esm"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.mjs
-        └── index.js
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
-```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.content.ts" codeFormat="typescript"
 import { t, type Dictionary } from "intlayer";
 
 const componentExampleContent = {
@@ -53,8 +116,8 @@ const componentExampleContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -62,18 +125,17 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
 import { t } from "intlayer";
 
 /** @type {import('intlayer').Dictionary} */
-// Déclaration du contenu d'exemple pour le composant
 const componentExampleContent = {
   key: "component-example",
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -81,18 +143,18 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { t } = require("intlayer");
 
 /** @type {import('intlayer').Dictionary} */
-// Déclaration du contenu d'exemple pour le composant
+// Contenu d'exemple du composant avec traductions
 const componentExampleContent = {
   key: "component-example",
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -100,7 +162,7 @@ const componentExampleContent = {
 module.exports = componentExampleContent;
 ```
 
-```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.tsx" codeFormat="typescript"
 import { useIntlayer } from "react-intlayer";
 
 export const ComponentExample = () => {
@@ -110,7 +172,7 @@ export const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
 import { useIntlayer } from "react-intlayer";
 
 const ComponentExample = () => {
@@ -120,7 +182,7 @@ const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { useIntlayer } = require("react-intlayer");
 
 const ComponentExample = () => {
@@ -130,27 +192,79 @@ const ComponentExample = () => {
 };
 ```
 
-## Pourquoi choisir Intlayer ?
-
-| Fonctionnalité                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Gestion de contenu propulsée par JavaScript** | Exploitez la flexibilité de JavaScript pour définir et gérer efficacement votre contenu.                                                                                                                                                                                                                                                                                                                                                                                      |
-| **Environnement à typage sécurisé**             | Exploitez TypeScript pour garantir que toutes vos définitions de contenu soient précises et sans erreur.                                                                                                                                                                                                                                                                                                                                                                      |
-| **Fichiers de contenu intégrés**                | Gardez vos traductions proches de leurs composants respectifs, améliorant ainsi la maintenabilité et la clarté.                                                                                                                                                                                                                                                                                                                                                               |
-| **Configuration Simplifiée**                    | Démarrez rapidement avec une configuration minimale, spécialement optimisée pour les projets Next.js.                                                                                                                                                                                                                                                                                                                                                                         |
-| **Support des composants serveur**              | Parfaitement adapté aux composants serveur Next.js, garantissant un rendu côté serveur fluide.                                                                                                                                                                                                                                                                                                                                                                                |
-| **Routage Amélioré**                            | Prise en charge complète du routage des applications Next.js, s'adaptant parfaitement aux structures d'application complexes.                                                                                                                                                                                                                                                                                                                                                 |
-| **Base de code organisée**                      | Gardez votre base de code plus organisée : 1 composant = 1 dictionnaire dans le même dossier.                                                                                                                                                                                                                                                                                                                                                                                 |
-| **Traduction automatique CI**                   | Remplissez automatiquement vos traductions dans votre CI en utilisant votre propre clé API OpenAI, éliminant ainsi le besoin d'une plateforme de localisation (L10n).                                                                                                                                                                                                                                                                                                         |
-| **Intégration du serveur MCP**                  | Fournit un serveur MCP (Model Context Protocol) pour l'automatisation dans l'IDE, permettant une gestion fluide du contenu et des flux de travail i18n directement au sein de votre environnement de développement. [En savoir plus](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md).                                                                                                                                                            |
-| **Support Markdown**                            | Importer et interpréter des fichiers markdown pour du contenu multilingue comme les politiques de confidentialité.                                                                                                                                                                                                                                                                                                                                                            |
-| **Éditeur Visuel Gratuit & CMS**                | Un éditeur visuel gratuit et un CMS sont disponibles si vous devez travailler avec des rédacteurs de contenu pour vos traductions, supprimant ainsi à nouveau le besoin d'une plateforme de localisation et permettant l'externalisation du contenu hors de la base de code.                                                                                                                                                                                                  |
-| **Récupération Simplifiée du Contenu**          | Plus besoin d'appeler votre fonction `t` pour chaque élément de contenu ; récupérez tout votre contenu directement en utilisant un seul hook.                                                                                                                                                                                                                                                                                                                                 |
-| **Implémentation cohérente**                    | La même implémentation pour les composants client et serveur, pas besoin de passer votre fonction `t` à travers chaque composant serveur.                                                                                                                                                                                                                                                                                                                                     |
-| **Contenu Tree-shakable**                       | Le contenu est tree-shakable, ce qui allège le bundle final.                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| **Rendu statique non bloquant**                 | Intlayer ne bloque pas le rendu statique contrairement à `next-intl`.                                                                                                                                                                                                                                                                                                                                                                                                         |
-| **Interopérabilité**                            | Permet l'interopérabilité avec [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_react-i18next.md), [next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_next-i18next.md), [next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_next-intl.md), et [react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_react-intl.md). |
-
-## Historique de la documentation
-
-- 5.5.10 - 2025-06-29 : Historique initial
+Cette approche vous permet de :
+
+1. **Augmenter la vitesse de développement**
+   - Les fichiers `.content.{{ts|mjs|cjs|json}}` peuvent être créés à l'aide d'une extension VSCode
+   - Les outils d'autocomplétion IA dans votre IDE (comme GitHub Copilot) peuvent vous aider à déclarer votre contenu, réduisant ainsi le copier/coller
+
+2. **Réduire la complexité de votre base de code**
+
+3. **Augmenter la maintenabilité de votre base de code**
+
+4. **Dupliquer plus facilement vos composants et leur contenu associé (Exemple : composants de connexion/inscription, etc.)**
+   - En limitant le risque d'impacter le contenu d'autres composants
+   - En copiant/collant votre contenu d'une application à une autre sans dépendances externes
+
+5. **Éviter de polluer votre base de code avec des clés/valeurs inutilisées pour des composants non utilisés**
+   - Si vous n'utilisez pas un composant, vous n'avez pas besoin d'importer son contenu
+   - Si vous supprimez un composant, vous vous souviendrez plus facilement de supprimer son contenu associé puisqu'il sera présent dans le même dossier
+
+6. **Réduire le coût de raisonnement pour les agents IA afin de déclarer votre contenu multilingue**
+   - L'agent IA n'aura pas à scanner l'ensemble de votre base de code pour savoir où implémenter votre contenu
+   - Les traductions peuvent facilement être réalisées par des outils d'autocomplétion IA dans votre IDE (comme GitHub Copilot)
+
+7. **Optimiser les performances de chargement**
+   - Si un composant est chargé de manière paresseuse (lazy-loaded), son contenu associé sera chargé en même temps
+
+## Fonctionnalités supplémentaires d'Intlayer
+
+| Fonctionnalité                                                                                                            | Description                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Fonctionnalité](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                   | **Support Multi-Frameworks**<br><br>Intlayer est compatible avec tous les principaux frameworks et bibliothèques, y compris Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, et bien d'autres.                                                                                                                                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.png?raw=true)       | **Gestion de contenu propulsée par JavaScript**<br><br>Exploitez la flexibilité de JavaScript pour définir et gérer votre contenu efficacement. <br><br> - [Déclaration de contenu](https://intlayer.org/doc/concept/content)                                                                                                                                                                                                            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Fichier de Déclaration de Contenu par Langue**<br><br>Accélérez votre développement en déclarant votre contenu une seule fois, avant la génération automatique.<br><br> - [Fichier de Déclaration de Contenu par Langue](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                             |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Environnement Typé**<br><br>Exploitez TypeScript pour garantir que vos définitions de contenu et votre code sont sans erreur, tout en bénéficiant de l'autocomplétion dans votre IDE.<br><br> - [Configuration TypeScript](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                                   |
+| ![Fonctionnalité](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                  | **Configuration Simplifiée**<br><br>Démarrez rapidement avec une configuration minimale. Ajustez facilement les paramètres pour l’internationalisation, le routage, l’IA, la compilation et la gestion du contenu.<br><br> - [Explorer l’intégration Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                               |
+| ![Fonctionnalité](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)            | **Récupération de contenu simplifiée**<br><br>Pas besoin d'appeler votre fonction `t` pour chaque contenu. Récupérez tout votre contenu directement en utilisant un seul hook.<br><br> - [Intégration React](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                      |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **Implémentation cohérente des composants serveur**<br><br>Parfaitement adapté aux composants serveur Next.js, utilisez la même implémentation pour les composants client et serveur, sans avoir besoin de passer votre fonction `t` à travers chaque composant serveur. <br><br> - [Composants Serveur](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **Base de code organisée**<br><br>Gardez votre base de code plus organisée : 1 composant = 1 dictionnaire dans le même dossier. Les traductions proches de leurs composants respectifs améliorent la maintenabilité et la clarté. <br><br> - [Comment fonctionne Intlayer](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                          |
+| ![Fonctionnalité](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                  | **Routage Amélioré**<br><br>Prise en charge complète du routage d’application, s’adaptant parfaitement aux structures d’applications complexes, pour Next.js, React, Vite, Vue.js, etc.<br><br> - [Explorer l’intégration Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                          |
+| ![Fonctionnalité](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                     | **Support Markdown**<br><br>Importer et interpréter les fichiers de localisation et le Markdown distant pour du contenu multilingue comme les politiques de confidentialité, la documentation, etc. Interpréter et rendre les métadonnées Markdown accessibles dans votre code.<br><br> - [Fichiers de contenu](https://intlayer.org/doc/concept/content/file)                                                                           |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **Éditeur Visuel Gratuit & CMS**<br><br>Un éditeur visuel gratuit et un CMS sont disponibles pour les rédacteurs de contenu, supprimant le besoin d'une plateforme de localisation. Gardez votre contenu synchronisé en utilisant Git, ou externalisez-le totalement ou partiellement avec le CMS.<br><br> - [Éditeur Intlayer](https://intlayer.org/doc/concept/editor) <br> - [CMS Intlayer](https://intlayer.org/doc/concept/cms)     |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Contenu Tree-shakable**<br><br>Contenu tree-shakable, réduisant la taille du bundle final. Charge le contenu par composant, excluant tout contenu inutilisé de votre bundle. Supporte le chargement paresseux pour améliorer l'efficacité du chargement de l'application. <br><br> - [Optimisation de la construction de l'application](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **Rendu Statique**<br><br>Ne bloque pas le rendu statique. <br><br> - [Intégration Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                                 |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **Traduction alimentée par l'IA**<br><br>Transformez votre site web en 231 langues en un seul clic grâce aux outils avancés de traduction alimentés par l'IA d'Intlayer utilisant votre propre fournisseur d'IA/clé API. <br><br> - [Intégration CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [CLI Intlayer](https://intlayer.org/doc/concept/cli) <br> - [Remplissage automatique](https://intlayer.org/doc/concept/auto-fill) |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **Intégration du serveur MCP**<br><br>Fournit un serveur MCP (Model Context Protocol) pour l'automatisation dans l'IDE, permettant une gestion fluide du contenu et des flux de travail i18n directement dans votre environnement de développement. <br><br> - [Serveur MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)                                                                                |
+| ![Fonctionnalité](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)             | **Extension VSCode**<br><br>Intlayer propose une extension VSCode pour vous aider à gérer votre contenu et vos traductions, construire vos dictionnaires, traduire votre contenu, et plus encore. <br><br> - [Extension VSCode](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                              |
+| ![Fonctionnalité](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)             | **Interopérabilité**<br><br>Permet l'interopérabilité avec react-i18next, next-i18next, next-intl et react-intl. <br><br> - [Intlayer et react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer et next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer et next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)                                                       |
+
+## Comparaison d'Intlayer avec d'autres solutions
+
+| Fonctionnalité                                                             | Intlayer                                                                                                                                                         | React-i18next / i18next                                                                  | React-Intl (FormatJS)                                         | LinguiJS                                                      | next-intl                                                     | next-i18next                                                  | vue-i18n                                                                       |
+| -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| **Traductions Près des Composants**                                        | Oui, contenu collé avec chaque composant                                                                                                                         | Non                                                                                      | Non                                                           | Non                                                           | Non                                                           | Non                                                           | Oui - utilisant les `Single File Components` (SFCs)                            |
+| **Intégration TypeScript**                                                 | Avancée, types stricts auto-générés                                                                                                                              | Basique ; configuration supplémentaire pour la sécurité                                  | Bonne, mais moins stricte                                     | Typages, nécessite une configuration                          | Bonne                                                         | Basique                                                       | Bonne (types disponibles ; configuration nécessaire pour la sécurité des clés) |
+| **Détection des traductions manquantes**                                   | Erreur/avertissement à la compilation                                                                                                                            | Principalement des chaînes de secours à l'exécution                                      | Chaînes de secours                                            | Nécessite une configuration supplémentaire                    | Chaînes de secours à l'exécution                              | Chaînes de secours à l'exécution                              | Chaînes de secours/avertissements à l'exécution (configurable)                 |
+| **Contenu riche (JSX/Markdown/composants)**                                | Support direct, même pour les nœuds React                                                                                                                        | Limité / interpolation uniquement                                                        | Syntaxe ICU, pas de vrai JSX                                  | Limité                                                        | Non conçu pour les nœuds riches                               | Limité                                                        | Limité (composants via `<i18n-t>`, Markdown via plugins)                       |
+| **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                                                           | Non                                                           | Non                                                           | Non                                                           | Non                                                                            |
+| **É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 | Non / disponible via des plateformes de localisation externes | Non / disponible via des plateformes de localisation externes | Non / disponible via des plateformes de localisation externes | Non / disponible via des plateformes de localisation externes                  |
+| **Routage localisé**                                                       | Intégré, support middleware                                                                                                                                      | Plugins ou configuration manuelle                                                        | Non intégré                                                   | Plugin/configuration manuelle                                 | Intégré                                                       | Intégré                                                       | Manuel via Vue Router (géré par Nuxt i18n)                                     |
+| **Génération dynamique des routes**                                        | Oui                                                                                                                                                              | Plugin/écosystème ou configuration manuelle                                              | Non fourni                                                    | Plugin/manuelle                                               | Oui                                                           | Oui                                                           | Non fourni (Nuxt i18n le fournit)                                              |
+| **Pluriel**                                                                | Modèles basés sur l'énumération ; voir la documentation                                                                                                          | Configurable (plugins comme i18next-icu)                                                 | Avancé (ICU)                                                  | Avancé (ICU/messageformat)                                    | Bon                                                           | Bon                                                           | Avancé (règles de pluriel intégrées)                                           |
+| **Formatage (dates, nombres, devises)**                                    | Formatteurs optimisés (Intl en interne)                                                                                                                          | Via des plugins ou usage personnalisé d’Intl                                             | Formatteurs ICU avancés                                       | Aides ICU/CLI                                                 | Bon (aides Intl)                                              | Bon (aides Intl)                                              | Formatteurs intégrés pour dates/nombres (Intl)                                 |
+| **Format de contenu**                                                      | .tsx, .ts, .js, .json, .md, .txt                                                                                                                                 | .json                                                                                    | .json, .js                                                    | .po, .json                                                    | .json, .js, .ts                                               | .json                                                         | .json, .js                                                                     |
+| **Support ICU**                                                            | En cours (ICU natif)                                                                                                                                             | Via plugin (i18next-icu)                                                                 | Oui                                                           | Oui                                                           | Oui                                                           | Via plugin (i18next-icu)                                      | Via un formateur/compilateur personnalisé                                      |
+| **Aides SEO (hreflang, sitemap)**                                          | Outils intégrés : aides pour sitemap, **robots.txt**, métadonnées                                                                                                | Plugins communautaires / manuel                                                          | Pas au cœur                                                   | Pas au cœur                                                   | Bon                                                           | Bon                                                           | Pas au cœur (Nuxt i18n fournit des aides)                                      |
+| **Écosystème / Communauté**                                                | Plus petit mais en croissance rapide et réactif                                                                                                                  | Le plus grand et le plus mature                                                          | Grand, entreprise                                             | En croissance, plus petit                                     | Taille moyenne, axé sur Next.js                               | Taille moyenne, axé sur Next.js                               | Important dans l'écosystème Vue                                                |
+| **Rendu côté serveur & Composants Serveur**                                | Oui, optimisé pour le SSR / Composants Serveur React                                                                                                             | Pris en charge, configuration nécessaire                                                 | Pris en charge dans Next.js                                   | Pris en charge                                                | Support complet                                               | Support complet                                               | SSR via Nuxt/Vue SSR (pas de RSC)                                              |
+| **Élimination des codes morts (chargement uniquement du contenu utilisé)** | Oui, par composant au moment de la compilation via les plugins Babel/SWC                                                                                         | Charge généralement tout (peut être amélioré avec des espaces de noms/découpage de code) | Charge généralement tout                                      | Pas par défaut                                                | Partiel                                                       | Partiel                                                       | Partiel (avec découpage de code/configuration manuelle)                        |
+| **Chargement paresseux**                                                   | Oui, par locale/par composant                                                                                                                                    | Oui (par exemple, backends/namespaces à la demande)                                      | Oui (bundles de locale fractionnés)                           | Oui (importations dynamiques de catalogues)                   | Oui (par route/par locale)                                    | Oui (par route/par locale)                                    | Oui (messages de locale asynchrones)                                           |
+| **Gestion des grands projets**                                             | Encourage la modularité, adapté aux design-systems                                                                                                               | Nécessite une bonne discipline des fichiers                                              | Les catalogues centraux peuvent devenir volumineux            | Peut devenir complexe                                         | Modulaire avec configuration                                  | Modulaire avec configuration                                  | Modulaire avec configuration Vue Router/Nuxt i18n                              |
+
+## Historique du document
+
+| Version | Date       | Modifications                     |
+| ------- | ---------- | --------------------------------- |
+| 5.8.0   | 2025-08-19 | Mise à jour du tableau comparatif |
+| 5.5.10  | 2025-06-29 | Historique initial                |

package/docs/fr/introduction.md

@@ -44,8 +44,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -63,8 +63,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -82,8 +82,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };