getDict()

Descripción general

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

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

getDict() admite:

• Traducción de contenido de tipo cadena y jsx.
• Inserción de variables y lógica condicional dentro de las traducciones.
• Prefijado opcional de identificadores.

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

Referencia

Props

Descripción

Retorna

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>

Ejemplos

Uso básico

Cada entrada en tu diccionario se traduce.

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.

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}.

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

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.

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 precedidas por prefix1.prefix2:

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

• Consulta useDict() para el equivalente en el lado del cliente de getDict().
• Obtén más información sobre el uso de diccionarios en la referencia de diccionarios.