Traductions locales

Que sont les traductions locales ?

Les traductions locales sont stockées dans le bundle de votre application, contrairement à celles qui sont récupérées depuis un CDN (Content Distribution Network).

Supposons que vous ayez ajouté la commande gtx-cli translate à votre processus CD. Cela va générer des traductions au format JSON pour votre application. L'étape finale consiste à extraire ces traductions de notre API et à les intégrer dans votre application, où elles pourront être utilisées.

Il existe deux façons de procéder :

• Dans le bundle de votre application : Après la génération des traductions, enregistrez-les dans le bundle de votre application.
• Dans un CDN (par défaut) : Récupérez les traductions depuis un CDN au moment de l'exécution.

Par défaut, gt-next va récupérer les traductions depuis le General Translation CDN, et lors de la traduction de votre application via notre API, les traductions seront automatiquement enregistrées sur notre CDN.

Aperçu

Ce guide vous montrera comment stocker les traductions dans le bundle de votre application Next.js, plutôt que d'utiliser un CDN externe, comme le nôtre. Cela signifie que les traductions seront intégrées dans le code de votre application et évitera la dépendance à une infrastructure externe.

Dans ce guide, nous allons vous expliquer :

Compromis

Quels sont les avantages ?

1. Temps de chargement plus rapides : Les traductions locales sont servies directement depuis votre application, ce qui signifie qu'elles se chargeront plus rapidement que les traductions servies depuis un CDN.

2. Aucune dépendance à des services externes : La capacité de votre application à charger les traductions ne dépend pas de la disponibilité du CDN. Avec gt-next, si des traductions ne sont pas trouvées pour une langue donnée, l'application reviendra automatiquement à la langue par défaut et affichera le contenu original.

Quels sont les inconvénients ?

1. Taille du bundle augmentée : Les traductions locales augmenteront la taille du bundle de votre application puisqu'elles seront servies en même temps que votre application. Cela signifie que votre application peut mettre plus de temps à se charger côté client.

2. Gestion du contenu : Si vous souhaitez modifier une traduction (par exemple, si vous n'aimez pas la façon dont votre contenu a été formulé dans une autre langue), vous devez redéployer votre application avec la nouvelle traduction à chaque fois que vous effectuez des modifications.

Configuration

Prérequis

Assurez-vous d'avoir déjà configuré votre application Next.js avec GT. Si ce n'est pas le cas, veuillez d'abord compléter le Guide de démarrage rapide.

Étapes

export default async function loadTranslations(locale: string) {
  const t = await import(`../public/_gt/${locale}.json`);
  return t.default;
}

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

npx gtx-cli configure

npx gtx-cli translate

C'est tout ! Votre application ne chargera maintenant que les traductions de vos fichiers locaux.

Personnalisation avancée

Vous pouvez personnaliser davantage la fonction loadTranslations pour charger les traductions depuis d'autres sources, comme votre base de données ou votre propre CDN. Consultez la documentation loadTranslations() pour plus d'informations.

Notes

• Les traductions locales sont une alternative à la récupération des traductions depuis un CDN.
• Il existe des avantages et des inconvénients à utiliser des traductions locales, qui sont abordés dans la section Compromis.

Prochaines étapes

• Consultez loadTranslations() pour plus d'informations sur la création d'un chargeur de traductions personnalisé.