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 pile i18n complète, incluant des bibliothèques pour développeurs, des traductions IA, et un package d'infrastructure complet pour les applications multilingues.

Vous pouvez mélanger et assortir 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

L'interface utilisateur passée comme 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 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 à la fois les composants client et serveur

Avec un support de première classe pour le App Router de Next.js et les React Server Components, vous pouvez traduire à la fois les composants client et 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. Écrire le contenu en ligne ou dans des dictionnaires

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, le monde !</p>  {/* traduit <p>Bonjour, le monde !</p> */}
    </T>
  )
}

Alternativement, si vous préférez utiliser l'approche historique par 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 { useTranslations } from "gt-next";

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

4. Voir le contenu traduit en développement

Pas besoin de s'inquiéter de l'apparence de l'interface utilisateur 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 réviser continuellement votre interface utilisateur plusieurs fois en production, écrivez simplement votre contenu en anglais une fois et laissez General Translation s'occuper du reste.

Besoin de voir comment vos éléments d'interface utilisateur apparaissent en allemand avant le déploiement ? 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 connu seulement à l'exécution. Pour Next.js, les bibliothèques GT supportent la capacité de traduire le 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, elle réécrira votre composant 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 !