Pour commencer

Cliquez sur votre framework React pour démarrer :

npx gtx-cli@latest

Qu’est-ce que General Translation ?

General Translation est une pile d’internationalisation (i18n) complète qui vous permet de déployer des applications multilingues rapidement et facilement.

General Translation comprend :

• Des bibliothèques open source pour développeurs pour React et Next.js
• Un service de traduction alimenté par l’IA
• Un ensemble d’infrastructure complet pour la diffusion du contenu de traduction

Si vous souhaitez utiliser les bibliothèques GT avec votre propre prestataire de traduction, consultez notre documentation autonome pour gt-next et gt-react.

Si vous souhaitez utiliser votre propre bibliothèque i18n tout en bénéficiant du service de traduction par IA de General Translation, consultez la documentation de notre CLI.

Si vous souhaitez utiliser General Translation pour traduire vos fichiers JSON, Markdown ou MDX, consultez la documentation de notre CLI.

npx gtx-cli@latest init

Lancez notre assistant de configuration pour commencer !

Fonctionnalités

⚛️ Traduire des composants React entiers en ligne

• Un simple composant <T> ouvrant/fermant suffit pour traduire un composant React entier.
  • Pas besoin de refactoring complexe ni d’appels de fonctions verbeux.
• Le contenu est en ligne, au même endroit que votre code.
  • Aucune clé, aucune chaîne, aucun fichier supplémentaire n’est nécessaire !
• La bibliothèque gère toute la logique i18n en arrière-plan, pour que vous n’ayez pas à vous en soucier.
• Les traductions restent toujours synchronisées avec votre code source.
• Les traductions incluent des informations contextuelles sur le contenu, ce qui les rend plus précises.

export default function Page() {
  return (
    <T>
      <p>Vous pouvez écrire n'importe quel JSX en tant que contenu du composant {'<T>'}.</p>
      <p>
        Par exemple, vous pouvez écrire un <a href='/'>lien</a> et le texte sera
        traduit en contexte.
      </p>
      <div>
        <div>
          <p>Même les composants profondément imbriqués sont traduits en contexte.</p>
          <button>Cliquez ici !</button>
        </div>
      </div>
    </T> 
  );
}

🔎 Parité des fonctionnalités avec les bibliothèques existantes

• Les bibliothèques GT prennent également en charge les mêmes fonctionnalités que des bibliothèques existantes comme i18next, react-intl et next-intl.
• Des fonctionnalités telles que les dictionaries, les pluriels, les devises et le routage automatique sont toutes prises en charge.

🧠 Service de traduction gratuit avec IA

• Notre service de traduction gratuit avec IA vous permet de générer des traductions pour votre application en quelques secondes.
• Le rechargement à chaud des traductions met automatiquement à jour vos traductions au fur et à mesure que vous les écrivez.
• Le contenu HTML est réorganisé et adapté en fonction de la langue.

🔧 Pensé pour les développeurs

• La mise en place est simple et prend quelques minutes.
• Toutes les bibliothèques GT sont open source et peuvent fonctionner indépendamment.
  • Vous pouvez utiliser votre propre fournisseur de traduction ou notre service de traduction gratuit, propulsé par l’IA.
• Finie la perte de temps à gérer des clés de traduction comme t('menu.header.title').
  • Écrivez simplement tout en ligne !

Consultez notre repo GitHub pour le code source et des exemples de projets.

Pourquoi choisir General Translation ?

General Translation constitue une stack i18n complète, comprenant des bibliothèques pour développeurs, des traductions par IA et une infrastructure clé en main pour les applications multilingues.

Vous pouvez combiner nos bibliothèques avec votre propre prestataire de traduction, ou utiliser notre service de traduction gratuit, alimenté par l’IA, avec votre propre bibliothèque i18n.

Pour une expérience i18n fluide de bout en bout, nous recommandons d’utiliser nos bibliothèques avec notre service de traduction.

Avec les bibliothèques GT comme gt-react et gt-next, vous pouvez :

1. Traduisez des composants React entiers, pas seulement des chaînes

L’UI passée comme children du composant <T> sera traduite, quelle que soit la complexité de l’arborescence JSX. Par exemple :

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>
        Tout le contenu enfant du <b>composant {`<T>`}</b> sera traduit.
      </p>
      <p>
        Des éléments comme les <a href='/'>liens</a>
        {', '}
        <button>boutons</button>
        {', '}
        et même les{' '}
        <div>
          {' '}
          <div>
            {' '}
            <div> composants profondément imbriqués </div>{' '}
          </div>{' '}
        </div>{' '}
        sont traduits.
      </p>
    </T> 
  );
}

2. Traduire les composants client et serveur

Grâce à la prise en charge native de l’App Router de Next.js et des React Server Components, vous pouvez traduire aussi bien les composants client que les composants serveur.

import getName from '@/getName';
import { T, Var } from 'gt-next';

export default async function MyServerComponent() {
  const name = await getName();

  return (
    <T>
      Bonjour, <Var>{name}</Var>
    </T>
  );
}

'use client';

import { useState } from 'react';
import { T, Var } from 'gt-next';

export default function MyClientComponent() {
  const [name, setName] = useState('Alice');

  return (
    <T>
      Bonjour, <Var>{name}</Var>
    </T>
  );
}

3. Écrivez le contenu en ligne ou dans des dictionaries

Le contenu JSX placé à l’intérieur d’un composant <T> est marqué pour la traduction :

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>Bonjour, monde !</p> {/* traduit <p>Hello, world!</p> */}
    </T>
  );
}

Alternatively, if you prefer using the historic dictionary approach, you can write your content in a dictionary file:

{
  "greeting": "Bonjour, le monde !"
}

const dictionary = {
  greeting: "Bonjour, le monde !"
}
export default dictionary;

const dictionary = {
  greeting: "Bonjour, le monde !" 
}
export default dictionary;

import { useTranslations } from "gt-next";

export default function Page() {
  const t = useTranslations();
  return t('greeting'); // traduit « Hello, world! »
}

4. Afficher le contenu traduit en développement

Pas besoin de vous soucier de l’apparence de votre interface dans différentes langues, General Translation traduira automatiquement votre contenu en temps réel, au fur et à mesure que vous l’écrivez.

Plutôt que de devoir retoucher votre interface à répétition en production, rédigez simplement votre contenu en anglais une seule fois et laissez General Translation s’occuper du reste.

Besoin de voir à quoi ressemblent vos éléments d’interface en allemand avant le déploiement ? Aucun problème, General Translation les traduira automatiquement pour vous !

5. Traduire du contenu à la demande

Les applications doivent souvent traduire du contenu uniquement disponible au moment de l’exécution. Avec Next.js, les bibliothèques GT permettent de traduire du contenu à la demande.

Exemples courants :

• Informations propres à l’utilisateur
• Contenu stocké à distance
• Contenu généré dynamiquement

Une fois la traduction chargée, votre composant est réécrit en temps réel avec le nouveau contenu traduit.

Bien démarrer

npm i gt-next

yarn add gt-next

bun add gt-next

pnpm add gt-next

npm i gt-react

yarn add gt-react

bun add gt-react

pnpm add gt-react

Prêt à passer à l’international ? Commencez à traduire votre application en quelques minutes et touchez des utilisateurs dans le monde entier !