Introduction

Premiers pas

Nous avons des guides de démarrage rapide pour de nombreux frameworks React populaires.

Qu'est-ce que General Translation ?

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

General Translation comprend les éléments suivants :

• Des bibliothèques de développement open-source pour React et Next.js
• Un service de traduction par IA
• Un ensemble d'infrastructure complet pour servir du contenu traduit

Si vous souhaitez utiliser les bibliothèques GT avec votre propre fournisseur de traduction, veuillez consulter notre documentation autonome.

Si vous souhaitez utiliser votre propre bibliothèque i18n, mais que vous voulez toujours utiliser le service de traduction IA de General Translation, veuillez consulter notre documentation sur l'outil CLI.

Fonctionnalités

⚛️ Traduisez des composants React entiers en ligne

• Un seul composant <T> d'ouverture et de fermeture est tout ce dont vous avez besoin pour traduire un composant React entier.
  • Pas besoin de refactorisation complexe ou d'appels de fonction désordonnés.
• Le contenu est en ligne et au même endroit que votre code.
  • Pas besoin de clés, de chaînes ou de fichiers supplémentaires !
• La bibliothèque gère toute la logique i18n en coulisses, vous n'avez pas à le faire.
• 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é de fonctionnalités 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 IA gratuit

• Notre service de traduction IA gratuit 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é en fonction de la langue.

🔧 Convivial pour les développeurs

• La configuration est simple et peut être effectué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 utiliser notre service de traduction IA gratuit.
• Plus besoin de perdre du temps à 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 quelques projets d'exemple.

Pourquoi choisir General Translation ?

General Translation est une pile i18n complète, comprenant des bibliothèques de développement, des traductions IA et un ensemble d'infrastructure complet pour les applications multilingues.

Vous pouvez combiner nos bibliothèques avec votre propre fournisseur de traduction, ou utiliser notre service de traduction IA gratuit avec votre propre bibliothèque i18n.

Pour une expérience i18n fluide et complète, 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 comme enfants 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>Any children of <b>the {`<T>`} component</b> will be translated.</p>
      <p>
        Things like <a href="/">links</a>{', '}
        <button>buttons</button>{', '}
        and even <div> <div> <div> deeply nested components </div> </div> </div>  are translated.
      </p>
    </T> 
  );
}

2. Traduire à la fois les composants client et serveur

Avec une prise en charge native du App Router de Next.js et des Composants Serveur React, 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>
      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 traduction :

import { T } from "gt-next";
 
export default function Page() {
  return (
    <T>
      <p>Hello, World!</p>  {/* translates <p>Hello, World!</p> */}
    </T>
  )
}

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

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

import { useDict } from "gt-next";
 
export default function Page() {
  const d = useDict();
  return d('greeting'); // translates "Hello, World!"
}

4. Visualiser le contenu traduit en développement

Pas besoin de vous inquiéter de l'apparence de l'interface utilisateur 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 utilisateur 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'interface en allemand avant de déployer ? Pas de problème, General Translation les traduira automatiquement pour vous !

5. Traduire du contenu à la demande

Les applications ont souvent besoin de traduire du contenu connu uniquement à l'exécution. Pour Next.js, les bibliothèques GT prennent en charge la possibilité de traduire du 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éécrit votre composant en temps réel avec le nouveau contenu traduit.

Commencer

npm i gt-next

Prêt à vous mondialiser ? Commencez à traduire votre application en quelques minutes et atteignez des utilisateurs du monde entier !