i18next JSON çevirilerinizi Intlayer kullanarak nasıl otomatikleştirirsiniz

Intlayer nedir?

Intlayer, geleneksel i18n çözümlerinin eksikliklerini gidermek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma kütüphanesidir. JavaScript uygulamalarında içerik yönetimi için modern bir yaklaşım sunar.

i18next ile somut bir karşılaştırma için next-i18next vs. next-intl vs. Intlayer blog yazımıza bakabilirsiniz.

Neden Intlayer'ı i18next ile Birleştirmelisiniz?

Intlayer mükemmel bir bağımsız i18n çözümü sunarken (bakınız Next.js entegrasyon rehberimiz), aşağıdaki nedenlerle i18next ile birleştirmek isteyebilirsiniz:

1. Mevcut kod tabanı: Yerleşik bir i18next uygulamanız var ve Intlayer'ın geliştirilmiş geliştirici deneyimine kademeli olarak geçmek istiyorsunuz.
2. Eski gereksinimler: Projeniz mevcut i18next eklentileri veya iş akışları ile uyumluluk gerektiriyor.
3. Ekip aşinalığı: Ekibiniz i18next ile rahat ancak daha iyi içerik yönetimi istiyor.
4. Intlayer özelliklerini kullanmak: İçerik beyanı, çeviri anahtarlarının yönetimi, çeviri durumu ve daha fazlası gibi Intlayer özelliklerini kullanmak istiyorsunuz.

Bunun için, Intlayer, JSON çevirilerinizi CLI veya CI/CD boru hatlarında otomatikleştirmeye, çevirilerinizi test etmeye ve daha fazlasına yardımcı olmak amacıyla i18next için bir adaptör olarak uygulanabilir.

Bu rehber, Intlayer'ın üstün içerik beyan sistemi avantajlarından yararlanırken i18next ile uyumluluğu nasıl koruyacağınızı gösterir.

İçindekiler

Intlayer'ı i18next ile Kurmak için Adım Adım Rehber

Adım 1: Bağımlılıkları Yükleyin

Gerekli paketleri yükleyin:

npm install intlayer @intlayer/sync-json-plugin --save-devnpx intlayer init

Paket açıklamaları:

• intlayer: Uluslararasılaştırma yönetimi, içerik beyanı ve derleme için temel kütüphane
• @intlayer/sync-json-plugin: Intlayer içerik beyanlarını i18next uyumlu JSON formatına aktarmak için eklenti

Adım 2: JSON'u sarmak için Intlayer eklentisini uygulayın

Desteklenen yerel ayarları tanımlamak için bir Intlayer yapılandırma dosyası oluşturun:

Ayrıca i18next için JSON sözlüklerini dışa aktarmak istiyorsanız, syncJSON eklentisini ekleyin:

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({      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,    }),  ],};export default config;

syncJSON eklentisi JSON'u otomatik olarak sarar. İçerik mimarisini değiştirmeden JSON dosyalarını okur ve yazar.

Eğer bu JSON dosyalarının intlayer içerik beyan dosyaları (.content dosyaları) ile birlikte var olmasını istiyorsanız, Intlayer şu şekilde ilerler:

1. Hem JSON hem de içerik beyan dosyalarını yükler ve bunları bir intlayer sözlüğüne dönüştürür.
2. JSON ile içerik beyan dosyaları arasında çakışma varsa, Intlayer tüm sözlükleri birleştirir. Bu işlem, eklentilerin ve içerik beyan dosyasının önceliklerine bağlıdır (tüm öncelikler yapılandırılabilir).

JSON'u çevirmek için CLI veya CMS kullanılarak değişiklik yapılırsa, Intlayer JSON dosyasını yeni çevirilerle günceller.

syncJSON eklentisi hakkında daha fazla detay görmek için lütfen syncJSON eklenti dokümantasyonuna bakınız.

(İsteğe Bağlı) Adım 3: Bileşen başına JSON çevirilerini uygulama

Varsayılan olarak, Intlayer hem JSON hem de içerik beyan dosyalarını yükler, birleştirir ve senkronize eder. Daha fazla detay için içerik beyan dokümantasyonuna bakabilirsiniz. Ancak isterseniz, bir Intlayer eklentisi kullanarak, kod tabanınızın herhangi bir yerinde yerelleştirilmiş JSON’un bileşen başına yönetimini de uygulayabilirsiniz.

Bunun için loadJSON eklentisini kullanabilirsiniz.

import { Locales, type IntlayerConfig } from "intlayer";import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  // Mevcut JSON dosyalarınızı Intlayer sözlükleri ile senkronize tutun  plugins: [    /**     * src içindeki {key}.i18n.json desenine uyan tüm JSON dosyalarını yükler     */    loadJSON({      source: ({ key }) => `./src/**/${key}.i18n.json`,      locale: Locales.ENGLISH,      priority: 1, // Bu JSON dosyalarının `./locales/en/${key}.json` dosyalarından öncelikli olmasını sağlar    }),    /**     * locales dizinindeki JSON dosyalarını yükler ve çıktı ile çevirileri geri yazar     */    syncJSON({      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,      priority: 0,    }),  ],};export default config;

Bu, src dizininde {key}.i18n.json desenine uyan tüm JSON dosyalarını yükleyecek ve bunları Intlayer sözlükleri olarak kullanacaktır.

Git Yapılandırması

Otomatik oluşturulan Intlayer dosyalarını görmezden gelmeniz önerilir:

# Intlayer tarafından oluşturulan dosyaları görmezden gel.intlayer

Bu dosyalar derleme süreciniz sırasında yeniden oluşturulabilir ve sürüm kontrolüne dahil edilmesi gerekmez.

VS Code Eklentisi

Geliştirici deneyimini iyileştirmek için resmi Intlayer VS Code Eklentisini yükleyin:

VS Code Marketplace'ten Yükleyin