---
title: Traduceri
description: Lansează-ți aplicația în mai multe limbi — tradu etichetele din manifest și șirurile UI printr-un singur catalog de locale.
icon: language
---

Aplicațiile Twenty sunt create în **engleză**: șirurile din sursă și din manifest
sunt textul sursă în engleză, `en` este localizarea sursă din care traduci, iar
orice localizare lăsată netradusă revine implicit la aceasta.

Aplicația ta are două tipuri de text traducibil și ambele trec prin același
catalog `locales/`:

* **Etichete de manifest** — nume de obiecte și câmpuri, titluri de vizualizări, elemente de meniu și
  alte șiruri declarate în metadatele aplicației tale.
* **Șiruri componentă-față** - textul UI al componentelor dvs. React din față.

Marchează șirurile traduse, le extrag în cataloage per-localizare,
traduce acele cataloage, iar clădirea servește limba corectă pentru utilizatorul curent* fără cableri suplimentare.

## Marcarea sirurilor componentei frontale

Importă ajutătoarele de traducere din `douăzeci de aplicații/front-componente`:

```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>
  );
};
```

### Când să utilizaţi care

* **`Trans`** — text static în JSX. Folosește proprietățile `message` și `values` pentru
  interpolare, ca în `Trans message="Hi {name}" values={{ name }}`;
  interpolarea direct în elementele copil nu poate fi extrasă static.
* **`useTranslate().t`** - șiruri dinamice în interiorul unei componente. Re-randează atunci când utilizatorul
  schimbă limba. Preferă acest lucru în redare.
* **`t(...)`** (importat direct) - traducerea mai ușoară **oriunde**,
  inclusiv manipulatorii de evenimente, ajutoarele și domeniul de aplicare al modulului - nu numai în randare.
* **`msg(...)`** — un descriptor leneș pentru șiruri declarate ca date (constante,
  config). Rezolvați-l mai târziu cu `t(descriptor)`.

### Context

Treceți `context` pentru a disambigua șirurile sursă identice care traduc
în mod diferit:

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

Șirurile contextuale apar în cataloagele de localizare ca un grup indexat după
contextul lor: `"\<context>": { "\<message>": "\<translation>" }`. Etichetele din manifest sunt
contextuale prin construcție — fiecare poartă rolul de metadată pe care îl joacă
(`objectMetadata.labelSingular`, `fieldMetadata.label`, `view.name`, …), astfel încât
același cuvânt poate fi tradus diferit ca nume de obiect și ca nume de vizualizare.

## Extragerea și traducerea

Rulează comanda de extragere din directorul aplicației:

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

Procesul de extragere colectează atât etichetele manifestului, cât și șirurile `t()`/`msg()`/`Trans`
din sursa front-component în `locales/\<locale>.json`, indexate după
șirul sursă. Completează traducerile:

```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"
  }
}
```

Șirurile fără context sunt intrări simple; șirurile contextuale — inclusiv fiecare etichetă din manifest — sunt îmbricate sub cheia lor de context.

Localnicii ca `{name}` sunt substituiți la timp - țineți-le în traducerea
. Orice şir rămas gol se întoarce la textul sursă.

## Cum rulează

`douăzeci de dev:build` compilează cataloagele şi serveşte limba corectă pentru utilizatorul curent
: etichetele manifest sunt rezolvate pe server, iar cataloagele de tip front-component
sunt copite în fiecare pachet de componente. La runtime, o componentă citește localizarea
din contextul de execuție (limba curentă a gazdei) și rezolvă
fiecare șir din catalog, revenind la sursă atunci când lipsește o traducere
. Schimbarea limbii în gazdă reafișează în timp real șirurile `Trans` și
`useTranslate().t`.

Etichetele manifestului sunt compilate la fiecare sincronizare — `twenty dev:build`, `twenty apply`
și monitorizarea continuă `twenty dev` — astfel că editarea unui fișier de localizare și
sincronizarea sunt suficiente pentru a vedea textul nou. Cataloagele componentelor Front sunt integrate în
fiecare pachet de componente la momentul compilării, astfel că modificarea unuia dintre ele înseamnă totuși
rularea din nou a `twenty dev:build` (și redistribuirea).

Elementele text copil ale `Trans` pot acoperi mai multe linii — spațiile albe sunt comprimate în
același mod în care JSX le comprimă, astfel încât ambele variante sunt extrase cu cheia `Welcome back`:

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