Démarrage rapide

Pour commencer

Cliquez sur votre framework React pour commencer :

Vous pouvez également lancer l’Assistant de configuration.

npx gtx-cli@latest

Qu'est-ce que General Translation ?

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

General Translation inclut les éléments suivants :

• Des bibliothèques open-source pour les développeurs React et Next.js
• Un service de traduction par IA
• Un package d'infrastructure complet pour la diffusion de contenu traduit

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, mais que vous voulez tout de même profiter du service de traduction par IA de General Translation, veuillez consulter la documentation de notre outil CLI.

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

npx gtx-cli@latest init

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 ou d'appels de fonctions compliqués.
• Le contenu est en ligne et au même endroit que votre code.
  • Pas de clés, de chaînes ou de fichiers supplémentaires nécessaires !
• La bibliothèque gère toute la logique i18n en arrière-plan, vous n'avez donc pas à vous en soucier.
• Les traductions sont toujours synchronisées avec votre code source.
• Les traductions contiennent des informations contextuelles sur le contenu, ce qui les rend plus précises.

export default function Page() {
  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> 
  );
}

🔎 Parité fonctionnelle avec les bibliothèques existantes

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

🧠 Service de traduction gratuit alimenté par l'IA

• Notre service de traduction gratuit alimenté par l'IA vous permet de créer des traductions pour votre application en quelques secondes.
• Le rechargement à chaud des traductions mettra automatiquement à jour vos traductions au fur et à mesure que vous les écrivez.
• Le contenu HTML est réorganisé et personnalisé selon la langue.

🔧 Conçu pour les développeurs

• La configuration est simple et peut être réalisée en quelques minutes.
• Toutes les bibliothèques GT sont open-source et fonctionnent de manière autonome.
  • Vous pouvez utiliser votre propre fournisseur de traduction ou notre service gratuit alimenté par l'IA.
• Fini 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 quelques exemples de projets.

Pourquoi choisir General Translation ?

General Translation est une solution i18n complète, incluant des bibliothèques pour développeurs, des traductions par IA, et un ensemble d'infrastructures complet pour les applications multilingues.

Vous pouvez combiner nos bibliothèques avec votre propre fournisseur 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 et 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. Traduire des composants React entiers, pas seulement des chaînes de caractères

L'interface utilisateur passée en tant qu'enfants du composant <T> sera traduite, peu importe la complexité de l'arbre 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>
        Des éléments comme <a href="/">liens</a>{', '}
        <button>boutons</button>{', '}
        et même <div> <div> <div> des composants imbriqués en profondeur </div> </div> </div>  sont traduits.
      </p>
    </T> 
  );
}

2. Traduire à la fois les composants client et serveur

Avec une prise en charge de premier ordre pour le App Router de Next.js et React Server Components, vous pouvez traduire aussi bien les composants côté client que côté serveur.

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

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

  return (
    <T>
      Hello, <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>
      Hello, <Var>{name}</Var>
    </T>
  );
}

3. Écrire du contenu en ligne ou dans des dictionnaires

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>Hello, World!</p>  {/* traduit <p>Hello, World!</p> */}
    </T>
  )
}

Sinon, si vous préférez utiliser l'approche historique du dictionnaire, vous pouvez écrire votre contenu dans un fichier dictionnaire :

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

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

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

import { useDict } from "gt-next";

export default function Page() {
  const d = useDict();
  return d('greeting'); // traduit "Hello, World!"
}

4. Voir le contenu traduit en développement

Pas besoin de vous soucier de l'apparence de l'interface dans différentes langues, General Translation traduira automatiquement votre contenu en temps réel pendant que vous l'écrivez.

Au lieu de devoir réviser continuellement votre interface plusieurs fois en production, écrivez simplement votre contenu en anglais une seule fois et laissez General Translation s'occuper du reste.

Vous avez besoin de voir à quoi ressemblent vos éléments d'interface en allemand avant de déployer ? Aucun problème, General Translation les traduira automatiquement pour vous !

5. Traduire le contenu à la demande

Les applications ont souvent besoin de traduire du contenu uniquement connu à l'exécution. Pour Next.js, les bibliothèques GT prennent en charge la traduction de contenu à la demande.

Quelques exemples courants incluent :

• Informations spécifiques à l'utilisateur
• Contenu stocké à distance
• Contenu généré dynamiquement

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

Commencer

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 à conquérir le monde ? Commencez à traduire votre application en quelques minutes et touchez des utilisateurs partout dans le monde !