# gt-next: General Translation Next.js SDK: useTranslations
URL: https://generaltranslation.com/es/docs/next/api/dictionary/use-translations.mdx
---
title: useTranslations
description: Referencia de la API del hook useTranslations
---

## Resumen

`useTranslations` se usa para acceder a las traducciones de cadenas del [diccionario de traducción](/docs/next/guides/dictionaries).

Debe usarse dentro de un componente envuelto por un [`<GTProvider>`](/docs/next/api/components/gtprovider).

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

Para componentes asíncronos, consultar [`getTranslations`](/docs/next/api/dictionary/get-translations).

<Callout>
  `getTranslations` y `useTranslations` usan un [diccionario](/docs/next/guides/dictionaries) para almacenar todo el contenido para su traducción.
  Esto es diferente de usar el [componente `<T>`](/docs/next/guides/t) para la traducción.
  Si solo te interesa usar componentes `<T>` para la traducción, este documento no es relevante.
</Callout>


## Referencia

### Parámetros

<TypeTable
  type={{
  "id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descripción

| Prop | Descripción                                                                                                                                   |
| ---- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | Un prefijo opcional que se antepone a todas las claves de traducción. Esto resulta útil para trabajar con valores anidados de un diccionario. |

### Devuelve

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

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

| Nombre     | Tipo                                                                                  | Descripción                                                        |
| ---------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| `id`       | `string`                                                                              | El ID de la entrada que se traducirá                               |
| `options?` | [`DictionaryTranslationOptions`](/docs/next/api/types/dictionary-translation-options) | Opciones de traducción para personalizar el comportamiento de `d`. |

***


## Ejemplos

### Uso básico del diccionario

Todas las entradas de tu diccionario se traducen.

```jsx title="dictionary.jsx" copy
const dictionary = {
  greeting: "Hola, Bob", // [!code highlight]
};
export default dictionary;
```

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

```jsx title="TranslateGreeting.jsx" copy
import { useTranslations } from 'gt-next';

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

### Uso de variables [#variables]

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

En este ejemplo, usamos `{}` para pasar variables a las traducciones.
En el diccionario, asignamos el identificador `{userName}`.

```jsx title="dictionary.jsx" copy
// [!code word:userName]
const dictionary = {
  greeting: "Hola, {userName}!", // [!code highlight]
};
export default dictionary;
```

```jsx title="src/server/TranslateGreeting.jsx" copy
// [!code word:userName]
import { useTranslations } from 'gt-next';

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

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


### Uso de prefijos

Podemos usar prefijos para traducir solo una parte del diccionario.

```jsx title="dictionary.jsx" copy
const dictionary = {
  prefix1: { // [!code highlight]
    prefix2: { // [!code highlight]
      greeting: "Hola, Bob",
    }
  }
};
export default dictionary;
```

Como añadimos el valor `'prefix1.prefix2'` al hook `useTranslations`, todas las claves llevan el prefijo `prefix1.prefix2`:

```jsx title="UserDetails.jsx" copy
import { useTranslations } from 'gt-next';

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

***


## Notas

* La función `useTranslations` te permite acceder a las traducciones del diccionario del lado del cliente.
* El hook `useTranslations` solo puede usarse dentro de un componente envuelto por el [componente `<GTProvider>`](/docs/next/api/components/gtprovider).

## Próximos pasos

* Para las traducciones del lado del servidor, consulta [`getTranslations`](/docs/next/api/dictionary/get-translations).
* Obtén más información sobre el uso de diccionarios en la [referencia de diccionarios](/docs/next/guides/dictionaries).