loadTranslations()

Aperçu

Utilisez loadTranslations() pour spécifier le comportement de chargement des traductions. Par défaut, votre application chargera les traductions depuis le CDN GT en production. Vous pouvez spécifier une fonction loadTranslations() pour charger les traductions depuis une source différente, 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é le support pour charger les traductions depuis des 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

Retours

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

Configuration

Définissez votre loadTranslations() comme export par défaut pour 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 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, passez le chemin relatif via le paramètre loadTranslationsPath dans withGTConfig().

Exemples

Récupération des traductions depuis votre bundle

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

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

Vous pouvez traduire les fichiers 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 donne la possibilité 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 des traductions locales
• Ajoutez vos propres traductions avec le guide des traductions personnalisées