Traduisez votre API Express Backend avec express-intlayer (i)

Créer des applications adaptées aux utilisateurs de différents pays et langues peut améliorer considérablement la portée de votre application et la satisfaction des utilisateurs. Avec express-intlayer, l'ajout de l'internationalisation (i18n) à votre backend Express est simple et efficace. Dans cet article, nous vous guiderons dans la configuration d'Express-intlayer pour rendre votre application Express multilingue, garantissant ainsi une meilleure expérience aux utilisateurs du monde entier.

Pourquoi internationaliser votre backend ?

L'internationalisation de votre backend permet à votre application de communiquer efficacement avec un public mondial. En diffusant du contenu dans la langue préférée de l'utilisateur, vous pouvez améliorer l'expérience utilisateur et rendre votre application plus accessible. Voici quelques raisons pratiques d’envisager d’internationaliser votre backend :

• Messages d'erreur localisés :Affichez les messages d'erreur dans la langue maternelle de l'utilisateur pour réduire la confusion et la frustration.
• Récupération de contenu multilingue : Diffusez le contenu de votre base de données dans plusieurs langues, parfait pour les sites de commerce électronique ou les systèmes de gestion de contenu.
• E-mails et notifications localisés : Envoyez des e-mails transactionnels, des campagnes marketing ou des notifications push dans la langue préférée du destinataire pour augmenter l'engagement.
• Communication utilisateur améliorée : Qu'il s'agisse de messages SMS, d'alertes système ou de mises à jour de l'interface utilisateur, leur diffusion dans la langue de l'utilisateur garantit la clarté et améliore l'expérience globale.

L'internationalisation de votre backend respecte non seulement les différences culturelles, mais ouvre également votre application à un public plus large, ce qui facilite sa mise à l'échelle mondiale.

Présentation d'Express-Inlayer

express-intlayer est un middleware conçu pour les applications Express qui s'intègre parfaitement à l'écosystème intlayer pour gérer la localisation sur le backend. Voici pourquoi c'est un excellent choix :

• Configuration facile : Configurez rapidement votre application Express pour diffuser des réponses en fonction des préférences locales de l'utilisateur.
• Prise en charge de TypeScript : Tirez parti de la saisie statique de TypeScript pour garantir que toutes les clés de traduction sont prises en compte, réduisant ainsi les erreurs.
• Configuration flexible : Personnalisez la façon dont les paramètres régionaux sont détectés, que ce soit via des en-têtes, des cookies ou d'autres méthodes.

Pour des informations plus détaillées, visitez la documentation complète.

Commencer

Parcourons les étapes pour configurer express-intlayer dans votre application Express.

Étape 1 : Installation

Tout d'abord, installez express-intlayer avec intlayer à l'aide de votre gestionnaire de packages préféré :

npm install intlayer express-intlayer

pnpm add intlayer express-intlayer

yarn add intlayer express-intlayer

Étape 2 : Configuration

Ensuite, créez un fichier intlayer.config.ts à la racine de votre projet. Ce fichier définira les paramètres régionaux pris en charge et la langue par défaut de votre application :

// intlayer.config.ts
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;

Dans cet exemple, nous prenons en charge l'anglais, le français, l'espagnol (Mexique) et l'espagnol (Espagne), l'anglais étant défini comme langue par défaut.

Étape 3 : Intégration du middleware express

Maintenant, intégrez express-intlayer dans votre application Express. Voici comment vous pouvez le configurer dans votre src/index.ts :

import express, { type Express } from "express";
import { intlayer, t } from "express-intlayer";

const app: Express = express();

// Use intlayer middleware
app.use(intlayer());

// Sample route: Serving localized content
app.get("/", (_req, res) => {
  res.send(
    t({
      en: "Example of returned content in English",
      fr: "Exemple de contenu renvoyé en français",
      "es-ES": "Ejemplo de contenido devuelto en español (España)",
      "es-MX": "Ejemplo de contenido devuelto en español (México)",
    })
  );
});

// Sample error route: Serving localized errors
app.get("/error", (_req, res) => {
  res.status(500).send(
    t({
      en: "Example of returned error content in English",
      fr: "Exemple de contenu d'erreur renvoyé en français",
      "es-ES": "Ejemplo de contenido de error devuelto en español (España)",
      "es-MX": "Ejemplo de contenido de error devuelto en español (México)",
    })
  );
});

app.listen(3000, () => {
  console.info(`Listening on port 3000`);
});

Dans cette configuration :

• Le middleware interne détecte les paramètres régionaux de l'utilisateur, généralement à partir de l'en-tête Accept-Language.
• La fonction t() renvoie la traduction appropriée en fonction des paramètres régionaux détectés.
• Si la langue demandée n'est pas disponible, elle revient à la langue par défaut (l'anglais dans ce cas).

Personnalisation de la détection des paramètres régionaux

Par défaut, express-intlayer utilise l'en-tête Accept-Language pour déterminer la langue préférée de l'utilisateur. Cependant, vous pouvez personnaliser ce comportement dans votre intlayer.config.ts :

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // Other configuration options
  middleware: {
    headerName: "my-locale-header",
    cookieName: "my-locale-cookie",
  },
};

export default config;

Cette flexibilité vous permet de détecter les paramètres régionaux via des en-têtes personnalisés, des cookies ou d'autres mécanismes, ce qui les rend adaptables à divers environnements et types de clients.

Compatibilité avec d'autres frameworks

express-intlayer fonctionne bien avec d'autres parties de l'écosystème intlayer, notamment :

• react-intlayer pour les applications React
• next-intlayer pour les applications Next.js

Cette intégration garantit une stratégie d'internationalisation cohérente sur l'ensemble de votre stack, du backend au frontend.

Tirer parti de TypeScript pour Robust i18n

Construit avec TypeScript, express-intlayer offre un typage puissant pour votre processus d'internationalisation. Cela signifie :

• Sécurité des types : Récupérez les clés de traduction manquantes au moment de la compilation.
• Maintenabilité améliorée : Gestion et mise à jour plus faciles des traductions grâce aux outils TypeScript.
• Types générés : Assurez-vous que vos traductions sont correctement référencées en incluant les types générés (par défaut à ./types/intlayer.d.ts) dans votre tsconfig.json.

Conclusion

Ajouter l'internationalisation à votre backend Express avec express-intlayer est une décision judicieuse pour rendre votre application plus accessible et conviviale pour un public mondial. Grâce à sa configuration facile, sa prise en charge de TypeScript et ses options de configuration flexibles, express-intlayer simplifie le processus de fourniture de contenu et de communications localisés.

Prêt à rendre votre backend multilingue ? Commencez à utiliser express-intlayer dans votre application Express dès aujourd'hui et offrez une expérience transparente aux utilisateurs du monde entier.

Pour plus de détails, les options de configuration et les modèles d'utilisation avancés, consultez la documentation officielle complète ou visitez le référentiel GitHub pour explorer le code source et contribuer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!