---
title: Traducciones
description: "Lanza tu aplicación en varios idiomas: traduce las etiquetas del manifiesto y las cadenas de la interfaz de usuario mediante un único catálogo de configuraciones regionales (locales)."
icon: language
---

Las aplicaciones de Twenty están creadas en **inglés**: las cadenas de tu código fuente y del manifiesto son el texto original en inglés, `en` es la configuración regional de origen desde la que traduces y cualquier configuración regional que quede sin traducir volverá a esa configuración.

Tu aplicación tiene dos tipos de texto traducible, y ambos pasan por el mismo catálogo `locales/`:

* **Etiquetas del manifiesto**: nombres de objetos y campos, títulos de vistas, elementos de menú y otras cadenas declaradas en los metadatos de tu aplicación.
* **Cadenas de componentes delanteros** — la interfaz de texto de tus componentes frontales de React.

Marcas las cadenas traducibles, extralas en catálogos por localidad,
traduce esos catálogos, y la construcción sirve el idioma adecuado para el usuario
actual — no hay cableado extra.

## Marcando cadenas de componentes frontales

Importar los ayudantes de traducción de `twenty-sdk/front-component`:

```tsx
import { Trans, t, msg, useTranslate } from 'twenty-sdk/front-component';

const STATUSES = [
  { id: 'draft', label: msg('Draft') },
  { id: 'sent', label: msg('Sent') },
];

const Card = ({ count, name }: { count: number; name: string }) => {
  const { t } = useTranslate();

  return (
    <section>
      {/* Static text — reactive to the user's locale */}
      <Trans>Loading postcard…</Trans>

      {/* Disambiguate identical sources with a context */}
      <Trans context="card-title">Untitled</Trans>

      {/* Interpolation: pass values explicitly */}
      <p>{t('Hi {name}', { name })}</p>
      <p>{t('Saved {count} cards', { count })}</p>

      {/* Resolve a lazily-declared descriptor */}
      <ul>{STATUSES.map((s) => <li key={s.id}>{t(s.label)}</li>)}</ul>
    </section>
  );
};
```

### Cuándo usar qué

* **`Trans`** — texto estático en JSX. Usa las props `message` y `values` para la interpolación, como en `Trans message="Hi {name}" values={{ name }}`; la interpolación directamente en los children no se puede extraer de forma estática.
* **`useTranslate().t`** — cadenas dinámicas dentro de un componente. Se vuelve a procesar cuando el usuario
  cambia de idioma. Preferir esto dentro del render.
* **`t(...)`** (importado directamente) — una traducción entera utilizable **en cualquier lugar**,
  incluyendo controladores de eventos, ayudantes y ámbito del módulo — no solo dentro del render.
* **`msg(...)`** — un descriptor perezoso para cadenas declaradas como datos (constantes, configuración
  ). Resuelva más tarde con `t(descriptor)`.

### Contexto

Pase `context` para desambiguar cadenas de origen idénticas que traduzcan
de forma diferente:

```tsx
t({ message: 'Open', context: 'door' });
t({ message: 'Open', context: 'window' });
<Trans context="card-title">Untitled</Trans>
```

Las cadenas contextuales aparecen en los catálogos de configuración regional como un grupo indexado por su
contexto: `"\<context>": { "\<message>": "\<translation>" }`. Las etiquetas del manifiesto son
contextuales por construcción: cada una lleva el metadato del rol que desempeña (`objectMetadata.labelSingular`, `fieldMetadata.label`, `view.name`, …), por lo que
la misma palabra puede traducirse de manera diferente como nombre de objeto y como nombre de vista.

## Extrayendo y traduciendo

Ejecutar el comando de extracción desde el directorio de la aplicación:

```bash
twenty dev:translations-extract                  # collect strings into locales/en.json
twenty dev:translations-extract --locale fr-FR   # also scaffold a target locale
```

La extracción recopila tanto las etiquetas de tu manifest como las cadenas de `t()`/`msg()`/`Trans` de tu código fuente de front-component en `locales/\<locale>.json`, indexadas por la cadena de origen. Rellena las traducciones:

```json
// locales/fr-FR.json
{
  "Loading postcard…": "Chargement de la carte…",
  "Hi {name}": "Bonjour {name}",
  "Saved {count} cards": "{count} cartes enregistrées",
  "door": {
    "Open": "Ouvrir"
  },
  "objectMetadata.labelSingular": {
    "Postcard": "Carte postale"
  }
}
```

Las cadenas sin contexto son entradas planas; las cadenas contextuales —incluida cada etiqueta de manifiesto— están anidadas bajo su clave de contexto.

Los marcadores de posición como `{name}` se sustituyen en tiempo de ejecución — manténgalos en la traducción
. Cualquier cadena que quede vacía regresa al texto original.

## Cómo funciona

`twenty dev:build` compila los catálogos y sirve el idioma correcto para el
usuario actual: las etiquetas del manifiesto se resuelven del lado del servidor y los catálogos de front-component se incluyen en cada paquete de componente. En tiempo de ejecución, un componente lee la configuración regional
desde su contexto de ejecución (el idioma actual del host) y resuelve
cada cadena contra su catálogo, volviendo a la fuente cuando falta una traducción
. Cambiar el idioma en el host vuelve a renderizar en tiempo real las cadenas de `Trans` y `useTranslate().t`.

Las etiquetas de manifiesto se compilan en cada sincronización — `twenty dev:build`, `twenty apply`
y también en el modo de observación continuo `twenty dev` —, por lo que basta con editar un archivo de configuración regional y
sincronizar para ver el nuevo texto. Los catálogos de componentes del front-end se incorporan en
cada paquete de componentes durante la compilación, por lo que cambiar uno de ellos sigue implicando
volver a ejecutar `twenty dev:build` (y volver a implementar).

Los nodos de texto hijos de `Trans` pueden abarcar varias líneas; los espacios en blanco se colapsan de la misma manera en que JSX los colapsa, por lo que ambos se extraen a la clave `Welcome back`:

```tsx
<Trans>Welcome back</Trans>
<Trans>
  Welcome
  back
</Trans>
```