@intlayer/docs 5.8.1 → 6.0.0-canary.0

package/blog/tr/intlayer_with_react-i18next.md

@@ -0,0 +1,346 @@
+---
+createdAt: 2025-09-07
+updatedAt: 2025-09-07
+title: Intlayer ve react-i18next
+description: React uygulaması için Intlayer'ı react-i18next ile karşılaştırın
+keywords:
+  - react-i18next
+  - i18next
+  - Intlayer
+  - Internationalization
+  - Blog
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - intlayer-with-react-i18next
+---
+
+# React Uluslararasılaştırma (i18n) ile react-i18next ve Intlayer
+
+## Genel Bakış
+
+- **Intlayer**, çevirileri **bileşen düzeyinde** içerik beyan dosyaları aracılığıyla yönetmenize yardımcı olur.
+- **react-i18next**, bileşenlerinizde yerelleştirilmiş dizeleri getirmek için `useTranslation` gibi hook'lar sağlayan **i18next** için popüler bir React entegrasyonudur.
+
+Birleştirildiğinde, Intlayer **i18next-uyumlu JSON** olarak sözlükleri **dışa aktarabilir**, böylece react-i18next bunları çalışma zamanında **tüketebilir**.
+
+## Neden Intlayer'ı react-i18next ile Kullanmalı?
+
+**Intlayer** içerik beyan dosyaları daha iyi bir geliştirici deneyimi sunar çünkü:
+
+1. **Dosya Yerleşiminde Esnek**  
+   Her içerik beyan dosyasını ihtiyacı olan bileşenin yanına koyun. Bu yapı, çevirileri birlikte konumlandırarak bileşenler taşındığında veya silindiğinde yetim çevirileri önler.
+
+   ```bash codeFormat="typescript"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.ts # İçerik beyan dosyası
+               └── index.tsx
+   ```
+
+   ```bash codeFormat="esm"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.mjs # İçerik beyan dosyası
+               └── index.mjx
+   ```
+
+   ```bash codeFormat="cjs"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.cjs # İçerik beyan dosyası
+               └── index.cjx
+   ```
+
+   ```bash codeFormat="json"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.json # İçerik beyan dosyası
+               └── index.jsx
+   ```
+
+2. **Merkezi Çeviriler**  
+   Tek bir içerik beyan dosyası bir bileşen için gerekli tüm çevirileri toplar, eksik çevirileri yakalamayı kolaylaştırır.  
+   TypeScript ile, çeviriler eksikse derleme zamanı hataları bile alırsınız.
+
+## Kurulum
+
+Create React App projesinde, bu bağımlılıkları yükleyin:
+
+```bash
+# npm ile
+npm install intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+```bash
+# yarn ile
+yarn add intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+```bash
+# pnpm ile
+pnpm add intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+### Bu Paketler Nedir?
+
+- **intlayer** – i18n yapılandırmalarını, içerik beyanlarını yönetmek ve sözlük çıktılarını oluşturmak için CLI ve çekirdek kütüphane.
+- **react-intlayer** – Intlayer için React'e özel entegrasyon, özellikle sözlüklerin otomatik oluşturulmasını sağlayan bazı script'ler sağlar.
+- **react-i18next** – i18next için React'e özel entegrasyon kütüphanesi, `useTranslation` hook'unu içerir.
+- **i18next** – Çeviri işlemeyi yöneten temel çerçeve.
+- **i18next-resources-to-backend** – JSON kaynaklarını dinamik olarak içe aktaran bir i18next arka ucu.
+
+## i18next Sözlüklerini Dışa Aktarmak İçin Intlayer'ı Yapılandırma
+
+Projenizin kökünde `intlayer.config.ts` dosyasını oluşturun (veya güncelleyin):
+
+```typescript title="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    // İstediğiniz kadar yerel ekleyin
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  content: {
+    // Intlayer'a i18next-uyumlu JSON oluşturmasını söyleyin
+    dictionaryOutput: ["i18next"],
+
+    // Oluşturulan kaynaklar için bir çıktı dizini seçin
+    // Bu klasör henüz yoksa oluşturulacaktır.
+    i18nextResourcesDir: "./i18next/resources",
+  },
+};
+
+export default config;
+```
+
+> **Not**: TypeScript kullanmıyorsanız, bu yapılandırma dosyasını `.cjs`, `.mjs` veya `.js` olarak oluşturabilirsiniz (detaylar için [Intlayer dokümantasyonuna](https://intlayer.org/en/doc/concept/configuration) bakın).
+
+## i18next Kaynaklarını Oluşturma
+
+İçerik beyanlarınız yerleştirildikten sonra (sonraki bölüm), **Intlayer build komutunu** çalıştırın:
+
+```bash
+# npm ile
+npx run intlayer build
+```
+
+```bash
+# yarn ile
+yarn intlayer build
+```
+
+```bash
+# pnpm ile
+pnpm intlayer build
+```
+
+> Bu, varsayılan olarak `./i18next/resources` dizini içinde i18next kaynaklarınızı oluşturacaktır.
+
+Tipik bir çıktı şöyle görünebilir:
+
+```bash
+.
+└── i18next
+    └── resources
+       ├── en
+       │   └── my-content.json
+       ├── fr
+       │   └── my-content.json
+       └── es
+           └── my-content.json
+```
+
+Burada her **Intlayer** beyan anahtarı bir **i18next ad alanı** olarak kullanılır (örneğin, `my-content.json`).
+
+## Sözlükleri react-i18next Yapılandırmanıza İçe Aktarma
+
+Bu kaynakları çalışma zamanında dinamik olarak yüklemek için [`i18next-resources-to-backend`](https://www.npmjs.com/package/i18next-resources-to-backend) kullanın. Örneğin, projenizde bir `i18n.ts` (veya `.js`) dosyası oluşturun:
+
+```typescript title="i18n.ts"
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+
+i18next
+  // react-i18next eklentisi
+  .use(initReactI18next)
+  // kaynakları dinamik olarak yükle
+  .use(
+    resourcesToBackend((language: string, namespace: string) => {
+      // İçe aktarma yolunu kaynak dizininize göre ayarlayın
+      return import(`../i18next/resources/${language}/${namespace}.json`);
+    })
+  )
+  // i18next'i başlat
+  .init({
+    // Yedek yerel
+    fallbackLng: "en",
+
+    // Diğer i18next yapılandırma seçeneklerini buraya ekleyebilirsiniz, bkz.:
+    // https://www.i18next.com/overview/configuration-options
+  });
+
+export default i18next;
+```
+
+```javascript title="i18n.js"
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+
+i18next
+  .use(initReactI18next)
+  .use(
+    resourcesToBackend(
+      (language, namespace) =>
+        import(`../i18next/resources/${language}/${namespace}.json`)
+    )
+  )
+  .init({
+    fallbackLng: "en",
+  });
+
+export default i18next;
+```
+
+Sonra, **kök** veya **index** dosyanızda (örneğin, `src/index.tsx`), bu `i18n` kurulumunu `App` render edilmeden **önce** içe aktarın:
+
+```typescript
+import React from "react";
+import ReactDOM from "react-dom/client";
+// Her şeyden önce i18n'i başlat
+import "./i18n";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+## Sözlüklerinizi Oluşturma ve Yönetme
+
+Intlayer çevirileri `./src` altında (varsayılan olarak) bulunan "içerik beyan dosyalarından" çıkarır.  
+TypeScript'te minimal bir örnek burada:
+
+```typescript title="src/components/MyComponent/MyComponent.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const content = {
+  // "key" sizin i18next ad alanınız olacak (örneğin, "my-component")
+  key: "my-component",
+  content: {
+    // Her "t" çağrısı ayrı bir çeviri düğümüdür
+    heading: t({
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+    description: t({
+      en: "My i18n description text...",
+      fr: "Ma description en i18n...",
+      es: "Mi descripción en i18n...",
+    }),
+  },
+} satisfies Dictionary;
+
+export default content;
+```
+
+JSON, `.cjs` veya `.mjs` tercih ederseniz, [Intlayer dokümantasyonuna](https://intlayer.org/en/doc/concept/content) bakın.
+
+> Varsayılan olarak, geçerli içerik beyanları dosya uzantısı kalıbıyla eşleşir:
+
+> `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`
+
+## React Bileşenlerinde Çevirileri Kullanma
+
+Intlayer kaynaklarınızı **oluşturduktan** ve react-i18next'i yapılandırdıktan sonra, **react-i18next**'ten `useTranslation` hook'unu doğrudan kullanabilirsiniz.  
+Örneğin:
+
+```tsx title="src/components/MyComponent/MyComponent.tsx"
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * i18next "ad alanı" "MyComponent.content.ts" dosyasındaki Intlayer `key`'dir
+ * bu yüzden useTranslation()'a "my-component" geçireceğiz.
+ */
+const MyComponent: FC = () => {
+  const { t } = useTranslation("my-component");
+
+  return (
+    <div>
+      <h1>{t("heading")}</h1>
+      <p>{t("description")}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+> `t` fonksiyonunun oluşturulan JSON içindeki **anahtarlara** başvurduğunu unutmayın. `heading` adlı bir Intlayer içerik girişi için `t("heading")` kullanacaksınız.
+
+## İsteğe Bağlı: Create React App Scripts (CRACO) ile Entegrasyon
+
+**react-intlayer**, özel yapılar ve dev sunucu yapılandırması için CRACO tabanlı bir yaklaşım sağlar. Intlayer'ın build adımını sorunsuz bir şekilde entegre etmek istiyorsanız:
+
+1. **react-intlayer** yükleyin (henüz yüklemediyseniz):
+   ```bash
+   npm install react-intlayer --save-dev
+   ```
+2. **`package.json` script'lerinizi** `react-intlayer` script'lerini kullanacak şekilde ayarlayın:
+
+   ```jsonc
+   "scripts": {
+     "start": "react-intlayer start",
+     "build": "react-intlayer build",
+     "transpile": "intlayer build"
+   }
+   ```
+
+   > `react-intlayer` script'leri [CRACO](https://craco.js.org/) tabanlıdır. intlayer craco eklentisine dayalı kendi kurulumunuzu da uygulayabilirsiniz. [Örneğe buradan bakın](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
+
+Şimdi, `npm run build`, `yarn build` veya `pnpm build` çalıştırmak hem Intlayer hem de CRA yapılarını tetikler.
+
+## TypeScript Yapılandırması
+
+**Intlayer**, içeriğiniz için **otomatik oluşturulan tip tanımlarını** sağlar. TypeScript'in bunları almasını sağlamak için **`types`** (veya farklı yapılandırdıysanız `types`) dizinini `tsconfig.json` **include** dizisine ekleyin:
+
+```json5 title="tsconfig.json"
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", "types"],
+}
+```
+
+> Bu, TypeScript'in çevirilerinizin şeklini çıkararak daha iyi otomatik tamamlama ve hata algılama sağlamasına izin verir.
+
+## Git Yapılandırması
+
+Intlayer tarafından otomatik oluşturulan dosyaları ve klasörleri **yoksaymak** önerilir. `.gitignore` dosyanıza bu satırı ekleyin:
+
+```plaintext
+# Intlayer tarafından oluşturulan dosyaları yoksay
+.intlayer
+i18next
+```
+
+Genellikle bu kaynakları veya `.intlayer` iç yapı eserlerini **commit etmezsiniz**, çünkü her yapıda yeniden oluşturulabilirler.

package/blog/tr/intlayer_with_react-intl.md

@@ -0,0 +1,345 @@
+---
+createdAt: 2025-09-07
+updatedAt: 2025-09-07
+title: Intlayer ve react-intl
+description: React uygulaması için Intlayer'ı react-intl ile entegre edin
+keywords:
+  - react-intl
+  - Intlayer
+  - Internationalization
+  - Blog
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - intlayer-with-react-intl
+---
+
+# React Uluslararasılaştırma (i18n) ile **react-intl** ve Intlayer
+
+Bu rehber, React uygulamasında çevirileri yönetmek için **Intlayer**'ı **react-intl** ile nasıl entegre edeceğinizi gösterir. Çevrilebilir içeriğinizi Intlayer ile beyan edeceksiniz ve ardından bu mesajları **react-intl** ile tüketeceksiniz, [FormatJS](https://formatjs.io/docs/react-intl) ekosisteminden popüler bir kütüphane.
+
+## Genel Bakış
+
+- **Intlayer**, çevirileri projenizde **bileşen düzeyinde** içerik beyan dosyalarında (JSON, JS, TS vb.) saklamanıza izin verir.
+- **react-intl**, yerelleştirilmiş dizeleri görüntülemek için React bileşenleri ve hook'lar ( `<FormattedMessage>` ve `useIntl()` gibi) sağlar.
+
+Intlayer'ı çevirileri **react-intl–uyumlu** bir formatta **dışa aktarmak** için yapılandırarak, `<IntlProvider>` (react-intl'den) tarafından gereken mesaj dosyalarını otomatik olarak **oluşturabilir** ve **güncelleyebilirsiniz**.
+
+---
+
+## Neden Intlayer'ı react-intl ile Kullanmalı?
+
+1. **Bileşen Başına Sözlükler**  
+   Intlayer içerik beyan dosyaları React bileşenlerinizin yanında yaşayabilir, bileşenler taşındığında veya kaldırıldığında "yetim" çevirileri önler. Örneğin:
+
+   ```bash
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.ts   # Intlayer içerik beyan
+               └── index.tsx          # React bileşeni
+   ```
+
+2. **Merkezi Çeviriler**  
+   Her içerik beyan dosyası bir bileşen tarafından ihtiyaç duyulan tüm çevirileri toplar. Bu, özellikle TypeScript projelerinde yardımcı olur: eksik çeviriler **derleme zamanında** yakalanabilir.
+
+3. **Otomatik Oluşturma ve Yeniden Oluşturma**  
+   Çeviri eklediğinizde veya güncellediğinizde, Intlayer mesaj JSON dosyalarını yeniden oluşturur. Bunları react-intl’in `<IntlProvider>`'ına geçebilirsiniz.
+
+---
+
+## Kurulum
+
+Tipik bir React projesinde şunları yükleyin:
+
+```bash
+# npm ile
+npm install intlayer react-intl
+
+# yarn ile
+yarn add intlayer react-intl
+
+# pnpm ile
+pnpm add intlayer react-intl
+```
+
+### Bu Paketler Neden?
+
+- **intlayer**: İçerik beyanlarını tarar, birleştirir ve sözlük çıktılarını oluşturur.
+- **react-intl**: FormatJS'ten ana kütüphane, `<IntlProvider>`, `<FormattedMessage>`, `useIntl()` ve diğer uluslararasılaştırma primitiflerini sağlar.
+
+> React'i henüz yüklemediyseniz, onu da yüklemeniz gerekir (`react` ve `react-dom`).
+
+## react-intl Mesajlarını Dışa Aktarmak İçin Intlayer'ı Yapılandırma
+
+Projenizin kökünde **`intlayer.config.ts`** (veya `.js`, `.mjs`, `.cjs`) oluşturun:
+
+```typescript title="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    // İstediğiniz kadar yerel ekleyin
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  content: {
+    // Intlayer'a react-intl için mesaj dosyaları oluşturmasını söyler
+    dictionaryOutput: ["react-intl"],
+
+    // Intlayer'ın mesaj JSON dosyalarınızı yazacağı dizin
+    reactIntlMessagesDir: "./react-intl/messages",
+  },
+};
+
+export default config;
+```
+
+> **Not**: Diğer dosya uzantıları için (`.mjs`, `.cjs`, `.js`), kullanım detayları için [Intlayer dokümantasyonuna](https://intlayer.org/en/doc/concept/configuration) bakın.
+
+---
+
+## Intlayer Sözlüklerinizi Oluşturma
+
+Intlayer kod tabanınızı (varsayılan olarak `./src` altında) `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}` ile eşleşen dosyalar için tarar.  
+**TypeScript** örneği burada:
+
+```typescript title="src/components/MyComponent/index.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const content = {
+  // "key" react-intl JSON dosyanızda üst düzey mesaj anahtarı olur
+  key: "my-component",
+
+  content: {
+    // t() çağrısının her biri çevrilebilir bir alan beyan eder
+    helloWorld: t({
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+    description: t({
+      en: "This is a description",
+      fr: "Ceci est une description",
+      es: "Esta es una descripción",
+    }),
+  },
+} satisfies Dictionary;
+
+export default content;
+```
+
+JSON veya farklı JS türlerini tercih ederseniz (`.cjs`, `.mjs`), yapı büyük ölçüde aynıdır, bkz. [Intlayer içerik beyan dokümantasyonu](https://intlayer.org/en/doc/concept/content).
+
+---
+
+## react-intl Mesajlarını Oluşturma
+
+**react-intl** için gerçek mesaj JSON dosyalarını oluşturmak için şunu çalıştırın:
+
+```bash
+# npm ile
+npx intlayer dictionaries build
+
+# yarn ile
+yarn intlayer build
+
+# pnpm ile
+pnpm intlayer build
+```
+
+Bu, tüm `*.content.*` dosyalarını tarar, derler ve sonuçları **`intlayer.config.ts`**'inizde belirtilen dizine yazar, bu örnekte `./react-intl/messages`.  
+Tipik bir çıktı şöyle görünebilir:
+
+```bash
+.
+└── react-intl
+    └── messages
+        ├── en.json
+        ├── fr.json
+        └── es.json
+```
+
+Her dosya, beyanlarınızın her **`content.key`**'ine karşılık gelen **üst düzey anahtarlara** sahip bir JSON nesnesidir. **Alt anahtarlar** ( `helloWorld` gibi) o içerik öğesi içinde beyan edilen çevirileri yansıtır.
+
+Örneğin, **en.json** şöyle görünebilir:
+
+```json fileName="react-intl/messages/en/my-component.json"
+{
+  "helloWorld": "Hello World",
+  "description": "This is a description"
+}
+```
+
+---
+
+## React Uygulamanızda react-intl'i Başlatma
+
+### 1. Oluşturulan Mesajları Yükleyin
+
+Uygulamanızın kök bileşenini yapılandırdığınız yerde (örneğin, `src/main.tsx` veya `src/index.tsx`), şunları yapmanız gerekir:
+
+1. **İçe aktarın** oluşturulan mesaj dosyalarını (statik olarak veya dinamik olarak).
+2. **Sağlayın** bunları `react-intl`'den `<IntlProvider>`'a.
+
+Basit bir yaklaşım onları **statik olarak** içe aktarmaktır:
+
+```typescript title="src/index.tsx"
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { IntlProvider } from "react-intl";
+import App from "./App";
+
+// Yapı çıktısından JSON dosyalarını içe aktarın.
+// Alternatif olarak, kullanıcının seçtiği yerele göre dinamik olarak içe aktarabilirsiniz.
+import en from "../react-intl/messages/en.json";
+import fr from "../react-intl/messages/fr.json";
+import es from "../react-intl/messages/es.json";
+
+
+
+// Vite'nin import.meta.glob kullanarak tüm JSON dosyalarını dinamik olarak içe aktarın
+const messages = import.meta.glob("../react-intl/messages/**/*.json", {
+  eager: true,
+});
+
+// Mesajları yapılandırılmış bir kayda toplayın
+const messagesRecord: Record<string, Record<string, any>> = {};
+
+Object.entries(messages).forEach(([path, module]) => {
+  // Dosya yolundan yerel ve ad alanını çıkarın
+  const [, locale, namespace] = path.match(/messages\/(\w+)\/(.+?)\.json$/) ?? [];
+  if (locale && namespace) {
+    messagesRecord[locale] = messagesRecord[locale] ?? {};
+    messagesRecord[locale][namespace] = module.default; // JSON içeriğini atayın
+  }
+});
+
+// Her yerel için ad alanlarını birleştirin
+const mergeMessages = (locale: string) =>
+  Object.values(messagesRecord[locale] ?? {}).reduce(
+    (acc, namespaceMessages) => ({ ...acc, ...namespaceMessages }),
+    {}
+  );
+
+// Kullanıcının dilini algılamak için bir mekanizmanız varsa, burada ayarlayın.
+// Basitlik için İngilizce'yi seçelim.
+const locale = "en";
+
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <IntlProvider locale={locale} messages={mergeMessages(locale)}>
+      <App />
+    </IntlProvider>
+  </React.StrictMode>
+);
+```
+
+> **İpucu**: Gerçek projeler için şunları yapabilirsiniz:
+
+> - JSON mesajlarını çalışma zamanında dinamik olarak yükleyin.
+> - Ortama dayalı, tarayıcıya dayalı veya kullanıcı hesabına dayalı yerel algılama kullanın.
+
+### 2. `<FormattedMessage>` veya `useIntl()` Kullanın
+
+Mesajlarınız `<IntlProvider>`'a yüklendikten sonra, herhangi bir alt bileşen react-intl'i yerelleştirilmiş dizelere erişmek için kullanabilir. İki ana yaklaşım vardır:
+
+- **`<FormattedMessage>`** bileşeni
+- **`useIntl()`** hook'u
+
+---
+
+## React Bileşenlerinde Çevirileri Kullanma
+
+### Yaklaşım A: `<FormattedMessage>`
+
+Hızlı satır içi kullanım için:
+
+```tsx title="src/components/MyComponent/index.tsx"
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+export default function MyComponent() {
+  return (
+    <div>
+      <h1>
+        {/* “my-component.helloWorld” en.json, fr.json vb.'den anahtara başvurur */}
+        <FormattedMessage id="my-component.helloWorld" />
+      </h1>
+
+      <p>
+        <FormattedMessage id="my-component.description" />
+      </p>
+    </div>
+  );
+}
+```
+
+> `<FormattedMessage>`'teki **`id`** prop'u **üst düzey anahtar** (`my-component`) artı herhangi bir alt anahtar (`helloWorld`) ile eşleşmelidir.
+
+### Yaklaşım B: `useIntl()`
+
+Daha dinamik kullanım için:
+
+```tsx title="src/components/MyComponent/index.tsx"
+import React from "react";
+import { useIntl } from "react-intl";
+
+export default function MyComponent() {
+  const intl = useIntl();
+
+  return (
+    <div>
+      <h1>{intl.formatMessage({ id: "my-component.helloWorld" })}</h1>
+      <p>{intl.formatMessage({ id: "my-component.description" })}</p>
+    </div>
+  );
+}
+```
+
+Her iki yaklaşım da geçerlidir, uygulamanıza uygun olanı seçin.
+
+---
+
+## Yeni Çeviriler Güncelleme veya Ekleme
+
+1. Herhangi bir `*.content.*` dosyasında içeriği **ekleyin veya değiştirin**.
+2. `./react-intl/messages` altında JSON dosyalarını yeniden oluşturmak için `intlayer build` komutunu yeniden çalıştırın.
+3. React (ve react-intl) güncellemeleri bir sonraki yeniden oluşturma veya yeniden yükleme sırasında alacak.
+
+---
+
+## TypeScript Entegrasyonu (İsteğe Bağlı)
+
+TypeScript kullanıyorsanız, Intlayer çevirileriniz için **tip tanımlarını oluşturabilir**.
+
+- `tsconfig.json`'ınızın `"include"` dizisinde `types` klasörünüzü (veya Intlayer'ın oluşturduğu çıktı klasörünü) içerdiğinden emin olun.
+
+```json5
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", "types"],
+}
+```
+
+Oluşturulan tipler, React bileşenlerinizde eksik çevirileri veya geçersiz anahtarları derleme zamanında algılamaya yardımcı olabilir.
+
+---
+
+## Git Yapılandırması
+
+Intlayer'ın iç yapı eserlerini sürüm kontrolünden **hariç tutmak** yaygındır. `.gitignore` dosyanıza şunu ekleyin:
+
+```plaintext
+# Intlayer yapı eserlerini yoksay
+.intlayer
+react-intl
+```
+
+İş akışınıza bağlı olarak, `./react-intl/messages` içindeki son sözlükleri yoksayabilir veya commit edebilirsiniz. CI/CD boru hattınız onları yeniden oluşturuyorsa, güvenle yoksayabilirsiniz; aksi takdirde, üretim dağıtımları için ihtiyaç duyarsanız commit edin.