Yazar:
    Oluşturma:2026-06-12Son güncelleme:2026-06-26

    Varyantlar

    Bir varyant, aynı sözlük anahtarını (key) paylaşan ancak her biri farklı bir variant değeri taşıyan bir içerik dosyaları kümesidir. Intlayer, useIntlayer'a geçirilen seçiciye göre uygun dosyayı sunar.

    variant değeri iki biçim alabilir:

    • Bir dize — tek bir adlandırılmış alternatif (A/B testleri, sezonluk afişler, özellik bayrakları).
    • Bir nesne — bir alan kümesiyle adreslenen yapılandırılmış bir ayırt edici (CMS kayıtları, kullanıcıya özel metin, opak bir kimlikle anahtarlanan herhangi bir içerik). Kimlik nesnenin tamamıdır: seçici, girdiyi çözümlemek için eşit bir nesne sağlamalıdır.
    Nesne biçimi eski meta alanının yerini alır. Daha önce meta: { id, … } yazdığınız her yerde variant: { id, … } yazın ve onu { variant: { id, … } } ile seçin.

    Adlandırılmış (dize) varyantlar

    Her dosya bir adlandırılmış alternatifi temsil eder. variant'ı atlamak (veya "default" olarak ayarlamak) onu yedek olarak işaretler.

    hero-banner.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "default",
  content: {
    headline: t({
      en: "Build faster with Intlayer",
      fr: "Développez plus vite avec Intlayer",
    }),
    cta: t({ en: "Get started", fr: "Commencer" }),
  },
} satisfies Dictionary;

export default dictionary;
    hero-banner.black-friday.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "black_friday",
  content: {
    headline: t({
      en: "50 % off — today only",
      fr: "−50 % — aujourd'hui seulement",
    }),
    cta: t({ en: "Shop now", fr: "Acheter maintenant" }),
  },
} satisfies Dictionary;

export default dictionary;

    Adlandırılmış varyantları kullanma

    Varsayılan varyant

    Hero.tsx
    import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → varsayılan varyant

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

    Adlandırılmış varyant

    tsx
    const { headline, cta } = useIntlayer("hero-banner", {  variant: "black_friday",});

    Açık locale ile adlandırılmış varyant

    tsx
    const content = useIntlayer("hero-banner", {  variant: "black_friday",  locale: "fr",});

    Nesne (yapılandırılmış) varyantlar

    Bir nesne varyantı, variant alanında bildirilen rastgele bir anahtar-değer çiftleri kümesiyle içeriği adresler — bu da CMS kayıtlarını, kullanıcıya özel metni veya anahtarı opak bir kimlik olan herhangi bir içeriği modellemeyi mümkün kılar. Kimlik nesnenin tamamıdır: girdinin çözümlenmesi için seçici eşit bir nesne sağlamalıdır.

    product.abc.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "product",
  variant: { id: "prod_abc", userId: "user_123" },
  content: {
    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
  },
} satisfies Dictionary;

export default dictionary;
    product.abcd.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "product",
  variant: { id: "prod_abcd", userId: "user_123" },
  content: {
    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
  },
} satisfies Dictionary;

export default dictionary;

    Nesne varyantlarını kullanma

    Eşleşen nesneyi variant'a geçirin. Sözlükte bildirilen her alan sağlanmalı ve eşit olmalıdır; aksi takdirde sonuç null olur. Alanların sırası önemli değildir.

    Product.tsx
    import { useIntlayer } from "react-intlayer";

export const Product = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product", {
    variant: { id: productId, userId },
  });

  if (!content) return null;

  return <p>{content.description}</p>;
};

    Açık locale ile

    tsx
    const content = useIntlayer("product", {  variant: { id: "prod_abc", userId: "user_123" },  locale: "fr",});

    Eksik alan — eşleşme yok

    ts
    // null döndürür: `userId` eksik, bu nedenle nesne bildirilen varyantla eşleşmiyorconst content = useIntlayer("product", { variant: { id: "prod_abc" } });

    Yükleme modu

    Nesne varyantları genellikle tembel olarak yüklenir. Bunu kontrol etmek için sözlükte importMode'u ayarlayın:

    ts
    const dictionary = {
  key: "product",
  importMode: "fetch", // or "dynamic"
  variant: { id: "prod_abc", userId: "user_123" },
  content: { … },
} satisfies Dictionary;

export default dictionary;

    static, dynamic ve fetch modlarıyla ilgili ayrıntılar için paket optimizasyonu bölümüne bakın.

    Tipik kullanım örnekleri

    • Bir deney anahtarıyla yönlendirilen A/B metin testleri
    • Sezonluk veya promosyon afişleri
    • Özellik bayraklı mesajlaşma
    • Locale'e özgü pazarlama kampanyaları
    • CMS'te yönetilen ürün başına pazarlama metni
    • Kullanıcıya veya hesaba özel içerik
    • Çalışma zamanında opak bir kimlikle anahtarlanan herhangi bir içerik
    Koleksiyonlar
    Yerel Dosya