loadTranslations()

Aperçu

Utilisez loadTranslations() pour spécifier le comportement de chargement des traductions. Par défaut, votre application chargera les traductions depuis le GT CDN en production. Vous pouvez spécifier une fonction loadTranslations() pour charger les traductions depuis une autre source, telle que :

Depuis le bundle de votre application (le plus courant)
Depuis une base de données
Depuis une API
Depuis un autre CDN

Nous avons intégré la prise en charge du chargement des traductions à partir de fichiers locaux dans le bundle de votre application. Suivez ce guide pour configurer les traductions locales dans votre application Next.js.

Si vous souhaitez définir manuellement vos propres traductions, consultez le guide des traductions personnalisées et la fonction loadDictionary().

Référence

Paramètres

Prop	Type	Default
`locale?`	`string`	-

Description

Type	Description
`locale`	La locale pour laquelle les traductions doivent être chargées.

Retourne

Une Promise<any> qui se résout en un dictionnaire associant des identifiants aux traductions pour la locale donnée.

Configuration

Définissez votre loadTranslations() comme exportation par défaut d’un fichier nommé loadTranslations.js ou loadTranslations.ts, soit dans le répertoire src/, soit à la racine. Assurez-vous que la fonction retourne une promesse qui se résout en un objet contenant les traductions pour la locale donnée.

src/loadTranslations.js

export default async function loadTranslations(locale) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
};

Si vous souhaitez utiliser un nom ou un chemin différent, transmettez le chemin relatif via le paramètre loadTranslationsPath dans withGTConfig().

Exemples

Récupération des traductions depuis votre bundle

src/loadTranslations.js

export default async function loadTranslations(locale) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
};

Lorsqu'il est configuré pour utiliser les traductions locales, la commande gtx-cli translate sauvegardera les traductions dans l'arborescence de fichiers de votre projet.

npx gtx-cli translate

Charger les traductions depuis un CDN

loadTranslations.js

export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Charger les traductions depuis votre propre base de données

loadTranslations.js

export default async function loadTranslations(locale) {
  try {
    const translations = await prisma.translation.findUnique({
      where: {
        locale: locale,
      },
    });
    return translations;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Question : Quelle est la différence entre loadTranslations() et loadDictionary() ?

loadTranslations() est utilisé pour définir un comportement de chargement personnalisé pour récupérer les traductions de votre application. Cela peut être l'obtention de traductions depuis un CDN, une base de données, ou le bundle de votre application. Il s'agit généralement de traductions générées automatiquement, gérées par l'outil CLI, et qui ne sont pas très conviviales à éditer.
loadDictionary() est destiné aux implémentations de gt-next en tant que bibliothèque autonome. Les utilisateurs apportent leurs propres traductions et aucune infrastructure de traduction n'est utilisée.

Notes

loadTranslations() vous permet de personnaliser la façon dont les traductions sont chargées dans votre application en production.
Son cas d'utilisation le plus courant est d'ajouter des traductions locales

Prochaines étapes

Découvrez pourquoi vous pourriez vouloir utiliser les traductions locales
Ajoutez vos propres traductions avec le guide des traductions personnalisées

loadTranslations()

Sur cette page