loadTranslations
Référence de l’API pour la fonction loadTranslations().
Présentation
Utilisez loadTranslations pour configurer le chargement des traductions.
Par défaut, votre application charge les traductions depuis le GT CDN en production.
Vous pouvez définir 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 proposons une prise en charge intégrée pour charger les traductions depuis des fichiers locaux inclus dans le bundle de votre application. Suivez ce guide pour configurer des 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érences
Paramètres
Prop
Type
Description
| Type | Description |
|---|---|
locale | Le locale pour lequel les traductions doivent être chargées. |
Renvoie
Une Promise<any> qui se résout en un dictionary associant des id aux traductions pour la locale donnée.
Configuration
Définissez loadTranslations comme l’export par défaut d’un fichier nommé loadTranslations.js ou loadTranslations.ts, soit dans le répertoire src/, soit à la racine.
Veillez à ce que la fonction renvoie une promesse qui se résout en 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 un autre chemin, passez le chemin relatif via le paramètre loadTranslationsPath dans withGTConfig.
Exemples
Récupérer 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
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 CDN (Content Delivery Network), 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 manuellement.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.
Notes
loadTranslationsvous permet de personnaliser la manière dont les traductions sont chargées dans votre application en production.- Son cas d’usage le plus courant consiste à ajouter des traductions locales
Prochaines étapes
- Découvrez pourquoi vous pourriez vouloir utiliser des local translations
- Ajoutez vos propres traductions avec le guide des traductions personnalisées
Que pensez-vous de ce guide ?