Prise en main

Cliquez sur votre framework React pour commencer :

npx gtx-cli@latest

Qu’est-ce que General Translation ?

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

General Translation comprend les éléments suivants :

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

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

Si vous souhaitez utiliser votre propre bibliothèque i18n tout en profitant du service de traduction par IA de General Translation, veuillez consulter la documentation de notre CLI.

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

npx gtx-cli@latest

Lancez notre assistant de configuration pour commencer !

Fonctionnalités

⚛️ Traduisez des composants React entiers en ligne

• Un seul composant <T> ouvrant et fermant suffit pour traduire un composant React entier.
  • Pas besoin de refactorisation complexe ni d’appels de fonctions verbeux.
• Le contenu est en ligne, au même endroit que votre code.
  • Aucune clé, chaîne ou files supplémentaires ne sont nécessaires !
• La bibliothèque gère toute la logique i18n en arrière‑plan, pour que vous n’ayez pas à vous en occuper.
• 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 qu'enfant 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 ici !</button>
        </div>
      </div>
    </T> 
  );
}

🔎 Parité fonctionnelle 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 propulsé par l’IA

• Notre service de traduction gratuit propulsé par l’IA vous permet de créer 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 rédigez.
• Le contenu HTML est réorganisé et adapté en fonction de la langue.

🔧 Conçu pour les développeurs

• La configuration est simple et se fait en quelques minutes.
• Toutes les bibliothèques GT sont open source et peuvent fonctionner de façon autonome.
  • Vous pouvez utiliser votre propre prestataire de traduction ou notre service de traduction gratuit propulsé par l’IA.
• Finies les heures perdues à gérer des clés de traduction comme t('menu.header.title').
  • Écrivez simplement tout en ligne !

Consultez notre dépôt GitHub pour le code source et des projets d’exemple.

Pourquoi choisir General Translation ?

General Translation est une stack i18n complète, avec 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 propulsé 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’interface transmise en tant que children au 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>
        Tous les enfants du <b>composant {`<T>`}</b> seront traduits.
      </p>
      <p>
        Les éléments tels que les <a href='/'>liens</a>
        {', '}
        les <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

Avec une prise en charge de premier ordre de l’App Router de Next.js et des React Server Components, vous pouvez traduire les composants côté client comme côté 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. Rédiger le contenu en ligne ou dans des dictionaries

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

import { T } from 'gt-next';

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

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

{
  "greeting": "Hello, world!"
}

const dictionary = {
  greeting: "Hello, world!"
}
export default dictionary;

const dictionary = {
  greeting: "Hello, world!" 
}
export default dictionary;

import { useTranslations } from "gt-next";

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

4. Visualiser le contenu traduit en développement

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

Au lieu de devoir retoucher continuellement votre UI plusieurs fois en production, écrivez 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’UI 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 mis à jour en temps réel avec le nouveau contenu traduit.

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 !