getDict()

Resumen

getDict() se utiliza para obtener traducciones de cadenas del diccionario de traducción para componentes del lado del servidor.

const d = await getDict(); // Obtener la función de traducción
d('greeting.hello'); // pasar el id para obtener una traducción

getDict() admite:

Traducción de contenido de cadena y jsx.
Inserción de variables y lógica condicional dentro de las traducciones.
Prefijo de id opcional.

Para traducciones del lado del cliente, consulte useDict().

getDict() y useDict() utilizan un diccionario para almacenar todo el contenido para la traducción. Esto es diferente de usar el componente <T> para la traducción. Si estás interesado en usar solo componentes <T> para la traducción, entonces este documento no es relevante.

Referencia

Props

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

Descripción

Prop	Descripción
`id`	Un prefijo opcional para anteponer a todas las claves de traducción. Esto es útil para trabajar con valores de diccionario anidados.

Retornos

Una promesa de una función de traducción d() que, dado un id, devolverá la versión traducida de la entrada correspondiente

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

Nombre	Tipo	Descripción
`id`	`string`	El id de la entrada a traducir
`options?`	`DictionaryTranslationOptions`	Opciones de traducción para personalizar el comportamiento de `d()`.

Ejemplos

Uso Básico

Cada entrada en tu diccionario se traduce.

dictionary.jsx

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

Cuando queremos acceder a estas entradas (en el lado del servidor), llamamos a getDict(). Esto devuelve una función que acepta la clave de una traducción del diccionario.

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>
  );
}

Uso de variables

Para pasar valores, debes (1) asignar un identificador y (2) referenciar el identificador al llamar a la función d().

En este ejemplo, usamos {} para pasar variables a las traducciones. En el diccionario, asignamos el identificador {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>
  );
}

Uso de prefijos

Podemos usar prefijos para obtener solo un subconjunto del diccionario.

dictionary.jsx

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

Debido a que agregamos el valor 'prefix1.prefix2' al método getDict, todas las claves están prefijadas con 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>
  );
}

Notas

La función getDict() te permite acceder a las traducciones del diccionario en el lado del servidor.

Próximos Pasos

Vea useDict() para el equivalente del lado del cliente de getDict().
Aprenda más sobre el uso de diccionarios en la referencia de diccionarios.

getDict()

En esta página