Bir dinamik kayıt (dynamic record), kimliği sıralı bir dizin (index) veya adlandırılmış bir varyant olmayan, bunun yerine bir meta alanında bildirilen rastgele anahtar-değer çiftleri kümesi olan bir içerik dosyasıdır. Intlayer, çalışma zamanında (runtime) bu alanları seçici olarak kullanır. Bu sayede CMS kayıtlarını, kullanıcıya özel metinleri veya derleme zamanında anahtarları bilinmeyen herhangi bir içeriği adreslemeyi mümkün kılar.

Dinamik kayıtları bildirme

product-copy.abc.content.ts

Kodu kopyala

Kodu panoya kopyala

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

const dictionary = {
  key: "product-copy",
  meta: {
    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-copy.abcd.content.ts

Kodu kopyala

Kodu panoya kopyala

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

const dictionary = {
  key: "product-copy",
  meta: {
    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;

Dinamik kayıtları tüketme

Seçicide tüm meta alanları zorunludur. Herhangi bir alanın atlanması null döndürür ve bir TypeScript hatasıdır.

ProductCopy.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "react-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript hem `id` hem de `userId` alanlarının sağlanmasını zorunlu kılar.

  if (!content) return null;

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

ProductCopy.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "next-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript hem `id` hem de `userId` alanlarının sağlanmasını zorunlu kılar.

  if (!content) return null;

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

ProductCopy.vue

Kodu kopyala

Kodu panoya kopyala

<script setup>
import { useIntlayer } from "vue-intlayer";

const props = defineProps({
  productId: String,
  userId: String,
});

const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
</script>

<template>
  <p v-if="content">{{ content.description }}</p>
</template>

ProductCopy.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";

export let productId: string;
export let userId: string;

const content = useIntlayer("product-copy", { id: productId, userId });
</script>

{#if $content}
  <p>{$content.description}</p>
{/if}

ProductCopy.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "preact-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript hem `id` hem de `userId` alanlarının sağlanmasını zorunlu kılar.

  if (!content) return null;

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

ProductCopy.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "solid-intlayer";

export const ProductCopy = (props: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
  // TypeScript hem `id` hem de `userId` alanlarının sağlanmasını zorunlu kılar.

  return (
    <>
      {content() && <p>{content().description}</p>}
    </>
  );
};

product-copy.component.ts

Kodu kopyala

Kodu panoya kopyala

import { Component, Input, OnInit } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-product-copy",
  template: `
    @if (content()) {
      <p>{{ content().description }}</p>
    }
  `,
})
export class ProductCopyComponent implements OnInit {
  @Input() productId!: string;
  @Input() userId!: string;

  content: any;

  ngOnInit() {
    this.content = useIntlayer("product-copy", { id: this.productId, userId: this.userId });
  }
}

product-copy.js

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product-copy", {  id: "prod_abcd",  userId: "user_123"});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product-copy", {  id: "prod_abcd",  userId: "user_123"});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

Belirli dil seçeneği ile

tsx

Kodu kopyala

Kodu panoya kopyala

const content = useIntlayer("product-copy", {  id: "prod_abc",  userId: "user_123",  locale: "tr",});

const content = useIntlayer("product-copy", {  id: "prod_abc",  userId: "user_123",  locale: "tr",});

Eksik meta alanı — derleme zamanı hatası

Kodu kopyala

Kodu panoya kopyala

// Tip hatası: `userId` eksikconst content = useIntlayer("product-copy", { id: "prod_abc" });

// Tip hatası: `userId` eksikconst content = useIntlayer("product-copy", { id: "prod_abc" });

Yükleme modu (loading mode)

Dinamik kayıtlar genellikle geç (lazy) yüklenir. Bunu kontrol etmek için sözlükte importMode alanını ayarlayın:

Kodu kopyala

Kodu panoya kopyala

const dictionary = {
  key: "product-copy",
  importMode: "fetch", // veya "dynamic"
  meta: { id: "prod_abc", userId: "user_123" },
  content: { … },
} satisfies Dictionary;

export default dictionary;

static, dynamic ve fetch modları hakkında ayrıntılı bilgi için paket optimizasyonu sayfasına bakın.

Tipik kullanım senaryoları

Bir CMS'de yönetilen ürün başına pazarlama metinleri
Kullanıcıya veya hesaba özel içerik
Çalışma zamanında opak bir kimlikle (ID) anahtarlanan tüm içerikler

Varyantlar

Yerel Dosya