@intlayer/docs 5.8.1-canary.0 → 6.0.0-canary.0

package/blog/tr/intlayer_with_next-intl.md

@@ -0,0 +1,392 @@
+---
+createdAt: 2025-09-07
+updatedAt: 2025-09-07
+title: Intlayer ve next-intl
+description: React uygulaması için Intlayer'ı next-intl ile entegre edin
+keywords:
+  - next-intl
+  - Intlayer
+  - Internationalization
+  - Blog
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - intlayer-with-next-intl
+---
+
+# next-intl ve Intlayer ile Next.js Uluslararasılaştırma (i18n)
+
+Hem next-intl hem de Intlayer, Next.js uygulamaları için tasarlanmış açık kaynaklı uluslararasılaştırma (i18n) çerçeveleridir. Yazılım projelerinde çevirileri, yerelleştirmeyi ve dil değiştirmeyi yönetmek için yaygın olarak kullanılırlar.
+
+Üç temel kavramı paylaşırlar:
+
+1. **Sözlük**: Uygulamanızın çevrilebilir içeriğini tanımlama yöntemi.
+   - Intlayer'da `content declaration file` olarak adlandırılır, yapılandırılmış veriyi dışa aktaran bir JSON, JS veya TS dosyası olabilir. Daha fazla bilgi için [Intlayer dokümantasyonuna](https://intlayer.org/fr/doc/concept/content) bakın.
+   - next-intl'de `messages` veya `locale messages` olarak adlandırılır, genellikle JSON dosyalarında. Daha fazla bilgi için [next-intl dokümantasyonuna](https://github.com/amannn/next-intl) bakın.
+
+2. **Araçlar**: Uygulamada içerik beyanlarını oluşturmak ve yorumlamak için araçlar, örneğin Intlayer için `useIntlayer()` veya `useLocale()`, next-intl için `useTranslations()`.
+
+3. **Eklentiler ve Ara Yazılımlar**: URL yönlendirmesini, paket optimizasyonunu vb. yönetmek için özellikler, örneğin Intlayer için `intlayerMiddleware` veya next-intl için [`createMiddleware`](https://github.com/amannn/next-intl).
+
+## Intlayer vs. next-intl: Temel Farklılıklar
+
+Intlayer'ın Next.js için diğer i18n kütüphaneleriyle (next-intl gibi) nasıl karşılaştırıldığına dair daha derin bir analiz için [next-i18next vs. next-intl vs. Intlayer blog yazısına](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/i18next_vs_next-intl_vs_intlayer.md) bakın.
+
+## Intlayer ile next-intl Mesajları Nasıl Oluşturulur
+
+### Neden Intlayer'ı next-intl ile Kullanmalı?
+
+Intlayer içerik beyan dosyaları genellikle daha iyi bir geliştirici deneyimi sunar. İki ana avantaj nedeniyle daha esnek ve sürdürülebilirlerdir:
+
+1. **Esnek Yerleştirme**: Intlayer içerik beyan dosyasını uygulamanızın dosya ağacında herhangi bir yere yerleştirebilirsiniz. Bu, kullanılmayan veya sallanan mesaj dosyaları bırakmadan bileşenleri yeniden adlandırmayı veya silmeyi kolaylaştırır.
+
+   Örnek dosya yapıları:
+
+   ```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**: Intlayer tüm çevirileri tek bir içerik beyanında depolar, hiçbir çevirinin eksik olmasını sağlar. TypeScript projelerinde, eksik çeviriler otomatik olarak tip hataları olarak işaretlenir, geliştiricilere anında geri bildirim sağlar.
+
+### Kurulum
+
+Intlayer ve next-intl'i birlikte kullanmak için her iki kütüphaneyi de yükleyin:
+
+```bash packageManager="npm"
+npm install intlayer next-intl
+```
+
+```bash packageManager="yarn"
+yarn add intlayer next-intl
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer next-intl
+```
+
+### next-intl Mesajlarını Dışa Aktarmak İçin Intlayer'ı Yapılandırma
+
+> **Not:** Intlayer'dan next-intl için mesajları dışa aktarmak yapıda hafif farklılıklar getirebilir. Mümkünse, entegrasyonu basitleştirmek için Intlayer-only veya next-intl-only akışını koruyun. Intlayer'dan next-intl mesajları oluşturmanız gerekiyorsa, aşağıdaki adımları takip edin.
+
+Projenizin kökünde bir `intlayer.config.ts` dosyası oluşturun veya güncelleyin (.mjs / .cjs):
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  content: {
+    dictionaryOutput: ["next-intl"], // next-intl çıktısını kullan
+    nextIntlMessagesDir: "./intl/messages", // next-intl mesajlarının kaydedileceği yer
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  content: {
+    dictionaryOutput: ["react-intl"],
+    nextIntlMessagesDir: "./intl/messages",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  content: {
+    dictionaryOutput: ["next-intl"],
+    nextIntlMessagesDir: "./intl/messages",
+  },
+};
+
+module.exports = config;
+```
+
+### Sözlük
+
+Çeşitli formatlardaki içerik beyan dosyalarının örnekleri aşağıdadır. Intlayer bunları next-intl'in tüketebileceği mesaj dosyalarına derleyecektir.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const content = {
+  key: "my-component",
+  content: {
+    helloWorld: t({
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+} satisfies Dictionary;
+
+export default content;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const content = {
+  key: "my-component",
+  content: {
+    helloWorld: t({
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+};
+
+export default content;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { t } = require("intlayer");
+
+module.exports = {
+  key: "my-component",
+  content: {
+    helloWorld: t({
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+};
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my-component",
+  "content": {
+    "helloWorld": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Hello World",
+        "fr": "Bonjour le monde",
+        "es": "Hola Mundo"
+      }
+    }
+  }
+}
+```
+
+### next-intl Mesajlarını Oluştur
+
+next-intl için mesaj dosyalarını oluşturmak için şunu çalıştırın:
+
+```bash packageManager="npm"
+npx intlayer dictionaries build
+```
+
+```bash packageManager="yarn"
+yarn intlayer build
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer build
+```
+
+Bu, `./intl/messages` dizininde kaynaklar oluşturacaktır ( `intlayer.config.*` dosyasında yapılandırıldığı gibi). Beklenen çıktı:
+
+```bash
+.
+└── intl
+    └── messages
+       └── en
+           └── my-content.json
+       └── fr
+           └── my-content.json
+       └── es
+           └── my-content.json
+```
+
+Her dosya, tüm Intlayer içerik beyanlarından derlenmiş mesajları içerir. Üst düzey anahtarlar genellikle `content.key` alanlarınızla eşleşir.
+
+### Next.js Uygulamanızda next-intl Kullanma
+
+> Daha fazla detay için resmi [next-intl kullanım dokümantasyonuna](https://github.com/amannn/next-intl#readme) bakın.
+
+1. **Bir Ara Yazılım Oluşturun (isteğe bağlı):**  
+   Otomatik yerel algılama veya yönlendirmeyi yönetmek istiyorsanız, next-intl’in [createMiddleware](https://github.com/amannn/next-intl#createMiddleware) özelliğini kullanın.
+
+   ```typescript fileName="middleware.ts"
+   import createMiddleware from "next-intl/middleware";
+   import { NextResponse } from "next/server";
+
+   export default createMiddleware({
+     locales: ["en", "fr", "es"],
+     defaultLocale: "en",
+   });
+
+   export const config = {
+     matcher: ["/((?!api|_next|.*\\..*).*)"],
+   };
+   ```
+
+2. **Mesajları Yüklemek İçin `layout.tsx` veya `_app.tsx` Oluşturun:**  
+   App Router kullanıyorsanız (Next.js 13+), bir layout oluşturun:
+
+   ```typescript fileName="app/[locale]/layout.tsx"
+   import { NextIntlClientProvider } from 'next-intl';
+   import { notFound } from 'next/navigation';
+   import React, { ReactNode } from 'react';
+
+
+   export default async function RootLayout({
+     children,
+     params
+   }: {
+     children: ReactNode;
+     params: { locale: string };
+   }) {
+     let messages;
+     try {
+       messages = (await import(`../../intl/messages/${params.locale}.json`)).default;
+     } catch (error) {
+       notFound();
+     }
+
+     return (
+       <html lang={params.locale}>
+         <body>
+           <NextIntlClientProvider locale={params.locale} messages={messages}>
+             {children}
+           </NextIntlClientProvider>
+         </body>
+       </html>
+     );
+   }
+   ```
+
+   Pages Router kullanıyorsanız (Next.js 12 veya aşağı), mesajları `_app.tsx` dosyasında yükleyin:
+
+   ```typescript fileName="pages/_app.tsx"
+   import type { AppProps } from 'next/app';
+   import { NextIntlProvider } from 'next-intl';
+
+   function MyApp({ Component, pageProps }: AppProps) {
+     return (
+       <NextIntlProvider locale={pageProps.locale} messages={pageProps.messages}>
+         <Component {...pageProps} />
+       </NextIntlProvider>
+     );
+   }
+
+   export default MyApp;
+   ```
+
+3. **Mesajları Sunucu Tarafında Getirin (Pages Router örneği):**
+
+   ```typescript fileName="pages/index.tsx"
+   import { GetServerSideProps } from "next";
+   import HomePage from "../components/HomePage";
+
+   export default HomePage;
+
+   export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
+     const messages = (await import(`../intl/messages/${locale}.json`)).default;
+
+     return {
+       props: {
+         locale,
+         messages,
+       },
+     };
+   };
+   ```
+
+### Next.js Bileşenlerinde İçeriği Kullanma
+
+Mesajlar next-intl'e yüklendikten sonra, `useTranslations()` hook'u aracılığıyla bileşenlerinizde kullanabilirsiniz:
+
+```typescript fileName="src/components/MyComponent/index.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useTranslations } from 'next-intl';
+
+const MyComponent: FC = () => {
+  const t = useTranslations('my-component');
+  // 'my-component' Intlayer'daki içerik anahtarına karşılık gelir
+
+  return (
+    <div>
+      <h1>{t('helloWorld')}</h1>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+```jsx fileName="src/components/MyComponent/index.jsx" codeFormat="esm"
+import { useTranslations } from "next-intl";
+
+export default function MyComponent() {
+  const t = useTranslations("my-component");
+
+  return (
+    <div>
+      <h1>{t("helloWorld")}</h1>
+    </div>
+  );
+}
+```
+
+**Hepsi bu kadar!** Intlayer içerik beyan dosyalarınızı güncellediğinizde veya yeni eklediğinizde, next-intl JSON mesajlarınızı yeniden oluşturmak için `intlayer build` komutunu yeniden çalıştırın. next-intl güncellenmiş içeriği otomatik olarak alacak.