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

Description

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.

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érer les traductions depuis votre bundle

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

Lorsque vous êtes configuré pour utiliser les traductions locales, la commande gtx-cli translate enregistrera les traductions dans l’arborescence de fichiers de votre projet.

Vous pouvez générer les fichiers de traduction pour votre bundle avec cette commande :

npx gtx-cli translate --no-publish --translations-dir ./public/locales

Charger les traductions depuis un CDN

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

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

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