getTranslations()

Aperçu

getTranslations() est utilisé pour obtenir les traductions de chaînes de caractères à partir du dictionnaire de traduction pour les composants côté serveur.

const d = await getTranslations(); // Obtenir la fonction de traduction
d('greeting.hello'); // passer l'id pour obtenir une traduction

getTranslations() prend en charge :

• La traduction de contenu de chaînes de caractères et jsx.
• L'insertion de variables et la logique conditionnelle dans les traductions.
• Le préfixage d'id optionnel.

Pour les traductions côté client, voir useTranslations().

Référence

Props

Description

Retourne

Une promesse d'une fonction de traduction d() qui, étant donné un id, retournera la version traduite de l'entrée correspondante

Promise<(id: string, options?: DictionaryTranslationOptions) => React.ReactNode>

Exemples

Utilisation de base

Chaque entrée de votre dictionnaire est traduite.

const dictionary = {
  greeting: <>Hello, Alice!</>, 
};
export default dictionary;

Lorsque nous voulons accéder à ces entrées (côté serveur), nous appelons getTranslations(). Cela retourne une fonction qui accepte la clé d'une traduction du dictionnaire.

import { getTranslations } from 'gt-next/server';

export default async function TranslateGreeting() {
  
  const d = await getTranslations(); 

  return (
    <p>
      {d('greeting')} // Hello, Alice // [!code highlight]
    </p>
  );
}

Utilisation de variables

Pour passer des valeurs, vous devez (1) assigner un identifiant et (2) référencer l'identifiant lors de l'appel de la fonction d().

Dans cet exemple, nous utilisons {} pour passer des variables aux traductions. Dans le dictionnaire, nous assignons l'identifiant {userName}.

const dictionary = {
  greeting: "Hello, {userName}!", 
};
export default dictionary;

import { getTranslations } from 'gt-next/server';

export default async function TranslateGreeting() {
  const d = await getTranslations();
  
  // Hello Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice}
    </p>
  );
}

Utilisation de préfixes

Nous pouvons utiliser des préfixes pour récupérer seulement un sous-ensemble du dictionnaire.

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;

Parce que nous avons ajouté la valeur 'prefix1.prefix2' à la méthode getTranslations, toutes les clés sont préfixées avec prefix1.prefix2 :

import { getTranslations } from 'gt-next/server';

export default function UserDetails() {
  const d = await getTranslations('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

Notes

• La fonction getTranslations() vous permet d'accéder aux traductions du dictionnaire côté serveur.

Prochaines étapes

• Voir useTranslations() pour l'équivalent côté client de getTranslations().
• En savoir plus sur l'utilisation des dictionnaires dans la référence des dictionnaires.