Présentation

getTranslations permet de récupérer des chaînes traduites depuis le dictionary de traduction pour les composants côté serveur.

const d = await getTranslations(); // Récupérez la fonction de traduction
d('greeting.hello'); // passez l'id pour obtenir la traduction

getTranslations prend en charge :

• La traduction de chaînes et de contenu JSX.
  • L’insertion de variables et la logique conditionnelle dans les traductions.
  • Le préfixage optionnel d’id.

Pour les traductions côté client, consultez useTranslations.

Références

Props

Description

Renvoie

Une promesse d’une fonction de traduction d qui, donné un id, renvoie la version traduite de l’Entry correspondante

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

Exemples

Utilisation basique du dictionary

Chaque Entry de votre dictionary est traduite.

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

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

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

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

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

Utilisation des variables

Pour transmettre des valeurs, vous devez (1) attribuer un identifiant et (2) référencer cet identifiant lors de l’appel à la fonction d.

Dans cet exemple, nous utilisons {} pour passer des variables aux traductions. Dans le dictionary, nous attribuons l’identifiant {userName}.

const dictionary = {
  greeting: "Bonjour, {userName}\u00A0!", 
};
export default dictionary;

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

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

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

Utilisation des préfixes

Nous pouvons utiliser des préfixes pour ne récupérer qu’un sous-ensemble du dictionary.

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

Comme nous avons ajouté la valeur 'prefix1.prefix2' à la méthode getTranslations, toutes les clés sont préfixées par 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>
  );
}

Remarques

• La fonction getTranslations vous permet d’accéder aux traductions du dictionary côté serveur.

Prochaines étapes

• Consultez useTranslations, l'équivalent côté client de getTranslations.