Passer au contenu principal

React

Le paquet translate-projects-react traduit les fichiers JSON de react-i18next de ton application dans plusieurs langues et conserve la structure des clés. Il peut aussi extraire les textes de ton code à l'aide d'un scanner.

Prérequis​

  • Node.js 20 ou supérieur.
  • Une application React (par exemple créée avec Vite) avec i18next et react-i18next.
  • Un projet et un token API de Translate Projects. Consulte Premiers pas.

1. Installe les paquets​

Terminal
npm i i18next react-i18next i18next-http-backend
npm i translate-projects-react

2. Configure i18next​

Crée src/i18n.js. Les fichiers de chaque langue sont chargés depuis public/locales/<lang>/translation.json :

src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';

i18n
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    lng: 'es',
    fallbackLng: 'es',
    ns: ['translation'],
    defaultNS: 'translation',
    interpolation: { escapeValue: false },
    backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
  });

export default i18n;

Impórtalo una vez en src/main.jsx :

src/main.jsx
import './i18n';

3. Écris tes textes​

Mets les textes de la langue de base dans public/locales/<langue de base>/translation.json (les clés imbriquées sont prises en charge) :

public/locales/es/translation.json
{
  "home": {
    "title": "Bienvenido",
    "subtitle": "Traduce tu app en minutos"
  }
}

Et utilise-les dans tes composants :

src/App.jsx
import { useTranslation, Trans } from 'react-i18next';

export default function App() {
  const { t } = useTranslation();
  return (
    <>
      <h1>{t('home.title')}</h1>
      <Trans>Hola, este texto también se traduce</Trans>
    </>
  );
}

Lorsque le scanner est activé (scanner: true), les textes de t('...') et de <Trans> de ton code sont ajoutés automatiquement à translation.json. Les textes très courts, les chemins, les URL et les modèles contenant des variables sont ignorés.

4. Configurer la traduction​

Crée translate.mjs à la racine du projet. Si tu ne passes pas apiKey, la variable d'environnement TRANSLATE_PROJECTS_API_KEY est utilisée. Si tu préfères CommonJS, appelle-le translate.cjs et utilise require.

translate.mjs
import { translateProject } from 'translate-projects-react';

await translateProject({
  sourceLang: 'es', // Langue de base : la langue par défaut du projet
  targetLangs: ['en', 'pt-BR', 'fr'], // Langues à générer
  outputDir: './public/locales', // Valeur par défaut
  scanner: true, // Facultatif : extrais les textes de ./src
});
OptionPar défautDescription
sourceLang—Langue de base (obligatoire).
targetLangs—Langues à générer.
apiKeyprocess.env.TRANSLATE_PROJECTS_API_KEYToken API du projet.
outputDir./public/localesDossier avec un sous-dossier par langue.
scannerfalsetrue analyse ./src ; { sourceDir: './app' } analyse un autre dossier.

Enregistre le token dans un fichier .env (hors git) et ajoute le script dans package.json. --env-file nécessite Node 20.6 ou supérieur ; en CI, définis la variable comme secret :

.env
TRANSLATE_PROJECTS_API_KEY=tu_token
package.json
{
  "scripts": {
    "translate": "node --env-file=.env translate.mjs"
  }
}

5. Traduis​

Terminal
npm run translate

Traduction dans le terminal

Fichiers générés​

public/locales/
├── es/translation.json   ← ta langue de base (ou celle générée par le scanner)
├── en/translation.json   ← généré
├── pt-BR/translation.json
└── fr/translation.json

Chaque fichier conserve la structure imbriquée de l'original. Les langues sont traduites en parallèle, jusqu'à 3 à la fois.

Complétion automatique des clés (facultatif)​

src/Title.tsx
import { useTypedTranslation } from 'translate-projects-react/hooks';
import es from '../public/locales/es/translation.json';

export function Title() {
  const { t } = useTypedTranslation<typeof es>();
  return <h1>{t('home.title')}</h1>; // Les clés sont complétées automatiquement et validées
}

Complétion automatique des clés

Cache et forçage​

Seuls les fichiers et les clés modifiés sont envoyés ; une deuxième exécution sans modification ne traduit rien. Ce package n'a pas de --force : pour tout retraduire, supprime ~/.config/translate-projects-core/cache.json puis relance la commande. Plus de détails dans Cache et erreurs.

Erreurs courantes​

translateProject renvoie true si tout s'est bien passé. En cas d'erreur, il affiche l'erreur réelle, renvoie false et laisse le code de sortie à 1, sans arrêter ton processus.

  • Jeton invalide (401): vérifie TRANSLATE_PROJECTS_API_KEY. Les fichiers existants ne sont pas modifiés.
  • Clé d'IA manquante (MISSING_API_KEY): configure le fournisseur, le modèle et la clé dans le projet. En attendant, les textes restent dans la langue de base.
  • Traduction partielle: les textes manquants sont redemandés à la prochaine exécution.
  • JSON invalide: si un fichier de la langue de base n'est pas un JSON valide, rien n'est écrit pour lui.
Gratuit

🚀 Automatisez vos traductions gratuitement​

Translate Projects est gratuit. Vous créez votre projet, connectez la clé de votre fournisseur d'IA et ne lui payez que ce que vous dépensez.

  • Sans forfaits ni carte de crédit: Toutes les fonctionnalités sont disponibles dès le premier jour.
  • Utilisez votre propre IA: Claude, OpenAI, DeepSeek ou Gemini. Votre clé est stockée chiffrée.
  • Réseau de traductions partagé: Si un texte a déjà été traduit, vous le recevez instantanément sans dépenser votre clé.
  • Panneau d'administration: Vérifiez et modifiez toutes vos traductions depuis un seul endroit.

Créer un compte gratuitement →

Support

Nous sommes là pour vous aider​

Si vous avez des questions, besoin d'aide ou souhaitez contribuer, n'hésitez pas à me contacter. Je suis à votre disposition pour vous soutenir dans tout ce dont vous avez besoin.

Soutenez le projet​

Si ce projet vous a été utile, je vous invite à m'offrir un café. Votre soutien m'aide à continuer de m'améliorer et à créer du contenu de valeur. Merci d'être là ! ☕

Buy me a coffee