Descripción general

useTranslations se usa para acceder a traducciones de cadenas desde el diccionario de traducción.

Debe utilizarse dentro de un componente envuelto por un <GTProvider>.

const d = useTranslations(); // Obtiene la función de traducción
d('greeting.hello'); // pasa el id para obtener una traducción

Para componentes asíncronos, consulta getTranslations.

Referencia

Parámetros

Descripción

Devuelve

Una función de traducción d que, dado un id, devuelve la versión traducida de la entrada correspondiente

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

Ejemplos

Uso básico del diccionario

Cada Entry de tu diccionario se translate.

const diccionario = {
  greeting: "Hola, Bob", 
};
export default diccionario;

Cuando queremos acceder a estas entradas (en el cliente), llamamos a useTranslations. Esto devuelve una función que recibe la clave de una traducción del diccionario.

import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const d = useTranslations(); 
  return (
    <p>
      {d('greeting')} // Hola, Alice // [!code highlight]
    </p>
  );
}

Uso de variables

Para pasar value, debes (1) asignar un identificador y (2) hacer referencia al 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: "¡Hola, {userName}!", 
};
export default dictionary;

import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const d = useTranslations();
  
  // ¡Hola, Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

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

Uso de prefijos

Podemos usar prefijos para traducir únicamente un subconjunto del diccionario.

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

Como agregamos el value 'prefix1.prefix2' al hook useTranslations, todas las claves se prefijan con prefix1.prefix2:

import { useTranslations } from 'gt-next';

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

Notas

• La función useTranslations te permite acceder a las traducciones del diccionario en el cliente.
• El hook useTranslations solo puede utilizarse dentro de un componente envuelto por un componente <GTProvider>.

Próximos pasos

• Para traducciones en el servidor, consulta getTranslations.
• Obtén más información sobre cómo usar diccionarios en la referencia de diccionarios.