FAQ

Questions et réponses courantes concernant le Compilateur Lingo.dev.

Puis-je traduire des chaînes littérales ?

Le Compilateur Lingo.dev suit la convention selon laquelle tout ce qui se trouve dans JSX est localisable. Les chaînes littérales en dehors des composants JSX ne sont pas localisées par conception.

Comportement actuel :

// Ceci NE sera PAS traduit
const message = "Hello world";
const errorText = "Something went wrong";

// Ceci SERA traduit
function Component() {
  return <h1>Hello world</h1>;
}

Rendre les littéraux localisables :

Vous pouvez rendre les chaînes littérales localisables en les enveloppant dans des fragments JSX :

// Avant : Non localisable
const message = "Hello world";

// Après : Localisable en utilisant des fragments
const message = <>Hello world</>;

// Utilisation dans votre composant
function Component() {
  return <div>{message}</div>;
}

Approche alternative :

// Pour les messages dynamiques
function getLocalizedMessage() {
  return <>Something went wrong</>;
}

// Pour le texte conditionnel
const statusText = isError ? <>Error occurred</> : <>Success</>;

Cette convention assure un comportement de localisation cohérent tout en maintenant des limites claires entre le contenu localisable et non localisable.

Nous explorons des moyens d'étendre ce comportement pour prendre en charge davantage de cas d'utilisation à l'avenir. Rejoignez notre Discord pour discuter des modèles spécifiques que vous aimeriez voir pris en charge.

Quels frameworks sont pris en charge ?

Le Compilateur Lingo.dev prend actuellement en charge ces frameworks React :

  • Next.js (App Router uniquement)
  • React Router v6+
  • Remix (dernière version)
  • Vite + React

Nous accueillons les contributeurs intéressés par l'implémentation du support du compilateur pour d'autres plateformes. Rejoignez notre Discord pour discuter des stratégies d'implémentation.

Puis-je ajouter d'autres langues ?

Oui ! Vous pouvez étendre la prise en charge des langues en configurant des modèles personnalisés directement dans votre configuration de compilateur :

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "pt", "it"],
  models: {
    "*:pt": "mistral-saba-24b",
    "en:it": "meta-llama/llama-4-maverick-17b-128e-instruct",
    "*:*": "mistral-saba-24b",
  },
};

lingoCompiler.next(compilerConfig)(nextConfig);

Consultez la configuration avancée pour plus de détails.

Puis-je utiliser des prompts personnalisés ?

Oui ! Vous pouvez personnaliser les instructions de traduction directement dans votre configuration du compilateur :

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "Vous êtes un traducteur professionnel spécialisé dans la documentation technique. Traduisez de {SOURCE_LOCALE} vers {TARGET_LOCALE} tout en maintenant la précision technique.",
};

Pour les glossaires personnalisés, incluez les définitions terminologiques dans vos instructions. Référez-vous à notre instruction par défaut pour les meilleures pratiques.

Puis-je utiliser d'autres fournisseurs de LLM ?

Actuellement, Lingo.dev Compiler s'intègre avec Lingo.dev Engine et plusieurs autres fournisseurs de LLM.

Nous aimerions prendre en charge davantage de fournisseurs de LLM prochainement - discutez avec nous ou envoyez-nous une pull request !

Ai-je besoin d'une clé API GROQ dans CI/CD ?

Généralement non. Si vous compilez votre application localement, toutes les traductions seront stockées dans le répertoire lingo/. Votre build CI/CD n'aura pas besoin d'appeler un LLM pour traduire les chaînes de caractères.

Alternativement, vous pouvez ajouter la variable GROQ_API_KEY à votre CI/CD et effectuer toutes les traductions lors de la compilation, mais nous ne recommandons pas cette approche afin de garder un meilleur contrôle sur les traductions finales.

Puis-je modifier les traductions ?

Oui ! Vous pouvez modifier manuellement le fichier lingo/dictionary.js. Il exporte un objet contenant les traductions pour tous les fichiers et entrées. Vous pouvez modifier le texte pour chaque locale dans la propriété content. Vos modifications seront conservées jusqu'à ce que le texte source dans les composants React soit mis à jour.

Vous n'aimez pas éditer des objets JavaScript ? Nous lançons bientôt un éditeur pour améliorer l'expérience d'édition. Faites-nous savoir si vous êtes intéressé !

Comment puis-je retraduire toute mon application, un fichier spécifique ou une langue ?

Pour retraduire toute votre application, supprimez le fichier dictionary.js du répertoire lingo/.

Pour retraduire uniquement des fichiers spécifiques, vous pouvez supprimer leur clé (nom de fichier) de dictionary.js.

Si vous souhaitez retraduire une locale spécifique, vous devez supprimer tous les enregistrements pour cette locale.

Pourquoi dois-je compiler l'application localement ?

Les compilations locales normalisent vos fichiers de traduction lingo/ en :

  • Supprimant les clés de traduction inutilisées
  • Mettant à jour les empreintes numériques du contenu
  • Assurant un formatage cohérent des fichiers
  • Optimisant pour le déploiement en production

Exécutez toujours npm run build avant de valider les modifications pour maintenir des fichiers de traduction propres.

Il manque des traductions !

Si des traductions sont manquantes :

  1. Compilez localement pour normaliser vos fichiers lingo/ :

    npm run build

  2. Vérifiez que votre clé API est correctement définie :

    # Vérifiez que votre fichier .env contient
GROQ_API_KEY=gsk_...

  3. Validez les fichiers mis à jour :

    git add lingo/
git commit -m "Update translations"

  4. Redémarrez votre serveur de développement après les modifications.

Puis-je configurer un glossaire personnalisé ?

Oui ! Utilisez des prompts personnalisés pour définir la terminologie et les glossaires directement dans votre configuration de compilateur :

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "You are a professional translator. Use these terms consistently: 'Dashboard' should be 'Tableau de bord' in French, 'Settings' should be 'Configuración' in Spanish. Translate from {SOURCE_LOCALE} to {TARGET_LOCALE}.",
};

Comment exclure certains contenus de la traduction ?

Utilisez l'attribut data-lingo-skip :

<div data-lingo-skip>This content will not be translated</div>

Pour l'exclusion conditionnelle basée sur le type de contenu :

<code data-lingo-skip>
  // Code blocks are automatically skipped const apiKey = "secret-key";
</code>

Puis-je remplacer des traductions spécifiques ?

Oui ! Utilisez les attributs data-lingo-override- pour les remplacements spécifiques à une locale :

<button data-lingo-override-es="¡Hola!" data-lingo-override-fr="Bonjour!">
  Hello
</button>

Ceci est utile pour :

  • Les noms de marque qui ne doivent pas être traduits
  • La terminologie spécifique à une région
  • Le contenu marketing qui nécessite une révision manuelle

Comment le compilateur gère-t-il la pluralisation ?

Le compilateur gère automatiquement les modèles de pluralisation de base, mais pour des règles de pluriel complexes, vous pourriez avoir besoin de structurer votre JSX en conséquence :

// Le compilateur traitera ceci de manière appropriée
<p>{count === 1 ? <>1 élément</> : <>{count} éléments</>}</p>

Qu'en est-il des performances en production ?

Lingo.dev Compiler est optimisé pour la production :

  • Coût d'exécution nul - les traductions sont pré-compilées
  • Fractionnement des bundles - seule la locale active est chargée
  • Tree shaking - les traductions inutilisées sont supprimées
  • Compatible CDN - les fichiers de traduction statiques se mettent en cache efficacement

Puis-je utiliser ceci avec TypeScript ?

Oui ! Le compilateur fonctionne parfaitement avec les projets TypeScript. Tous les composants React fournis sont entièrement typés :

import { LocaleSwitcher } from "lingo.dev/react/client";

// Support TypeScript complet
const locales: string[] = ["en", "es", "fr"];
<LocaleSwitcher locales={locales} />;

Comment signaler des bugs ou demander des fonctionnalités ?

Prochaines étapes