loadTranslations
Référence de l’API pour la fonction loadTranslations().
Présentation
Utilisez loadTranslations pour définir le comportement de chargement des traductions.
Par défaut, votre application chargera les traductions depuis le CDN (Content Delivery Network) de GT en production.
Vous pouvez fournir une fonction loadTranslations pour charger les traductions depuis une autre source, par exemple :
- 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 depuis des files locales dans le bundle de votre application. Suivez ce guide pour configurer des local translations 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érences
Paramètres
Prop
Type
Description
| Type | Description |
|---|---|
locale | Le locale pour lequel charger les traductions. |
Renvoie
Une Promise<any> qui se résout en un dictionary associant des ids à des traductions pour le locale donné.
Configuration
Définissez loadTranslations comme export par défaut dans un fichier nommé loadTranslations.js ou loadTranslations.ts, situé soit dans le répertoire src/, soit à la racine.
Assurez-vous que la fonction renvoie une promesse résolue avec un objet contenant les traductions pour le locale donné.
export default async function loadTranslations(locale) {
const translations = await import(`../public/locales/${locale}.json`);
return translations.default;
};Si vous souhaitez utiliser un autre nom ou chemin, 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
enregistre les traductions dans l’arborescence de fichiers de votre projet.
npx gtx-cli translateCharger les traductions depuis un CDN (réseau de diffusion de contenu)
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 {};
}
};Question : Quelle est la différence entre loadTranslations et loadDictionary ?
loadTranslationssert à définir un comportement de chargement personnalisé pour récupérer les traductions de votre application. Cela peut consister à obtenir des traductions depuis un réseau de diffusion de contenu (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 peu pratiques à modifier.loadDictionaryest destiné aux implémentations degt-nextutilisées comme bibliothèque autonome. Les utilisateurs fournissent leurs propres traductions et aucune infrastructure de traduction n’est utilisée.
Remarques
loadTranslationsvous permet de personnaliser la façon dont les traductions sont chargées dans votre application en production.- Son cas d’usage le plus courant est d’ajouter des local translations
Prochaines étapes
- Découvrez pourquoi vous pourriez vouloir utiliser des local translations
- Ajoutez vos propres traductions avec le guide des traductions personnalisées
Comment trouvez-vous ce guide ?