Traduire votre Nest backend avec Intlayer | Internationalisation (i18n)

express-intlayer est un middleware puissant d'internationalisation (i18n) pour les applications Express, conçu pour rendre vos services backend accessibles à l'échelle mondiale en fournissant des réponses localisées basées sur les préférences du client. Puisque NestJS est construit sur Express, vous pouvez intégrer sans effort express-intlayer dans vos applications NestJS pour gérer efficacement le contenu multilingue.

Pour commencer

Créer un nouveau projet NestJS

npm install -g @nestjs/clinest new my-nest-app

Installation

Pour commencer à utiliser express-intlayer, installez le package avec npm :

npx intlayer@canary init --interactive    # v9# npx intlayer init                       # v8

l'indicateur --interactive est facultatif. Utilisez intlayer-cli init si vous êtes un agent IA.

Cette commande détectera votre environnement et installera les packages requis. Par exemple :

npm install intlayer express-intlayer

Configurer tsconfig.json

Pour utiliser Intlayer avec TypeScript, assurez-vous que votre tsconfig.json est configuré pour prendre en charge les modules ES. Vous pouvez le faire en définissant les options module et moduleResolution sur nodenext.

{  compilerOptions: {    module: "nodenext",    moduleResolution: "nodenext",    // ... autres options  },}

Configuration

Configurez les paramètres d'internationalisation en créant un fichier intlayer.config.ts à la racine de votre projet :

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

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Déclarez Votre Contenu

Créez et gérez vos déclarations de contenu pour stocker les traductions :

Vos déclarations de contenu peuvent être définies n'importe où dans votre application dès lors qu'elles sont incluses dans le répertoire contentDir (par défaut, ./src). Et correspondent à l'extension des fichiers de déclaration de contenu (par défaut, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

Pour plus de détails, référez-vous à la documentation sur la déclaration de contenu.

Configuration du Middleware Express

Intégrez le middleware express-intlayer dans votre application NestJS pour gérer l'internationalisation :

import { MiddlewareConsumer, Module, NestModule } from "@nestjs/common";import { AppController } from "./app.controller";import { AppService } from "./app.service";import { intlayer } from "express-intlayer";@Module({  imports: [],  controllers: [AppController],  providers: [AppService],})export class AppModule implements NestModule {  configure(consumer: MiddlewareConsumer) {    consumer.apply(intlayer()).forRoutes("*"); // Appliquer à toutes les routes  }}

Utiliser les traductions dans vos services ou contrôleurs

Vous pouvez maintenant utiliser la fonction getIntlayer pour accéder aux traductions dans vos services ou contrôleurs :

import { Injectable } from "@nestjs/common";import { getIntlayer } from "express-intlayer";@Injectable()export class AppService {  getHello(): string {    return getIntlayer("app").greet;  }}

Compatibilité

express-intlayer est entièrement compatible avec :

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

Il fonctionne également parfaitement avec toute solution d'internationalisation dans divers environnements, y compris les navigateurs et les requêtes API. Vous pouvez personnaliser le middleware pour détecter la locale via les en-têtes ou les cookies :

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;

Par défaut, express-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, consultez notre documentation.

Configurer TypeScript

express-intlayer exploite les puissantes capacités 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 ainsi le risque de traductions manquantes et améliorant la maintenabilité.

Assurez-vous que les types générés automatiquement (par défaut dans ./types/intlayer.d.ts) sont inclus dans votre fichier tsconfig.json.

{  // ... Vos configurations TypeScript existantes  include: [    // ... Vos configurations TypeScript existantes    ".intlayer/**/*.ts", // Inclure les types générés automatiquement  ],}

Extension VS Code

Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l’extension officielle Intlayer pour VS Code.

Installer depuis le Marketplace VS Code

Cette extension offre :

• 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 l’utilisation de l’extension, consultez la documentation de l’extension Intlayer pour VS Code.

Configuration Git

Il est recommandé d’ignorer les fichiers générés par Intlayer. Cela vous permet d’éviter de les committer dans votre dépôt Git.

Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier .gitignore :

# Ignorer les fichiers générés par Intlayer.intlayer