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

fastify-intlayer, Fastify uygulamaları için güçlü bir uluslararasılaştırma (i18n) eklentisidir ve istemcinin tercihlerine göre yerelleştirilmiş yanıtlar sağlayarak backend hizmetlerinizi küresel olarak erişilebilir kılmak için tasarlanmıştır.

GitHub'daki paket uygulamasını inceleyin: https://github.com/aymericzip/intlayer/tree/main/packages/fastify-intlayer

Pratik Kullanım Durumları

• Backend Hatalarını Kullanıcının Dilinde Görüntüleme: Bir hata oluştuğunda, mesajların kullanıcının ana dilinde görüntülenmesi anlayışı artırır ve hayal kırıklığını azaltır. Bu, özellikle toast'lar veya modal'lar gibi front-end bileşenlerinde gösterilebilecek dinamik hata mesajları için yararlıdır.
• Çok Dilli İçeriği Alma: Bir veritabanından içerik çeken uygulamalar için uluslararasılaştırma, bu içeriği birden fazla dilde sunabilmenizi sağlar. Bu, ürün açıklamalarını, makaleleri ve diğer içerikleri 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: İster işlemsel e-postalar, ister pazarlama kampanyaları veya bildirimler olsun, e-postaları alıcının dilinde göndermek etkileşimi ve etkinliği önemli ölçüde artırabilir.
• Çok Dilli Push Bildirimleri: Mobil uygulamalar için, bir kullanıcının tercih ettiği dilde push bildirimleri göndermek etkileşimi ve elde tutmayı artırabilir. Bu kişisel dokunuş, bildirimlerin daha alakalı ve uygulanabilir hissettirmesini sağlayabilir.
• 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 olmaktan yararlanır, netlik sağlar ve genel kullanıcı deneyimini iyileştirir.

Backend'i uluslararasılaştırarak, uygulamanız yalnızca kültürel farklılıklara saygı duymakla kalmaz, aynı zamanda küresel pazar ihtiyaçlarıyla daha iyi uyum sağlar ve bu da hizmetlerinizi dünya çapında ölçeklendirmede kilit bir adım haline getirir.

Başlarken

GitHub'daki Uygulama Şablonu'nu inceleyin.

Kurulum

fastify-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 fastify-intlayer

Kurulum

Proje kök dizininizde 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_MEXICO,
      Locales.SPANISH_SPAIN,
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

İçeriğinizi Tanımlayın

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

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

const indexContent = {
  key: "index",
  content: {
    exampleOfContent: t({
      en: "Example of returned content in English",
      fr: "Exemple de contenu renvoyé en français",
      "es-ES": "Ejemplo de contenido devuelto en español (España)",
      "es-MX": "Ejemplo de contenido devuelto en español (México)",
    }),
  },
} satisfies Dictionary;

export default indexContent;

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

Daha fazla ayrıntı için içerik bildirim belgelerine bakın.

Fastify Uygulama Kurulumu

Fastify uygulamanızı fastify-intlayer kullanacak şekilde kurun:

import Fastify from "fastify";
import { intlayer, t, getDictionary, getIntlayer } from "fastify-intlayer";
import dictionaryExample from "./index.content";

const fastify = Fastify({ logger: true });

// Uluslararasılaştırma eklentisini yükle
await fastify.register(intlayer);

// Rotalar
fastify.get("/t_example", async (_req, reply) => {
  return t({
    en: "Example of returned content in English",
    fr: "Exemple de contenu renvoyé en français",
    "es-ES": "Ejemplo de contenido devuelto en español (España)",
    "es-MX": "Ejemplo de contenido devuelto en español (México)",
  });
});

fastify.get("/getIntlayer_example", async (_req, reply) => {
  return getIntlayer("index").exampleOfContent;
});

fastify.get("/getDictionary_example", async (_req, reply) => {
  return getDictionary(dictionaryExample).exampleOfContent;
});

// Sunucuyu başlat
const start = async () => {
  try {
    await fastify.listen({ port: 3000 });
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};

start();

Uyumluluk

fastify-intlayer, şunlarla tam 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 olmak üzere çeşitli ortamlardaki her türlü uluslararasılaştırma çözümüyle sorunsuz bir şekilde çalışır. Middleware'i üstbilgiler veya tanımlama bilgileri aracılığıyla yerel ayarı 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 fastify-intlayer, istemcinin tercih ettiği dili belirlemek için Accept-Language üstbilgisini yorumlayacaktır.

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

TypeScript'i Yapılandırma

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

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

VS Code Eklentisi

Intlayer ile geliştirme deneyiminizi geliştirmek için resmi Intlayer VS Code Extension'ı yükleyebilirsiniz.

VS Code Marketplace'ten yükleyin

Bu eklenti ş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.

Eklentinin kullanımı hakkında daha fazla ayrıntı için Intlayer VS Code Extension belgelerine bakın.

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaların yoksayılması önerilir. Bu, onları Git deponuza göndermenizi önlemenizi sağlar.

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

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

Sıkça Sorulan Sorular