---
title: Çeviriler
description: Temanızı birden fazla dili destekleyecek şekilde çevirmek için locale dosyaları ve varsayılan prop çevirilerini kullanın.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

Temanızı birden fazla locale'i destekleyecek şekilde çevirebilirsiniz. Çevirmeniz gereken birkaç alan vardır:

- Temanızın component'lerini ve prop'larını, yani temanızın tanımlarını [Çeviriler](https://builders.ikas.com/docs/headless-theme/theme-settings/translations) sayfasında anlatıldığı şekilde çevirmelisiniz.
- Component'lerinizdeki sabit metinler için, aşağıdaki [Locale dosyaları oluşturma](#creating-locale-files) bölümünde anlatıldığı gibi locale dosyaları oluşturmalısınız.
- Component'lerinizin varsayılan prop değerlerini, aşağıdaki [Varsayılan prop değerlerini çevirme](#translating-default-prop-values) bölümünde anlatıldığı gibi çevirmelisiniz.

## Locale dosyaları oluşturma [#creating-locale-files]

Component'lerinizi geliştirirken içlerindeki sabit metinler için locale dosyaları oluşturmanız gerekir. Locale klasörleri **public/locales** altında, locale koduyla adlandırılarak oluşturulur; örneğin **public/locales/en** ya da **public/locales/tr**. Bu klasörlerin altında, **editörde tanımlanan component'leriniz** için locale dosyaları oluşturabilirsiniz.

<Callout type="warn" title="Alt component'ler">
Alt component'leriniz için ayrı locale dosyası oluşturamazsınız; yalnızca editörde tanımlanan component'lerin kendi locale dosyası olabilir. Alt component'ler ya üst component'lerinin dosyasını ya da **common.json** dosyasını kullanır.
</Callout>

```text title="Klasör yapısı"
public
└── locales
    ├── en
    │   ├── common.json
    │   └── product-detail.json
    └── tr
        ├── common.json
        └── product-detail.json
```

Locale dosyalarının adı, **component klasörünün adıyla aynı** olmalıdır. Örneğin `src/components/product-detail` adında bir component'iniz varsa bu component'in locale dosyasının adı **product-detail.json** olmalıdır.

<Callout type="info" title="common.json">
**common.json** özel bir locale dosyasıdır ve içeriğine tüm component'lerden erişilebilir. Ortak çevirileri bu dosyaya koyabilirsiniz.
</Callout>

### Locale dosyası formatı [#locale-file-format]

Locale dosyaları, anahtar-değer çiftlerinden oluşan düz JSON nesneleridir. Nesneleri ihtiyacınıza göre iç içe kullanabilirsiniz.

Aşağıdaki JSON örneğinde görüldüğü gibi, değişken adlarını `{{ }}` süslü parantezleriyle sararak değişken de tanımlayabilirsiniz.

```json title="public/locales/en/product-detail.json"
{
  "detail": {
    "addToCart": {
      "text": "ADD TO CART"
    }
  },
  "settings": {
    "required": "This field is required",
    "minMax": "Must be a minimum of {{min}} characters and a maximum of {{max}} characters",
    "min": "Must be a minimum of {{min}} characters",
    "max": "Must be a minimum of {{max}} characters",
    "selectMinMax": "Minimum {{min}}, maximum {{max}} selections should be made",
    "selectMin": "Minimum {{min}} selections should be made",
    "selectMax": "Maximum {{max}} selections should be made",
    "maxFileSizeInfoText": "You can upload files up to 3 MB in size."
  }
}
```

### Locale dosyalarını kullanma [#using-the-locale-files]

Çevirilere erişmek için component'lerinizde **useTranslation** hook'unu kullanabilirsiniz. Bu hook, çevrilmiş metinleri almak için kullanacağınız bir **t** fonksiyonu döndürür.

Fonksiyonun ilk parametresi metnin yoludur: önce namespace (locale dosyasının adı), ardından metnin locale dosyasındaki yolu gelir: `t('namespace:path.to.text')`

```tsx
import { useTranslation } from '@ikas/storefront';

const Address = ({ order }: Props) => {
  const { t } = useTranslation();
  return (
    <S.Address>
      <S.DeliveryAddress>{t('common:orderDetail.deliveryAddress')}</S.DeliveryAddress>
      <S.Text>
        <div>
          {order.shippingAddress?.firstName} {order.shippingAddress?.lastName}
        </div>
        <div>{order.shippingAddress?.addressText}</div>
      </S.Text>
    </S.Address>
  );
};
```

Fonksiyonun ikinci parametresi değişken değerlerini alır. Örneğin `{{min}}` adında bir değişkeniniz varsa ikinci parametreye şu nesneyi verebilirsiniz:

```tsx
t('product-detail:settings.min', {
  min: 10,
});
```

<Callout type="warn" title="Erişilebilen namespace'ler">
**t** fonksiyonuyla yalnızca **common** namespace'ine ve **component'inize ait namespace**'e erişebilirsiniz. Diğer component'lerin locale dosyalarına erişemezsiniz. Alt component'leriniz ise **t** fonksiyonuyla üst component'lerinin locale dosyalarına erişebilir.
</Callout>

### Geliştirme sırasında locale değiştirme [#switching-locales-during-development]

Temanızdaki **next.config.js** dosyası bir **i18n** bölümü içerir. Bu bölümde kullanılabilir locale'leri ve varsayılan locale'i belirleyebilirsiniz.

Desteklediğiniz locale'leri **next.config.js** dosyanıza ekleyebilirsiniz. Belirli bir locale'i doğrudan `http://localhost:3333` üzerinden test etmek için **defaultLocale** değerini değiştirebilir ya da locale yoluna, örneğin `http://localhost:3333/en` adresine giderek test edebilirsiniz. Bu dosyayı değiştirdikten sonra temanızı yeniden başlatmayı unutmayın.

```js title="next.config.js"
...
i18n: {
  defaultLocale: "en",
  locales: ["en", "tr"],
  localeDetection: false,
},
...
```

## Varsayılan prop değerlerini çevirme [#translating-default-prop-values]

Component prop'larımızı tanımlarken editör bizden varsayılan değerler girmemizi ister. Farklı diller için farklı varsayılan değerler girebiliriz.

<iframe src="https://demo.arcade.software/uoPkSoOtLb6Ph0r3vKAU?embed" title="Varsayılan prop değerlerini çevirme" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />