Neden Intlayer'ı Düşünmelisiniz?

Intlayer Nedir?

Intlayer, JavaScript geliştiricileri için özel olarak tasarlanmış bir uluslararasılaştırma (i18n) kütüphanesidir. İçeriğinizi kodunuzun her yerinde bildirmenize olanak tanır. Çok dilli içerik bildirimlerini yapılandırılmış sözlüklere dönüştürerek kodunuza kolayca entegre edilmesini sağlar. TypeScript kullanan Intlayer, geliştirme sürecinizi daha güçlü ve verimli hale getirir.

Neden Alternatifler Yerine Intlayer?

next-intl veya i18next gibi ana çözümlerle karşılaştırıldığında, Intlayer entegre optimizasyonlarla gelen bir çözümdür:

Intlayer Neden Oluşturuldu?

Intlayer, next-intl, react-i18next, react-intl, next-i18next, react-intl ve vue-i18n gibi tüm yaygın i18n kütüphanelerini etkileyen ortak bir sorunu çözmek için oluşturuldu.

Tüm bu çözümler, içeriğinizi listelemek ve yönetmek için merkezi bir yaklaşım benimser. Örneğin:

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Veya burada namespace kullanarak:

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

Bu tür bir mimari, geliştirme sürecini yavaşlatır ve kod tabanının bakımını birkaç nedenden dolayı daha karmaşık hale getirir:

1. Oluşturulan her yeni bileşen için şunları yapmalısınız:

   • locales klasöründe yeni kaynağı/namespace'i oluşturun
   • Sayfanıza yeni namespace'i import etmeyi unutmayın
   • İçeriğinizi çevirin (genellikle AI sağlayıcılarından manuel olarak kopyala/yapıştır yapılarak yapılır)

2. Bileşenlerinizde yapılan herhangi bir değişiklik için şunları yapmalısınız:

   • İlgili kaynağı/namespace'i arayın (bileşenden uzakta)
   • İçeriğinizi çevirin
   • İçeriğinizin her dil için güncel olduğundan emin olun
   • Namespace'inizin kullanılmayan anahtarlar/değerler içermediğini doğrulayın
   • JSON dosyalarınızın yapısının tüm diller için aynı olduğundan emin olun

Bu çözümleri kullanan profesyonel projelerde, içeriğinizin çevirisini yönetmeye yardımcı olmak için genellikle yerelleştirme platformları kullanılır. Ancak bu, büyük projeler için hızla maliyetli hale gelebilir.

Bu sorunu çözmek için Intlayer, içeriğinizi bileşen başına sınırlandıran ve CSS (styled-components), tipler, dokümantasyon (storybook) veya birim testlerinde (jest) sıkça yaptığımız gibi içeriğinizi bileşeninize yakın tutan bir yaklaşım benimser.

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

import { t, type Dictionary } from "intlayer";

const componentExampleContent = {
  key: "component-example",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentExampleContent;

import { useIntlayer } from "react-intlayer";

export const ComponentExample = () => {
  const { myTranslatedContent } = useIntlayer("component-example");

  return <span>{myTranslatedContent}</span>;
};

Bu yaklaşım şunları yapmanızı sağlar:

1. Geliştirme hızını artırın

   • .content.{{ts|mjs|cjs|json}} dosyaları bir VSCode eklentisi kullanılarak oluşturulabilir
   • IDE'nizdeki AI otomatik tamamlama araçları (GitHub Copilot gibi) içeriğinizi bildirmenize yardımcı olarak kopyala/yapıştır işlemlerini azaltabilir

2. Kod tabanınızı temizleyin

   • Karmaşıklığı azaltın
   • Bakım kolaylığını artırın

3. Bileşenlerinizi ve bunlarla ilgili içeriği daha kolay kopyalayın (Örnek: giriş/kayıt bileşenleri vb.)

   • Diğer bileşenlerin içeriğini etkileme riskini sınırlayarak
   • İçeriğinizi harici bağımlılıklar olmadan bir uygulamadan diğerine kopyalayıp yapıştırarak

4. Kullanılmayan bileşenler için kod tabanınızı kullanılmayan anahtarlarla/değerlerle kirletmekten kaçının

   • Bir bileşeni kullanmazsanız, Intlayer onunla ilgili içeriği import etmez
   • Bir bileşeni silerseniz, aynı klasörde bulunacağı için ilgili içeriği silmeyi daha kolay hatırlarsınız

5. AI ajanlarının çok dilli içeriğinizi bildirmesi için muhakeme maliyetini azaltın

   • AI ajanı, içeriğinizi nerede uygulayacağını bilmek için tüm kod tabanınızı taramak zorunda kalmayacak
   • Çeviriler, IDE'nizdeki AI otomatik tamamlama araçları (GitHub Copilot gibi) tarafından kolayca yapılabilir

6. Yükleme performansını optimize edin

   • Bir bileşen lazy-load yüklenirse, ilgili içeriği de aynı anda yüklenecektir

Intlayer'ın Ek Özellikleri

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

Özellik	Açıklama
	Çoklu Framework Desteği Intlayer; Next.js, React, Vite, Vue.js, Nuxt, Preact, Express ve daha fazlası dahil olmak üzere tüm büyük framework'ler ve kütüphanelerle uyumludur.
	JavaScript Destekli İçerik Yönetimi İçeriğinizi verimli bir şekilde tanımlamak ve yönetmek için JavaScript'in esnekliğinden yararlanın. - İçerik bildirimi
	Derleyici Intlayer Derleyicisi, bileşenlerden içeriği otomatik olarak çıkarır ve sözlük dosyalarını oluşturur. - Derleyici
	Dil Başına İçerik Bildirim Dosyası Otomatik üretimden önce içeriğinizi bir kez bildirerek geliştirmenizi hızlandırın. - Dil Başına İçerik Bildirim Dosyası
	Tip Güvenlikli Ortam İçerik tanımlarınızın ve kodunuzun hatasız olmasını sağlamak için TypeScript'ten yararlanın ve aynı zamanda IDE otomatik tamamlamasından yararlanın. - TypeScript yapılandırması
	Basitleştirilmiş Kurulum Minimum yapılandırma ile hızla kurun ve çalıştırın. Uluslararasılaştırma, yönlendirme, AI, derleme ve içerik işleme ayarlarını kolaylıkla yapın. - Next.js entegrasyonunu keşfedin
	Basitleştirilmiş İçerik Çekme Her içerik parçası için t fonksiyonunuzu çağırmanıza gerek yok. Tek bir hook kullanarak tüm içeriğinizi doğrudan çekin. - React entegrasyonu
	Tutarlı Server Component Uygulaması Next.js server component'leri için mükemmel şekilde uygundur; hem client hem de server component'leri için aynı uygulamayı kullanın, t fonksiyonunuzu her server component'e aktarmanıza gerek kalmaz. - Server Component'leri
	Düzenli Kod Tabanı Kod tabanınızı daha düzenli tutun: Aynı klasörde 1 bileşen = 1 sözlük. İlgili bileşenlerine yakın çeviriler, bakım kolaylığını ve netliği artırır. - Intlayer nasıl çalışır
	Gelişmiş Yönlendirme Next.js, React, Vite, Vue.js vb. için karmaşık uygulama yapılarına sorunsuz bir şekilde uyum sağlayan tam uygulama yönlendirme desteği. - Next.js entegrasyonunu keşfedin
	Markdown Desteği Gizlilik politikaları, dokümantasyon vb. gibi çok dilli içerikler için yerel dosyaları ve uzak Markdown'ı içe aktarın ve yorumlayın. Kodunuzda Markdown meta verilerini yorumlayın ve erişilebilir hale getirin. - İçerik dosyaları
	Ücretsiz Görsel Editör ve CMS İçerik yazarları için ücretsiz bir görsel editör ve CMS mevcuttur, bu da bir yerelleştirme platformuna olan ihtiyacı ortadan kaldırır. Git kullanarak içeriğinizi senkronize tutun veya CMS ile tamamen veya kısmen dışsallaştırın. - Intlayer Editörü - Intlayer CMS
	Tree-shakable İçerik Nihai paket boyutunu azaltan tree-shakable içerik. İçeriği bileşen başına yükler, kullanılmayan içerikleri paketinizden hariç tutar. Uygulama yükleme verimliliğini artırmak için lazy loading desteği sunar. - Uygulama derleme optimizasyonu
	Statik Oluşturma (Static Rendering) Statik Oluşturmayı engellemez. - Next.js entegrasyonu
	AI Destekli Çeviri Kendi AI sağlayıcınızı/API anahtarınızı kullanarak Intlayer'ın gelişmiş AI destekli çeviri araçlarıyla web sitenizi tek bir tıklamayla 231 dile dönüştürün. - CI/CD entegrasyonu - Intlayer CLI - Otomatik Doldurma
	MCP Sunucu Entegrasyonu IDE otomasyonu için bir MCP (Model Context Protocol) sunucusu sağlayarak, doğrudan geliştirme ortamınızda sorunsuz içerik yönetimi ve i18n iş akışları sağlar. - MCP Sunucusu
	VSCode Eklentisi Intlayer, içeriğinizi ve çevirilerinizi yönetmenize, sözlüklerinizi derlemenize, içeriğinizi çevirmenize ve daha fazlasına yardımcı olacak bir VSCode eklentisi sağlar. - VSCode Eklentisi
	Birlikte Çalışabilirlik react-i18next, next-i18next, next-intl ve react-intl ile birlikte çalışabilirliğe izin verir. - Intlayer ve react-intl - Intlayer ve next-intl - Intlayer ve next-i18next
Eksik Çevirileri Test Etme (CLI/CI)	✅ CLI: npx intlayer content test (CI dostu denetim)

Intlayer'ın Diğer Çözümlerle Karşılaştırılması

GitHub Yıldızları

GitHub yıldızları, bir projenin popülerliğinin, topluluk güveninin ve uzun vadeli alakasının güçlü bir göstergesidir. Teknik kalitenin doğrudan bir ölçüsü olmasa da, kaç geliştiricinin projeyi yararlı bulduğunu, ilerlemesini takip ettiğini ve onu benimseme olasılığının yüksek olduğunu yansıtır. Bir projenin değerini tahmin etmek için yıldızlar, alternatifler arasındaki çekiciliği karşılaştırmaya yardımcı olur ve ekosistem büyümesi hakkında bilgiler sağlar.

Birlikte Çalışabilirlik

intlayer ayrıca react-intl, react-i18next, next-intl, next-i18next ve vue-i18n namespace'lerinizi yönetmenize yardımcı olabilir.

intlayer kullanarak içeriğinizi en sevdiğiniz i18n kütüphanesinin biçiminde bildirebilirsiniz ve intlayer, namespace'lerinizi istediğiniz konumda oluşturur (örnek: /messages/{{locale}}/{{namespace}}.json).