getDict()

Aperçu

getDict() est utilisé pour obtenir des traductions de chaînes depuis le dictionnaire de traduction pour les composants côté serveur.

const d = await getDict(); // Get the translation function
d('greeting.hello'); // pass the id to get a translation

getDict() prend en charge :

La traduction de contenu texte et jsx.
L'insertion de variables et la logique conditionnelle dans les traductions.
Le préfixage optionnel des identifiants.

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

getDict() et useDict() utilisent un dictionnaire pour stocker tout le contenu à traduire. Cela diffère de l'utilisation du composant <T> pour la traduction. Si vous souhaitez uniquement utiliser les composants <T> pour la traduction, alors ce document n'est pas pertinent.

Référence

Props

Prop	Type	Default
`id??`	`string`	`undefined`

Description

Prop	Description
`id`	Un préfixe optionnel à ajouter à toutes les clés de traduction. Ceci est utile pour travailler avec des valeurs de dictionnaire imbriquées.

Retour

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>

Nom	Type	Description
`id`	`string`	L'id de l'entrée à traduire
`options?`	`DictionaryTranslationOptions`	Options de traduction pour personnaliser le comportement de `d()`.

Exemples

Utilisation de base

Chaque entrée dans votre dictionnaire est traduite.

dictionary.jsx

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

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

TranslateGreeting.jsx

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

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

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

Utilisation de variables

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

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

dictionary.jsx

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

TranslateGreeting.jsx

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

export default async function TranslateGreeting() {
  const d = await getDict();
  
  // Hello 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 dictionnaire.

dictionary.jsx

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

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

UserDetails.jsx

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

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

Notes

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

Prochaines étapes

Consultez useDict() pour l'équivalent côté client de getDict().
Découvrez-en plus sur l'utilisation des dictionnaires dans la référence des dictionnaires.

getDict()

Sur cette page