Dokümantasyon: next-intlayer Paketinde t Fonksiyonu

next-intlayer paketindeki t fonksiyonu, Next.js uygulamanızda satır içi uluslararasılaştırma için temel bir araçtır. Bileşenlerinizde doğrudan çevirileri tanımlamanıza olanak tanır, mevcut yerel ayara göre yerelleştirilmiş içeriği görüntülemeyi basitleştirir.

Genel Bakış

t fonksiyonu, bileşenlerinizde farklı yerel ayarlar için çevirileri doğrudan sağlamak için kullanılır. Desteklenen her yerel ayar için çeviriler içeren bir nesne geçirerek, t Next.js uygulamanızdaki mevcut yerel bağlamına göre uygun çeviriyi döndürür.

Temel Özellikler

• Satır İçi Çeviriler: Ayrı bir içerik bildirimi gerektirmeyen hızlı, satır içi metin için idealdir.
• Otomatik Yerel Seçim: Mevcut yerel ayara karşılık gelen çeviriyi otomatik olarak döndürür.
• TypeScript Desteği: TypeScript ile kullanıldığında tür güvenliği ve otomatik tamamlama sağlar.
• Kolay Entegrasyon: Next.js'te hem istemci hem de sunucu bileşenlerinde sorunsuz çalışır.

Fonksiyon İmzası

t<T extends string>(content: Record<LocalesValues, T>, locale?: Locales): string

Parametreler

• translations: Anahtarların yerel kodlar (örneğin en, fr, es) ve değerlerin karşılık gelen çevrilmiş dizeler olduğu bir nesne.

Döndürür

• Mevcut yerel ayar için çevrilmiş içeriği temsil eden bir dize.

Kullanım Örnekleri

İstemci Bileşeninde t Kullanımı

İstemci tarafı bileşeninde t kullanırken, dosyanızın en üstüne 'use client'; yönergesini eklediğinizden emin olun.

"use client";

import type { FC } from "react";
import { t } from "next-intlayer";

export const ClientComponentExample: FC = () => (
  <p>
    {t({
      en: "This is the content of a client component example",
      fr: "Ceci est le contenu d'un exemple de composant client",
      es: "Este es el contenido de un ejemplo de componente cliente",
    })}
  </p>
);

Sunucu Bileşeninde t Kullanımı

import type { FC } from "react";
import { t } from "next-intlayer/server";

export const ServerComponentExample: FC = () => (
  <p>
    {t({
      en: "This is the content of a server component example",
      fr: "Ceci est le contenu d'un exemple de composant serveur",
      es: "Este es el contenido de un ejemplo de componente servidor",
    })}
  </p>
);

Özelliklerde Satır İçi Çeviriler

t fonksiyonu, JSX özelliklerinde satır içi çeviriler için özellikle kullanışlıdır. alt, title, href veya aria-label gibi özellikleri yerelleştirirken, t'yi doğrudan özellik içinde kullanabilirsiniz.

<button  aria-label={t({    en: "Submit",    fr: "Soumettre",    es: "Enviar",  })}>  {t({    en: "Submit",    fr: "Soumettre",    es: "Enviar",  })}  <img    src="/path/to/image"    alt={t({      en: "A beautiful scenery",      fr: "Un beau paysage",      es: "Un hermoso paisaje",    })}  /></button>

Gelişmiş Konular

TypeScript Entegrasyonu

t fonksiyonu TypeScript ile kullanıldığında tür güvenlidir, tüm gerekli yerel ayarların sağlandığından emin olur.

import type { IConfigLocales } from "intlayer";
import { t } from "next-intlayer";

const translations: IConfigLocales<string> = {
  en: "Welcome",
  fr: "Bienvenue",
  es: "Bienvenido",
};

const greeting = t(translations);

Yerel Algılama ve Bağlam

next-intlayer'da, mevcut yerel ayar bağlam sağlayıcıları aracılığıyla yönetilir: IntlayerClientProvider ve IntlayerServerProvider. Bileşenlerinizi bu sağlayıcıların sardığından ve locale özelliğinin doğru şekilde geçirildiğinden emin olun.

Örnek:

import type { FC } from "react";
import type { Locales } from "intlayer";
import { IntlayerClientProvider } from "next-intlayer";
import { IntlayerServerProvider } from "next-intlayer/server";

const Page: FC<{ locale: Locales }> = ({ locale }) => (
  <IntlayerServerProvider locale={locale}>
    <IntlayerClientProvider locale={locale}>
      {/* Bileşenleriniz burada */}
    </IntlayerClientProvider>
  </IntlayerServerProvider>
);

Yaygın Hatalar ve Sorun Giderme

t Tanımsız veya Yanlış Çeviri Döndürüyor

• Neden: Mevcut yerel ayar doğru şekilde ayarlanmamış veya mevcut yerel ayar için çeviri eksik.
• Çözüm:
  • IntlayerClientProvider veya IntlayerServerProvider'ın uygun locale ile doğru şekilde kurulduğunu doğrulayın.
  • Çeviriler nesnenizin gerekli tüm yerel ayarları içerdiğinden emin olun.

TypeScript'te Eksik Çeviriler

• Neden: Çeviriler nesnesi gerekli yerel ayarları karşılamıyor, TypeScript hatalarına yol açıyor.
• Çözüm: Çevirilerinizin eksiksizliğini zorunlu kılmak için IConfigLocales türünü kullanın.

const translations: IConfigLocales<string> = {
  en: "Text",
  fr: "Texte",
  // es: 'Texto', // Eksik 'es' TypeScript hatasına neden olur [!code error]
};

const text = t(translations);

Etkili Kullanım İçin İpuçları

1. Basit Satır İçi Çeviriler İçin t Kullanın: Bileşenlerinizde doğrudan küçük metin parçalarını çevirmek için idealdir.
2. Yapılandırılmış İçerik İçin useIntlayer Tercih Edin: Daha karmaşık çeviriler ve içerik yeniden kullanımı için, içeriği bildirim dosyalarında tanımlayın ve useIntlayer kullanın.
3. Tutarlı Yerel Sağlama: Uygulamanızda yerel ayarınızın uygun sağlayıcılar aracılığıyla tutarlı şekilde sağlandığından emin olun.
4. TypeScript'i Kullanın: Eksik çevirileri yakalamak ve tür güvenliğini sağlamak için TypeScript türlerini kullanın.

Sonuç

next-intlayer'daki t fonksiyonu, Next.js uygulamalarınızda satır içi çevirileri yönetmek için güçlü ve kullanışlı bir araçtır. Bunu etkili bir şekilde entegre ederek, uygulamanızın uluslararasılaştırma yeteneklerini geliştirir, dünya çapındaki kullanıcılar için daha iyi bir deneyim sağlar.

Daha detaylı kullanım ve gelişmiş özellikler için next-intlayer dokümantasyonuna bakın.

Not: t fonksiyonunun doğru çevirileri döndürmesi için mevcut yerel ayarınızın bileşenlerinize doğru şekilde aktarıldığından emin olun. Bu, IntlayerClientProvider ve IntlayerServerProvider'ı düzgün şekilde kurmak için çok önemlidir.