Intlayer Kullanarak Nest Backend Web Sitenizi Çevirme | Uluslararasılaştırma (i18n)

express-intlayer, Express uygulamaları için güçlü bir uluslararasılaştırma (i18n) middleware'idir. İstemcinin tercihlerine dayalı olarak yerelleştirilmiş yanıtlar sağlayarak backend hizmetlerinizi küresel olarak erişilebilir hale getirmek için tasarlanmıştır. NestJS, Express üzerine inşa edildiğinden, express-intlayer'ı NestJS uygulamalarınıza sorunsuzca entegre edebilir ve çok dilli içeriği etkili bir şekilde yönetebilirsiniz.

tical Use Cases

• Arka Uç Hatalarını Kullanıcının Dilinde Göstermek: Bir hata oluştuğunda, mesajları kullanıcının ana dilinde göstermek anlayışı artırır ve hayal kırıklığını azaltır. Bu, toast veya modal gibi ön uç bileşenlerinde gösterilebilecek dinamik hata mesajları için özellikle yararlıdır.

• Çok Dilli İçerik Alma: Bir veritabanından içerik çeken uygulamalar için, uluslararasılaştırma bu içeriği birden fazla dilde sunmanızı sağlar. Bu, ürün açıklamaları, makaleler ve diğer içeriği kullanıcının tercih ettiği dilde görüntülemesi gereken e-ticaret siteleri veya içerik yönetim sistemleri gibi platformlar için çok önemlidir.

• Çok Dilli E-postalar Gönderme: İşlem e-postaları, pazarlama kampanyaları veya bildirimler olsun, e-postaları alıcının dilinde göndermek katılımı ve etkinliği önemli ölçüde artırabilir.

• Çok Dilli Push Bildirimleri: Mobil uygulamalar için, push bildirimlerini kullanıcının tercih ettiği dilde göndermek etkileşimi ve kullanıcı alıkanlığını artırabilir. Bu kişisel dokunuş, bildirimleri daha alakalı ve harekete geçirilebilir hale getirebilir.

• Diğer İletişimler: SMS mesajları, sistem uyarıları veya kullanıcı arayüzü güncellemeleri gibi backend'den gelen her türlü iletişim, kullanıcının dilinde olmasından yararlanır ve netliği sağlar, genel kullanıcı deneyimini iyileştirir.

Backend'i uluslararasılaştırarak, uygulamanız sadece kültürel farklılıklara saygı göstermekle kalmaz, aynı zamanda küresel pazar ihtiyaçlarıyla daha iyi uyumlanır ve bu da hizmetlerinizi dünya çapında ölçeklendirmenin kilit adımını oluşturur.

Başlarken

Yeni Bir NestJS Projesi Oluşturun

npm install -g @nestjs/cli
nest new my-nest-app

Kurulum

express-intlayer'ı kullanmaya başlamak için paketi npm kullanarak yükleyin:

npx intlayer init --interactive

--interactive bayrağı isteğe bağlıdır. Bir yapay zeka aracısıysanız intlayer-cli init kullanın.

Bu komut ortamınızı algılayacak ve gerekli paketleri yükleyecektir. Örneğin:

npm install intlayer express-intlayer

tsconfig.json'u Yapılandırın

Intlayer'ı TypeScript ile kullanmak için tsconfig.json'unuzun ES modüllerini destekleyecek şekilde ayarlandığından emin olun. Bunu module ve moduleResolution seçeneklerini nodenext olarak ayarlayarak yapabilirsiniz.

{
  compilerOptions: {
    module: "nodenext",
    moduleResolution: "nodenext",
    // ... diğer seçenekler
  },
}

Kurulum

Proje kökünde bir intlayer.config.ts oluşturarak uluslararasılaştırma ayarlarını yapılandırın:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

İçeriğinizi Bildirin

Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:

İçerik bildirimleriniz, contentDir dizinine dahil edildiği sürece uygulamanızın herhangi bir yerinde tanımlanabilir (varsayılan olarak ./src). Ve içerik bildirim dosyası uzantısıyla eşleşmelidir (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

Daha fazla detay için içerik bildirim dokümantasyonuna bakın.

Express Middleware Kurulumu

Uluslararasılaştırmayı yönetmek için express-intlayer middleware'ini NestJS uygulamanıza entegre edin:

import { MiddlewareConsumer, Module, NestModule } from "@nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
import { intlayer } from "express-intlayer";

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer.apply(intlayer()).forRoutes("*"); // Tüm yollara uygula
  }
}

Hizmetlerinizde veya Denetleyicilerinizde Çevirileri Kullanın

Artık hizmetlerinizde veya denetleyicilerinizde çevirilere erişmek için getIntlayer fonksiyonunu kullanabilirsiniz:

import { Injectable } from "@nestjs/common";
import { getIntlayer } from "express-intlayer";

@Injectable()
export class AppService {
  getHello(): string {
    return getIntlayer("app").greet;
  }
}

Uyumluluk

express-intlayer tamamen uyumludur:

• React uygulamaları için react-intlayer
• Next.js uygulamaları için next-intlayer
• Vite uygulamaları için vite-intlayer

Ayrıca tarayıcılar ve API istekleri dahil çeşitli ortamlarda herhangi bir uluslararasılaştırma çözümüyle sorunsuz çalışır. Middleware'i başlık veya çerezler aracılığıyla yerel ayarları algılayacak şekilde özelleştirebilirsiniz:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Diğer yapılandırma seçenekleri
  routing: {
    storage: [
      { type: "header", name: "my-locale-header" },
      { type: "cookie", name: "my-locale-cookie" },
    ],
  },
};

export default config;

Varsayılan olarak, express-intlayer istemcinin tercih ettiği dili belirlemek için Accept-Language başlığını yorumlayacaktır.

Yapılandırma ve gelişmiş konular hakkında daha fazla bilgi için dokümantasyonumuzu ziyaret edin.

TypeScript'i Yapılandırın

express-intlayer, uluslararasılaştırma sürecini geliştirmek için TypeScript'in güçlü yeteneklerinden yararlanır. TypeScript'in statik yazımı, her çeviri anahtarının hesaba katılmasını sağlar, eksik çeviri riskini azaltır ve sürdürülebilirliği iyileştirir.

Otomatik oluşturulan türlerin (varsayılan olarak ./types/intlayer.d.ts) tsconfig.json dosyanıza dahil edildiğ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 dahil et
  ],
}

VS Code Uzantısı

Intlayer ile geliştirme deneyimini iyileştirmek için resmi Intlayer VS Code Uzantısı'nı yükleyebilirsiniz.

VS Code Marketplace'ten yükleyin

Bu uzantı şunları sağlar:

• Çeviri anahtarları için Otomatik tamamlama.
• Eksik çeviriler için Gerçek zamanlı hata algılama.
• Çevrilmiş içeriğin Satır içi önizlemeleri.
• Çevirileri kolayca oluşturmak ve güncellemek için Hızlı eylemler.

Uzantının nasıl kullanılacağı hakkında daha fazla detay için Intlayer VS Code Uzantısı dokümantasyonuna bakın.

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaları yok saymanız önerilir. Bu, onları Git deposunuza commit etmenizi önler.

Bunu yapmak için .gitignore dosyanıza aşağıdaki talimatları ekleyebilirsiniz:

# Intlayer tarafından oluşturulan dosyaları yok say
.intlayer