Traductions locales

Aperçu

Ce guide vous montrera comment stocker des traductions dans votre application Next.js plutôt que d'utiliser un CDN. Cela signifie que les traductions seront intégrées dans le bundle de votre application. Cela peut entraîner des temps de chargement plus rapides et évite de dépendre d'une infrastructure externe.

Dans ce document, nous allons (1) expliquer ce que sont les traductions locales et comment elles fonctionnent et (2) vous montrer comment configurer des traductions locales pour votre application Next.js.

Qu'est-ce que les traductions locales ?

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

Disons que vous avez ajouté la commande gtx-cli translate à votre processus CD. Cela générera des fichiers JSON contenant les traductions pour votre application. La dernière étape consiste à extraire ces traductions de notre API et à les intégrer dans votre application.

Il y a deux façons de le faire :

• Dans le bundle de votre application : Après que les traductions soient générées, ajoutez-les au bundle de votre application.
• Dans un CDN (par défaut) : Récupérez les traductions depuis un CDN à l'exécution.

Quels sont les avantages ?

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.

Aucune dépendance aux services externes : La capacité de votre application à charger des traductions ne dépend pas de la disponibilité d'un CDN.

Quels sont les inconvénients ?

Taille du bundle augmentée : Les traductions locales augmenteront la taille du bundle de votre application car elles seront servies avec votre application. Cela signifie que votre application peut prendre légèrement plus de temps lors du premier chargement.

Gestion des locales : Pour ajouter ou supprimer le support des locales, vous devrez redéployer votre application à chaque fois.

Gestion du contenu : Tout comme la gestion des locales, si vous souhaitez modifier une traduction (c'est-à-dire, si vous n'aimez pas comment votre contenu a été formulé dans une autre langue), vous devez redéployer votre application avec la nouvelle traduction.

Configuration

Prérequis

Assurez-vous d'avoir suivi le Guide de démarrage rapide.

Étapes

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

npx gtx-cli init

npx gtx-cli translate

C'est tout ! Votre application ne chargera désormais que les traductions à partir de vos fichiers locaux.

Notes

• Les traductions locales sont une alternative à la récupération de traductions depuis un CDN.
• Vous pouvez personnaliser loadTranslations() pour également charger des traductions à partir d'autres sources, telles que votre base de données ou votre propre CDN.

Prochaines étapes

• Consultez loadTranslations() pour plus d'informations sur l'écriture d'un chargeur de traduction personnalisé.
• Si vous souhaitez écrire vos propres traductions, consultez traductions personnalisées.
• Pour plus d'informations sur la syntaxe du dictionnaire, consultez la référence du dictionnaire.