Descripción general

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

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

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

Para componentes asíncronos, consulta getTranslations.

Referencias

Parámetros

Descripción

Devuelve

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

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

Ejemplos

Uso básico del diccionario

Cada Entry de tu diccionario se traduce.

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

Cuando queremos acceder a estas entradas (en el cliente), llamamos a useTranslations. Esta función devuelve otra que acepta 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 valores, debes (1) asignar un identificador y (2) hacer referencia a ese 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 llevan el prefijo 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 permite acceder a las traducciones del diccionario en el cliente.
• El hook useTranslations solo puede usarse 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 dictionaries en la referencia de dictionaries.