Descripción general

getTranslations se usa para obtener traducciones de cadenas del diccionario de traducción en componentes del lado del servidor.

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

getTranslations admite:

• Traducción de cadenas y contenido JSX.
  • Inserción de variables y lógica condicional dentro de las traducciones.
  • Prefijado opcional de id.

Para traducciones en el cliente (client-side), consulta useTranslations.

Referencias

Props

Descripción

Devuelve

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

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

Ejemplos

Uso básico del diccionario

Cada Entry de tu diccionario se traduce.

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

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

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

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

  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 { getTranslations } from 'gt-next/server';

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

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

Uso de prefijos

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

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

Como agregamos el value 'prefix1.prefix2' al método getTranslations, todas las claves quedan con el prefijo prefix1.prefix2:

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

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

Notas

• La función getTranslations te permite acceder a las traducciones del diccionario del lado del servidor.

Próximos pasos

• Consulta useTranslations para la versión del lado del cliente de getTranslations.