Neden Intlayer'ı düşünmelisiniz?

Intlayer nedir?

Intlayer, özellikle JavaScript geliştiricileri için tasarlanmış bir uluslararasılaştırma kütüphanesidir. Kodunuzun her yerinde içeriğinizi bildirmenize izin verir. Çok dilli içerik bildirimlerini kodunuzda kolayca entegre etmek için yapılandırılmış sözlüklere dönüştürür. TypeScript kullanarak Intlayer, geliştirmenizi daha güçlü ve verimli hale getirir.

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 yaygın bir sorunu çözmek için oluşturuldu.

Bu çözümlerin tümü, 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 isim alanları 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ı bakım için daha karmaşık hale getirir, birkaç nedenden dolayı:

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

   • locales klasöründe yeni kaynak/isim alanını oluşturun
   • Yeni isim alanını sayfanızda içe aktarmayı unutmayın
   • İçeriğinizi çevirin (genellikle AI sağlayıcılarından kopyala/yapıştır ile manuel olarak yapılır)

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

   • İlgili kaynak/isim alanını arayın (bileşenden uzak)
   • İçeriğinizi çevirin
   • İçeriğinizin herhangi bir yerel ayar için güncel olduğundan emin olun
   • İsim alanınızın kullanılmayan anahtarlar/değerler içermediğinden emin olun
   • JSON dosyalarınızın yapısının tüm yerel ayarlar için aynı olduğundan emin olun

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

Bu sorunu çözmek için, Intlayer CSS (styled-components), türler, dokümantasyon (storybook) veya birim testleri (jest) ile sıklıkla yaptığımız gibi içeriğinizi bileşen başına kapsamlandıran ve içeriğinizi bileşeninizle 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ıza izin verir:

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

   • .content.{{ts|mjs|cjs|json}} dosyaları bir VSCode uzantısı kullanarak oluşturulabilir
   • IDE'nizdeki otomatik tamamlama AI araçları (GitHub Copilot gibi) içeriğinizi bildirmenize yardımcı olabilir, kopyala/yapıştırı azaltır

2. Kod tabanınızı temizleyin

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

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

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

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

   • Bir bileşeni kullanmazsanız, Intlayer ilgili içeriğini içe aktarmaz
   • Bir bileşeni silerseniz, aynı klasörde bulunduğu için ilgili içeriğini kaldırmayı daha kolay hatırlarsınız

5. Çok dilli içeriğinizi bildirmek için AI ajanları için akıl yürütme maliyetini azaltın

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

6. Yükleme performansını optimize edin

   • Bir bileşen tembel yüklenirse, ilgili içeriği aynı zamanda yüklenir

Intlayer'ın ek özellikleri

Özellik	Açıklama
	Çapraz-Çerçeve Desteği Intlayer Next.js, React, Vite, Vue.js, Nuxt, Preact, Express ve daha fazlası dahil olmak üzere tüm büyük çerçeveler ve kütüphanelerle uyumludur.
	JavaScript Güçlü İçerik Yönetimi İçeriğinizi verimli bir şekilde tanımlamak ve yönetmek için JavaScript'in esnekliğinden yararlanın. - İçerik bildirimi
	Yerel Ayar Başına İçerik Bildirim Dosyası İçeriğinizi bir kez bildirerek geliştirmenizi hızlandırın, ardından otomatik oluşturma. - Yerel Ayar Başına İçerik Bildirim Dosyası
	Tür Güvenli Ortam İçerik tanımlarınızın ve kodunuzun hatasız olduğundan emin olmak için TypeScript'ten yararlanın, aynı zamanda IDE otomatik tamamlamasından faydalanın. - TypeScript konfigürasyonu
	Basitleştirilmiş Kurulum Minimum konfigürasyonla hızlıca çalışmaya başlayın. Uluslararasılaştırma, yönlendirme, AI, inşa ve içerik işleme için ayarları kolayca ayarlayın. - Next.js entegrasyonunu keşfedin
	Basitleştirilmiş İçerik Alma Her içerik parçası için t fonksiyonunuzu çağırmaya gerek yok. Tek bir kanca kullanarak tüm içeriğinizi doğrudan alın. - React entegrasyonu
	Tutarlı Sunucu Bileşeni Uygulaması Next.js sunucu bileşenleri için mükemmel şekilde uygundur, istemci ve sunucu bileşenleri için aynı uygulamayı kullanın, her sunucu bileşeninde t fonksiyonunuzu geçirmeye gerek yok. - Sunucu Bileşenleri
	Düzenlenmiş Kod Tabanı Kod tabanınızı daha düzenlenmiş tutun: 1 bileşen = aynı klasörde 1 sözlük. Çeviriler ilgili bileşenlerine yakın, bakım kolaylığını ve netliği artırır. - Intlayer nasıl çalışır
	Gelişmiş Yönlendirme Uygulama yönlendirmesi için tam destek, Next.js, React, Vite, Vue.js vb. için karmaşık uygulama yapılarına sorunsuz uyum sağlar. - Next.js entegrasyonunu keşfedin
	Markdown Desteği Gizlilik politikaları, dokümantasyon vb. gibi çok dilli içerik için yerel ayar dosyalarını ve uzak Markdown'ı içe aktarın ve yorumlayın. Markdown meta verilerini kodunuzda erişilebilir hale getirin. - İçerik dosyaları
	Ücretsiz Görsel Düzenleyici & CMS İçerik yazarları için ücretsiz bir görsel düzenleyici ve CMS mevcuttur, yerelleştirme platformuna ihtiyaç duymadan. Git kullanarak içeriğinizi senkronize tutun veya CMS ile tamamen veya kısmen dışa aktarın. - Intlayer Düzenleyici - Intlayer CMS
	Ağaç Sallanabilir İçerik Ağaç sallanabilir içerik, son paketin boyutunu azaltır. İçeriği bileşen başına yükler, paketinize kullanılmayan herhangi bir içeriği hariç tutar. Uygulama yükleme verimliliğini artırmak için tembel yüklemeyi destekler. - Uygulama inşa optimizasyonu
	Statik Oluşturma Statik Oluşturmayı engellemez. - Next.js entegrasyonu
	AI Güçlü Çeviri Intlayer'ın gelişmiş AI güçlü çeviri araçlarını kullanarak kendi AI sağlayıcınız/API anahtarınızı kullanarak web sitenizi tek tıkla 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ğlar, geliştirme ortamınızda doğrudan sorunsuz içerik yönetimi ve i18n iş akışlarını etkinleştirir. - MCP Sunucusu
	VSCode Uzantısı Intlayer, içeriğinizi ve çevirilerinizi yönetmenize yardımcı olmak için bir VSCode uzantısı sağlar, sözlüklerinizi oluşturur, içeriğinizi çevirir ve daha fazlası. - VSCode Uzantısı
	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

Intlayer'ın diğer çözümlerle karşılaştırması

GitHub YILDIZLARI

GitHub yıldızları, bir projenin popülaritesinin, topluluk güveninin ve uzun vadeli öneminin 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 muhtemelen benimsediğini yansıtır. Bir projenin değerini tahmin etmek için yıldızlar, alternatifler arasındaki çekişmeyi karşılaştırmaya ve ekosistem büyümesine ilişkin içgörüler sağlamaya yardımcı olur.

Birlikte Çalışabilirlik

intlayer ayrıca react-intl, react-i18next, next-intl, next-i18next ve vue-i18n isim alanlarınızı yönetmenize yardımcı olabilir.

intlayer kullanarak, içeriğinizi favori i18n kütüphanenizin formatında bildirebilirsiniz ve intlayer isim alanlarınızı seçtiğiniz konumda oluşturacaktır (örnek: /messages/{{locale}}/{{namespace}}.json).

Daha fazla ayrıntı için dictionaryOutput ve i18nextResourcesDir seçeneklerine bakın.

Doküman Geçmişi