i18next'ten Intlayer'a Geçiş

Neden i18next'ten Intlayer'a geçmelisiniz?

Geçiş Stratejileri

i18next'ten Intlayer'a geçiş yapmak için birbirini tamamlayan iki strateji vardır:

1. Uyumluluk Adaptörü (Mevcut uygulamalar için önerilir) — @intlayer/i18next paketini kurun. Bu paket, arka planda tüm çeviri işini Intlayer'a devrederek i18next ile tamamen aynı API'yi sunar. Mevcut i18next.t(), i18next.changeLanguage() ve createInstance() çağrılarınız dokunulmadan kalır; değişen tek şey içe aktarma yolu ve başlatma (initialization) ayarlarıdır.

2. Tam Geçiş — i18next API'lerini kademeli olarak Intlayer'ın yerel (native) araçlarıyla değiştirin ve içeriğinizi bileşenlerinizin yanındaki .content.ts dosyalarında tutun (colocate).

Bu kılavuz, öncelikle Strateji 1'i (doğrudan eklenebilir uyumluluk adaptörü) kapsar ve ardından isteğe bağlı tam geçişten bahseder.

İçindekiler

Hızlı Geçiş

Aşağıdaki adımlar, mevcut i18next uygulamanızı herhangi bir kod değişikliği yapmadan Intlayer üzerinde çalıştırmak için gereken minimum işlemlerdir.

1. 1

   Bağımlılıkları Kurun

   Temel Intlayer paketi ile uyumluluk adaptörünü kurun:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm install intlayer @intlayer/i18next @intlayer/sync-json-pluginnpx intlayer init

   i18next kurulumunu güvenle yerinde bırakabilirsiniz; uyumluluk adaptörü TypeScript türleri için onu bir devDependency / peerDependency olarak kullanır.

2. 2

   Intlayer'ı Yapılandırın

   intlayer init komutu başlangıç olarak bir intlayer.config.ts dosyası oluşturur. Bunu mevcut yerel ayarlarınıza (locales) uyacak şekilde güncelleyin ve mesaj dosyalarınızı syncJSON eklentisine işaret edin:

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // Mevcut diğer dillerinizi (locales) buraya ekleyin
       ],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         // i18next yer tutucu sentaksıyla eşleşir: {{name}}
         format: "i18next",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
   };
   
   export default config;

   source, bir yerel ayarı JSON dosya yolunuza eşler. location, Intlayer izleyicisine (watcher) değişiklikler için hangi klasörü izlemesi gerektiğini söyler. format: 'i18next' seçeneği, {{name}} gibi yer tutucuların (placeholder) doğru bir şekilde çözümlenmesini garanti eder.

3. 3

   Paketleyici (Bundler) Alias'ını Güncelleyin (Opsiyonel)

   Bir bundler (Vite, Webpack, esbuild) kullanıyorsanız, import ... from 'i18next' komutunun otomatik olarak @intlayer/i18next adresine çözümlenmesini sağlayan bir modül takma adı (alias) enjekte edebilirsiniz. Bu, kod tabanınızdaki içe aktarma yollarını manuel olarak değiştirme zorunluluğunu ortadan kaldırır.

   Vite İçin:

   vite.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { defineConfig } from "vite";
   import i18nextVitePlugin from "@intlayer/i18next/plugin";
   
   export default defineConfig({
     plugins: [i18nextVitePlugin()],
   });

   i18nextVitePlugin(), vite-intlayer altındaki normal intlayer() eklentisini sarmalar ve i18next → @intlayer/i18next alias'ını otomatik olarak ekler. Düzenli intlayer() vite-intlayer eklentisini kullanmak sözlükleri derler ancak alias eklemez; bu durumda içe aktarmaları manuel olarak @intlayer/i18next olarak yeniden adlandırmanız gerekir (sonraki adıma bakın).

Hızlı geçiş bu kadar. Uygulamanız artık i18next içe aktarmalarınız ve API'nizi olduğu gibi koruyarak Intlayer üzerinde çalışmaktadır.

Tam Geçiş

Aşağıdaki adımlar isteğe bağlıdır ve kademeli olarak yapılabilir. Bunlar, görsel editör, CMS, türetilmiş (typed) içerik dosyaları, AI çeviri otomasyonu gibi Intlayer özelliklerinin tam kapsamlı kullanımını sağlar.

1. 4

   İçe Aktarmaları Açıkça Yeniden Adlandırın (İsteğe Bağlı)

   İsteğe bağlı

   Bağımlılığı kaynak dosyalarınızda açık tutmayı veya içe aktarma alias'ı oluşturan bir bundler eklentisi kullanmamayı tercih ederseniz, içe aktarma yollarını manuel olarak yeniden adlandırabilirsiniz:

   Tüm tablo içeriğini göster

   Tüm tablo içeriğini göster

   Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın

   Öncesi	Sonrası
   import i18next from 'i18next'	import i18next from '@intlayer/i18next'
   import { createInstance } from 'i18next'	import { createInstance } from '@intlayer/i18next'
   import { t } from 'i18next'	import { t } from '@intlayer/i18next'

   Bunlar doğrudan değişimlerdir; fonksiyon çağırma şeklinizde, parametrelerde veya dönüş türlerinde değişiklik gerekmez.

2. 5

   AI Çeviri Otomasyonunu Etkinleştirin

   İsteğe bağlı

   Intlayer yapılandırıldığında, eksik çevirileri otomatik olarak doldurmak için CLI'yı kullanabilirsiniz:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   # Eksik çevirileri test et (CI'a ekleyin)npx intlayer test# Eksik çevirileri AI kullanarak doldurnpx intlayer fill

   AI yapılandırmanızı intlayer.config.ts dosyasına ekleyin:

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         format: "i18next",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
     ai: {
       apiKey: process.env.OPENAI_API_KEY,
       // provider: "openai",     // varsayılan
       // model: "gpt-4o-mini",   // varsayılan
     },
   };
   
   export default config;

   Mevcut tüm seçenekleri incelemek için Intlayer CLI Dokümantasyonuna göz atın.

Geçişten Sonra Silinebilecekler

Uyumluluk adaptörü kullanılmaya başlandığında, aşağıdaki standart i18next tekrarlayan kodları (boilerplate) kaldırılabilir:

Bir adım öteye geçmeye hazır olduğunuzda, Intlayer kod tabanınızın herhangi bir yerindeki (varsayılan olarak ./src altındaki herhangi bir yerde) tüm .content.ts ve .content.json dosyalarını otomatik olarak keşfeder. Sadece kodunuzun yanına bir my-component.content.ts dosyası bırakın, Intlayer onu ek bir yapılandırma olmadan derleme (build) sırasında yakalayacaktır. Ne içe aktarmaya, ne kayda, ne de merkezi bir indeks dosyasına ihtiyaç vardır. Bu sayede çeviriler bileşenlerinizle en kolay şekilde bir arada tutulur (colocation).

TypeScript Kurulumu

Intlayer, çeviri anahtarlarınız için kapsamlı TypeScript IntelliSense'i (otomatik tamamlama) sağlamak için modül genişletme (module augmentation) özelliğini kullanır. tsconfig.json dosyanızın otomatik oluşturulan türleri içerdiğinden emin olun:

{  // ... Mevcut TypeScript yapılandırmalarınız  "include": [    // ... Mevcut TypeScript yapılandırmalarınız    ".intlayer/**/*.ts", // Otomatik oluşturulan türleri içeriğe dahil edin  ],}

Git Yapılandırması

Intlayer tarafından oluşturulan dizini .gitignore dosyanıza ekleyin:

# Intlayer tarafından oluşturulan dosyaları yoksay.intlayer

Daha Fazlasını Keşfedin

• Görsel Editör — Çevirileri doğrudan tarayıcınızda görsel olarak yönetin: Intlayer Görsel Editör
• CMS — İçeriği projenizden ayırın ve uzaktan yönetin: Intlayer CMS
• VS Code Eklentisi — Otomatik tamamlama ve anında hata tespiti (hover) edinin: Intlayer VS Code Eklentisi
• CLI Referansı — CLI komutlarının tam listesi: Intlayer CLI