twenty/packages/twenty-docs/l/tr/developers/extend/apps/translations/overview.mdx

---
title: Çeviriler
description: Uygulamanızı birden çok dilde yayınlayın — manifest etiketlerini ve kullanıcı arayüzü (UI) dizelerini tek bir yerel ayar kataloğu üzerinden çevirin.
icon: language
---

Twenty uygulamaları **İngilizce** olarak oluşturulur: kaynak ve manifestinizdeki dizeler İngilizce kaynak metindir, `en` çevirdiğiniz kaynak yerel ayarıdır ve çevrilmeden bırakılan herhangi bir yerel ayar buna geri döner.

Uygulamanızda iki tür çevrilebilir metin vardır ve her ikisi de aynı `locales/` kataloğundan geçer:

* **Manifest etiketleri** — nesne ve alan adları, görünüm başlıkları, menü öğeleri ve uygulamanızın üst verilerinde (metadata) tanımlanan diğer dizeler.
* **Ön bileşen dizeleri** — React ön bileşenlerinizin render ettiği UI metni.

Çevrilebilir dizeleri işaretlersiniz, bunları yerel başına kataloglara çıkarırsınız,
bu katalogları çevirirsiniz ve build, geçerli kullanıcı için
herhangi bir ek bağlantıya gerek kalmadan doğru dili sunar.

## Ön bileşen dizelerini işaretleme

Çeviri yardımcılarını `twenty-sdk/front-component` içinden içe aktarın:

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

### Ne zaman hangisi kullanılmalı

* **`<Trans>…</Trans>`** — JSX içindeki statik metin. Değişkelerin (`<Trans message="Hi {name}" values={{ name }} />`) yerleştirilmesi için `message` ve `values`
  prop'larını kullanın;
  çocukların içine doğrudan yerleştirme statik olarak çıkarılamaz.
* **`useTranslate().t`** — bir bileşen içindeki dinamik dizeler. Kullanıcı dili değiştirdiğinde
  yeniden render edilir. Render içinde bunu tercih edin.
* **`t(...)`** (doğrudan içe aktarılır) — bileşen render'ının içinde olmasına gerek olmadan,
  event handler'lar, yardımcı fonksiyonlar ve modül kapsamı dahil **her yerde** kullanılabilen erken çeviri.
* **`msg(...)`** — veri olarak (sabitler, yapılandırma) bildirilen dizeler için ertelenmiş bir tanımlayıcı. Bunu daha sonra `t(descriptor)` ile çözün.

### Bağlam

Aynı kaynak dize farklı şekilde çevrildiğinde bunları ayırt etmek için `context` geçirin:

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

## Çıkarma ve çeviri

extract komutunu uygulama dizininizden çalıştırın:

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

Çıkarma işlemi, manifest etiketlerinizi ve ön bileşen kaynaklarınızdan gelen `t()`/`msg()`/`\<Trans>`
dizelerini, kaynak dizeyi anahtar olarak kullanarak `locales/\<locale>.json` içine toplar. Çevirileri doldurun:

```json
// locales/fr-FR.json
{
  "Loading postcard…": "Chargement de la carte…",
  "Hi {name}": "Bonjour {name}",
  "Saved {count} cards": "{count} cartes enregistrées"
}
```

`{name}` gibi yer tutucular çalışma zamanında değiştirilir — bunları çeviride koruyun. Boş bırakılan herhangi bir dize, kaynak metne geri döner.

## Nasıl çalışır

`twenty dev:build`, katalogları derler ve geçerli kullanıcı için doğru dili sunar:
manifest etiketleri sunucu tarafında çözülür ve ön bileşen
katalogları her bileşen paketine gömülür. Çalışma zamanında bir bileşen, yereli yürütme bağlamından (ana makinenin geçerli dili) okur
ve her dizeyi kataloğuna göre çözer; bir çeviri eksik olduğunda
kaynak metne geri döner. Ana makinede dilin değiştirilmesi, `\<Trans>` ve
`useTranslate().t` dizelerini canlı olarak yeniden render eder.

Kataloglar build zamanında derlendiği için, bir çeviriyi güncellemek
`twenty dev:build`'i yeniden çalıştırmayı (ve yeniden dağıtmayı) gerektirir; bu, diğer herhangi bir değişiklikle aynıdır.

<Note>
Çeviriler `twenty dev:build` (ve `twenty apply`) tarafından derlenir. Sürekli
`twenty dev` izlemesi kaynak dizeleri gösterir, bu yüzden yerelleştirilmiş çıktıyı tek seferlik bir build ile test edin.
</Note>

`<Trans>` metin alt öğeleri birden fazla satıra yayılabilir — boşluklar, JSX'in boşlukları daraltma biçimiyle aynı şekilde daraltılır; bu nedenle hem `<Trans>Welcome\n  back</Trans>` hem de çıkarılan anahtar `Welcome back` olur.