Intro

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

Je l’ai donc internationalisé. En 5 minutes. Voici comment :

Découvrez-le ici.

Consultez le code ici.

Pourquoi internationaliser ?

Bien souvent, les développeurs sont tellement absorbés par la création du produit qu'ils en oublient les utilisateurs. Pour des applications comme les chatbots IA, qui sont par nature multilingues et conçus pour être utilisés par tout le monde, à quoi bon 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 20 % le parlent. Si vous travaillez sur une startup et que votre produit n'est disponible qu'en anglais, ne vous privez-vous pas de plus de 80 % de clients potentiels ?

En réalité, si 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 ce n'est pas tout : elles ne font même pas les traductions. Vous devez toujours faire appel à des traducteurs, gérer des dictionnaires contenant des centaines de clés et composer avec toutes les autres contraintes de l'internationalisation. Même des modifications mineures du texte peuvent prendre des heures, voire des jours, avant d'être traduites.

Jusqu'à aujourd'hui.

Je travaille sur une nouvelle bibliothèque appelée gt-next qui permet d'internationaliser facilement votre application en quelques minutes. C'est une solution tout-en-un pour tous vos besoins en internationalisation, notamment 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 du dépôt, puis le cloner :

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 ça m’est arrivé, essayez d’utiliser cette branch.

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

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

npm install gt-next gt

Configuration

Ensuite, j’ai lancé l’outil de configuration de la CLI et répondu "Oui" à toutes les questions :

npx gt init

Après cela, j’ai ajouté quelques paramètres régionaux au plugin next.config.js :

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

J'aurais pu ajouter d'autres paramètres régionaux, mais je voulais simplement tester le chatbot avec quelques langues différentes. N'hésitez pas à en ajouter autant que vous le souhaitez !

Voici la liste complète de ceux pris en charge par gt-next.

Comment ça marche

Le cœur de la bibliothèque est le composant <T>.

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

Tout ce qui est entouré par le composant <T> peut être traduit. L’outil de configuration de la CLI utilise un parseur Babel personnalisé pour parcourir 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 aux autres bibliothèques :

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

Lancer le chatbot

Bien sûr, je n’ai pas oublié d’inclure toutes les variables d’environnement.

cp .env.example .env.local

J’ai dû créer un compte gratuit sur le tableau de bord de General Translation pour obtenir une clé 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 passé la langue de mon navigateur en français, et l’interface s’est affichée en français. Même chose pour l’espagnol et le chinois.

Simple, non ?

J’ai rendu le changement de langue encore plus simple 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 de la CLI a bien traduit tous les éléments React, il restait quelques chaînes de caractères récalcitrantes codées en dur.

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

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

J’ai nettoyé cela en important le Hook useGT depuis gt-next/client et en l’utilisant pour traduire les chaînes de caractères :

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

Et voilà ! Tout le texte du chatbot était désormais internationalisé et disponible dans toutes les langues.

Déploiement en production

Déployer en production a été encore plus simple. J’ai remplacé ma variable d’environnement GT_API_KEY par une clé API de production, puis j’ai exécuté la commande translate :

npx gt translate --locales es fr zh

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

Conclusion

L'internationalisation du chatbot s'est faite en toute simplicité. Je n'ai pas eu à bidouiller des fichiers de configuration, des dictionnaires ou un routage complexe.

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

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

Si vous souhaitez utiliser General Translation, consultez le site web, le dépôt GitHub ou la documentation.