@intlayer/docs 8.0.0 → 8.0.1-canary.1

package/docs/fr/intlayer_with_hono.md

@@ -0,0 +1,418 @@
+---
+createdAt: 2025-08-23
+updatedAt: 2025-12-30
+title: i18n Hono - Comment traduire votre application Hono – guide 2026
+description: Découvrez comment rendre votre backend Hono multilingue. Suivez la documentation pour l'internationaliser (i18n) et le traduire.
+keywords:
+  - Internationalisation
+  - Documentation
+  - Intlayer
+  - Hono
+  - JavaScript
+  - Backend
+slugs:
+  - doc
+  - environment
+  - hono
+applicationTemplate: https://github.com/aymericzip/intlayer-hono-template
+history:
+  - version: 7.5.9
+    date: 2025-12-30
+    changes: Ajouter la commande init
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Historique initial
+---
+
+# Traduisez votre site web backend Hono en utilisant Intlayer | Internationalisation (i18n)
+
+`hono-intlayer` est un puissant middleware d'internationalisation (i18n) pour les applications Hono, conçu pour rendre vos services backend accessibles mondialement en fournissant des réponses localisées basées sur les préférences du client.
+
+### Cas d'Utilisation Pratiques
+
+- **Affichage des Erreurs Backend dans la Langue de l'Utilisateur** : Lorsqu'une erreur survient, l'affichage de messages dans la langue maternelle de l'utilisateur améliore la compréhension et réduit la frustration. Ceci est particulièrement utile pour les messages d'erreur dynamiques qui pourraient être affichés dans des composants front-end comme des toasts ou des modales.
+
+- **Récupération de Contenu Multilingue** : Pour les applications extrayant du contenu d'une base de données, l'internationalisation garantit que vous pouvez servir ce contenu en plusieurs langues. C'est crucial pour des plateformes comme les sites de commerce électronique ou les systèmes de gestion de contenu qui doivent afficher des descriptions de produits, des articles et d'autres contenus dans la langue préférée de l'utilisateur.
+
+- **Envoi d'E-mails Multilingues** : Qu'il s'agisse d'e-mails transactionnels, de campagnes marketing ou de notifications, l'envoi d'e-mails dans la langue du destinataire peut augmenter considérablement l'engagement et l'efficacité.
+
+- **Notifications Push Multilingues** : Pour les applications mobiles, l'envoi de notifications push dans la langue préférée d'un utilisateur peut améliorer l'interaction et la rétention. Cette touche personnelle peut rendre les notifications plus pertinentes et exploitables.
+
+- **Autres Communications** : Toute forme de communication depuis le backend, comme les messages SMS, les alertes système ou les mises à jour de l'interface utilisateur, bénéficie d'être dans la langue de l'utilisateur, garantissant la clarté et améliorant l'expérience utilisateur globale.
+
+En internationalisant le backend, votre application respecte non seulement les différences culturelles mais s'aligne également mieux avec les besoins du marché mondial, ce qui en fait une étape clé pour l'expansion de vos services à l'échelle mondiale.
+
+## Mise en Route
+
+### Installation
+
+Pour commencer à utiliser `hono-intlayer`, installez le paquet en utilisant npm :
+
+```bash packageManager="npm"
+npm install intlayer hono-intlayer
+npx intlayer init
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer hono-intlayer
+pnpm intlayer init
+```
+
+```bash packageManager="yarn"
+yarn add intlayer hono-intlayer
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer hono-intlayer
+bunx intlayer init
+```
+
+### Configuration
+
+Configurez les paramètres d'internationalisation en créant un fichier `intlayer.config.ts` à la racine de votre projet :
+
+```typescript fileName="intlayer.config.ts"  codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH_MEXICO,
+      Locales.SPANISH_SPAIN,
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH_MEXICO,
+      Locales.SPANISH_SPAIN,
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH_MEXICO,
+      Locales.SPANISH_SPAIN,
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+module.exports = config;
+```
+
+### Déclarez Votre Contenu
+
+Créez et gérez vos déclarations de contenu pour stocker les traductions :
+
+```typescript fileName="src/index.content.ts" contentDeclarationFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const indexContent = {
+  key: "index",
+  content: {
+    exampleOfContent: t({
+      en: "Example of returned content in English",
+      fr: "Exemple de contenu renvoyé en français",
+      "es-ES": "Ejemplo de contenu devuelto en español (España)",
+      "es-MX": "Ejemplo de contenu devuelto en español (México)",
+    }),
+  },
+} satisfies Dictionary;
+
+export default indexContent;
+```
+
+```javascript fileName="src/index.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const indexContent = {
+  key: "index",
+  content: {
+    exampleOfContent: t({
+      en: "Example of returned content in English",
+      fr: "Exemple de contenu renvoyé en français",
+      "es-ES": "Ejemplo de contenu devuelto en español (España)",
+      "es-MX": "Ejemplo de contenu devuelto en español (México)",
+    }),
+  },
+};
+
+export default indexContent;
+```
+
+```javascript fileName="src/index.content.cjs" codeFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const indexContent = {
+  key: "index",
+  content: {
+    exampleOfContent: t({
+      en: "Example of returned content in English",
+      fr: "Exemple de contenu renvoyé en français",
+      "es-ES": "Ejemplo de contenu devuelto en español (España)",
+      "es-MX": "Ejemplo de contenu devuelto en español (México)",
+    }),
+  },
+};
+
+module.exports = indexContent;
+```
+
+```json fileName="src/index.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "index",
+  "content": {
+    "exampleOfContent": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Example of returned content in English",
+        "fr": "Exemple de contenu renvoyé en français",
+        "es-ES": "Ejemplo de contenu devuelto en español (España)",
+        "es-MX": "Ejemplo de contenu devuelto en español (México)"
+      }
+    }
+  }
+}
+```
+
+> Vos déclarations de contenu peuvent être définies n'importe où dans votre application dès qu'elles sont incluses dans le répertoire `contentDir` (par défaut, `./src`). Et correspondent à l'extension de fichier de déclaration de contenu (par défaut, `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
+
+> Pour plus de détails, reportez-vous à la [documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md).
+
+### Configuration de l'Application Hono
+
+Configurez votre application Hono pour utiliser `hono-intlayer` :
+
+```typescript fileName="src/index.ts" codeFormat="typescript"
+import { Hono } from "hono";
+import { intlayer, t, getDictionary, getIntlayer } from "hono-intlayer";
+import dictionaryExample from "./index.content";
+
+const app = new Hono();
+
+// Charger le gestionnaire de requêtes d'internationalisation
+app.use("*", intlayer());
+
+// Routes
+app.get("/t_example", (c) => {
+  return c.text(
+    t({
+      en: "Example of returned content in English",
+      fr: "Exemple de contenu renvoyé en français",
+      "es-ES": "Ejemplo de contenu devuelto en español (España)",
+      "es-MX": "Ejemplo de contenu devuelto en español (México)",
+    })
+  );
+});
+
+app.get("/getIntlayer_example", (c) => {
+  return c.json(getIntlayer("index").exampleOfContent);
+});
+
+app.get("/getDictionary_example", (c) => {
+  return c.json(getDictionary(dictionaryExample).exampleOfContent);
+});
+
+export default app;
+```
+
+```javascript fileName="src/index.mjs" codeFormat="esm"
+import { Hono } from "hono";
+import { intlayer, t, getDictionary, getIntlayer } from "hono-intlayer";
+import dictionaryExample from "./index.content";
+
+const app = new Hono();
+
+// Charger le gestionnaire de requêtes d'internationalisation
+app.use("*", intlayer());
+
+// Routes
+app.get("/t_example", (c) => {
+  return c.text(
+    t({
+      en: "Example of returned content in English",
+      fr: "Exemple de contenu renvoyé en français",
+      "es-ES": "Ejemplo de contenu devuelto en español (España)",
+      "es-MX": "Ejemplo de contenu devuelto en español (México)",
+    })
+  );
+});
+
+app.get("/getIntlayer_example", (c) => {
+  return c.json(getIntlayer("index").exampleOfContent);
+});
+
+app.get("/getDictionary_example", (c) => {
+  return c.json(getDictionary(dictionaryExample).exampleOfContent);
+});
+
+export default app;
+```
+
+```javascript fileName="src/index.cjs" codeFormat="commonjs"
+const { Hono } = require("hono");
+const { intlayer, t, getDictionary, getIntlayer } = require("hono-intlayer");
+const dictionaryExample = require("./index.content");
+
+const app = new Hono();
+
+// Charger le gestionnaire de requêtes d'internationalisation
+app.use("*", intlayer());
+
+// Routes
+app.get("/t_example", (c) => {
+  return c.text(
+    t({
+      en: "Example of returned content in English",
+      fr: "Exemple de contenu renvoyé en français",
+      "es-ES": "Ejemplo de contenu devuelto en español (España)",
+      "es-MX": "Ejemplo de contenu devuelto en español (México)",
+    })
+  );
+});
+
+app.get("/getIntlayer_example", (c) => {
+  return c.json(getIntlayer("index").exampleOfContent);
+});
+
+app.get("/getDictionary_example", (c) => {
+  return c.json(getDictionary(dictionaryExample).exampleOfContent);
+});
+
+module.exports = app;
+```
+
+### Compatibilité
+
+`hono-intlayer` est entièrement compatible avec :
+
+- [`react-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/index.md) pour les applications React
+- [`next-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/next-intlayer/index.md) pour les applications Next.js
+- [`vite-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/vite-intlayer/index.md) pour les applications Vite
+
+Il fonctionne également sans problème avec n'importe quelle solution d'internationalisation dans divers environnements, y compris les navigateurs et les requêtes API. Vous pouvez personnaliser le middleware pour détecter la langue via les en-têtes ou les cookies :
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... Autres options de configuration
+  middleware: {
+    headerName: "my-locale-header",
+    cookieName: "my-locale-cookie",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... Autres options de configuration
+  middleware: {
+    headerName: "my-locale-header",
+    cookieName: "my-locale-cookie",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... Autres options de configuration
+  middleware: {
+    headerName: "my-locale-header",
+    cookieName: "my-locale-cookie",
+  },
+};
+
+module.exports = config;
+```
+
+Par défaut, `hono-intlayer` interprétera l'en-tête `Accept-Language` pour déterminer la langue préférée du client.
+
+> Pour plus d'informations sur la configuration et les sujets avancés, visitez notre [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
+
+### Configurer TypeScript
+
+`hono-intlayer` exploite les capacités robustes de TypeScript pour améliorer le processus d'internationalisation. Le typage statique de TypeScript garantit que chaque clé de traduction est prise en compte, réduisant le risque de traductions manquantes et améliorant la maintenabilité.
+
+![Autocomplétion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Erreur de traduction](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+Assurez-vous que les types autogénérés (par défaut dans ./types/intlayer.d.ts) sont inclus dans votre fichier tsconfig.json.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Vos configurations TypeScript existantes
+  "include": [
+    // ... Vos configurations TypeScript existantes
+    ".intlayer/**/*.ts", // Inclure les types auto-générés
+  ],
+}
+```
+
+### Extension VS Code
+
+Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'extension officielle **Intlayer VS Code Extension**.
+
+[Installer depuis le VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+Cette extension fournit :
+
+- **Autocomplétion** pour les clés de traduction.
+- **Détection d'erreurs en temps réel** pour les traductions manquantes.
+- **Aperçus en ligne** du contenu traduit.
+- **Actions rapides** pour créer et mettre à jour facilement les traductions.
+
+Pour plus de détails sur la façon d'utiliser l'extension, reportez-vous à la [documentation de l'extension Intlayer VS Code](https://intlayer.org/doc/vs-code-extension).
+
+### Configuration Git
+
+Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les commettre dans votre dépôt Git.
+
+Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier `.gitignore` :
+
+```plaintext fileName=".gitignore"
+# Ignorer les fichiers générés par Intlayer
+.intlayer
+```