Intro

L'autre jour, je suis tombé sur un template de chatbot IA Next.js sur Vercel. À ma grande surprise, il n'était disponible qu'en anglais.

Alors je l'ai internationalisé. En 5 minutes. Voici comment :

Testez-le ici.

Consultez le code ici.

Pourquoi internationaliser ?

Très souvent, les développeurs sont tellement concentrés sur la création du produit qu'ils en oublient les utilisateurs. Pour des apps comme les chatbots IA, qui sont par nature multilingues et conçus pour être utilisés par tout le monde, à quoi sert un chatbot qui ne prend en charge que l’anglais ?

La plupart des gens dans le monde ne parlent même pas anglais. En fait, seulement environ 20 % le parlent. Si vous travaillez sur une startup et que votre produit n’est disponible qu’en anglais, ne passez-vous pas à côté de plus de 80 % de vos clients potentiels ?

Il se trouve qu’il y a une raison pour laquelle la plupart des produits ne sont disponibles qu’en anglais : c’est parce que l’internationalisation est difficile.

Les bibliothèques existantes comme next-intl ou next-i18next sont pénibles à configurer et à utiliser. Et en plus, elles ne gèrent même pas les traductions. Vous devez quand même faire appel à des traducteurs, gérer des dictionnaires avec des centaines de clés et affronter tous les autres points douloureux de l’internationalisation. Même des modifications mineures de texte peuvent prendre des heures, voire des jours, à être traduites.

Jusqu’à maintenant.

Je travaille sur une nouvelle bibliothèque appelée gt-next qui facilite l’internationalisation de votre app en quelques minutes. C’est une solution tout-en-un pour tous vos besoins d’internationalisation, y compris les traductions, le routage et bien plus encore.

J’ai utilisé gt-next pour internationaliser le chatbot IA de Vercel en 5 minutes.

Installation

J’ai commencé par créer un fork et cloner le dépôt :

git clone https://github.com/vercel/ai-chatbot.git

Ensuite, j’ai installé les dépendances :

npm install

Si vous rencontrez vous aussi des conflits de dépendances comme moi, essayez d’utiliser cette branche.

git clone -b base https://github.com/General-Translation/ai-chatbot.git

Ensuite, j’ai installé les paquets gt-next et gt-next-cli.

npm install gt-next gt-next-cli

Configuration

Ensuite, j’ai exécuté l’outil de configuration CLI et choisi « Yes » pour chaque question :

npx gt-next-cli setup

Ensuite, j'ai ajouté quelques locales au plugin next.config.js :

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // français, espagnol, chinois
})

J’aurais pu ajouter plus de locales, mais je voulais simplement tester le chatbot avec quelques langues différentes. N’hésitez pas à ajouter autant de locales que vous le souhaitez !

Voici la liste de toutes celles prises en charge par gt-next.

Comment ça marche

L’élément central de la bibliothèque est le composant <T>.

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>Vous pouvez écrire n'importe quel JSX en tant qu'enfants du composant {'<T>'}.</p>
      <p>
        Par exemple, vous pouvez écrire un <a href="/">lien</a>
        et faire traduire le texte en contexte.
      </p>
      <div>
        <div>
          <p>Même les composants profondément imbriqués sont traduits en contexte.</p>
          <button>Cliquez-moi !</button>
        </div>
      </div>
    </T>
  )
}

Tout ce qui est inclus dans le composant <T> peut être traduit. L’outil de configuration CLI utilise un parseur babel personnalisé pour analyser notre base de code et entoure automatiquement de <T> tous les composants React qu’il trouve.

L’utilisation du composant <T> présente plusieurs avantages par rapport à d’autres bibliothèques :

• Vous n’aurez jamais à gérer des dictionnaires ni à manipuler des clés.
• Les traductions sont toujours à jour et restent synchronisées avec le code.
• Les traductions incluent automatiquement toutes les informations contextuelles environnantes, ce qui permet d’obtenir de meilleures traductions.

Exécuter le chatbot

Bien sûr, je n’allais pas oublier d’inclure toutes les variables d’environnement.

cp .env.example .env.local

J'ai dû créer un compte gratuit sur le dashboard de General Translation afin d'obtenir une clé d'API. Cela n'a pris que quelques clics.

Après avoir renseigné toutes les variables d'environnement requises, j'ai lancé le chatbot :

npm run dev

Et voilà ! J’ai changé la langue de mon navigateur en français et l’interface est passée en français. Idem pour l’espagnol et le chinois.

Simple, non ?

J’ai encore simplifié le changement de langue en ajoutant un sélecteur de langue dans l’en‑tête du chatbot.

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... code existant ... */}
    <LocaleSelector />
    {/* ... code existant ... */}
  );
}

Ça a marché immédiatement.

Nettoyage

Même si l’outil de configuration CLI a fait du bon travail en traduisant tous les éléments React, il restait quelques chaînes récalcitrantes qui étaient codées en dur.

Par exemple, le fichier model-selector.tsx contenait quelques descriptions de modèles de chat codées en dur :

{
  id: 'chat-model-large',
  name: 'Modèle large',
  description: 'Modèle large pour les tâches complexes à plusieurs étapes',
},

J’ai corrigé cela en important le hook useGT depuis gt-next/client et en l’utilisant pour traduire les chaînes :

import { useGT } from 'gt-next/client';
const t = useGT();
{
  id: 'chat-model-large',
  name: t('Grand modèle'),
  description: t('Grand modèle pour les tâches complexes en plusieurs étapes'),
},

Et voilà ! Tous les textes du chatbot étaient désormais internationalisés et disponibles dans n'importe quelle langue.

Déploiement en production

Le déploiement en production a été encore plus simple. J’ai remplacé ma variable d’environnement GT_API_KEY par une clé d’API de production et j’ai exécuté la commande de traduction :

npx gt-next-cli translate --locales es fr zh

Enfin, j’ai déployé le chatbot sur Vercel.

Conclusion

L'expérience d'internationalisation du chatbot a été un jeu d'enfant. Je n'ai pas eu à toucher à des fichiers de configuration, des dictionnaires ou à du routage complexe.

En quelques minutes, j'avais un chatbot IA entièrement fonctionnel et internationalisé, disponible en espagnol, en français et en chinois.

Si le code vous intéresse, vous pouvez le trouver ici.

Si vous êtes intéressé par General Translation, consultez le site, le repo GitHub ou la documentation.