Sebuah catatan dinamis (dynamic record) adalah file konten yang identitasnya bukan merupakan indeks berurutan atau varian bernama, melainkan kumpulan pasangan kunci-nilai arbitrer yang dideklarasikan dalam bidang meta. Intlayer menggunakan bidang-bidang tersebut sebagai selektor pada saat runtime, sehingga memungkinkan untuk merujuk pada catatan CMS, salinan khusus pengguna, atau konten apa pun yang kuncinya tidak diketahui pada waktu kompilasi.

Mendeklarasikan catatan dinamis

product-copy.abc.content.ts

Salin kode

Salin kode ke clipboard

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

Salin kode

Salin kode ke clipboard

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;

Mengonsumsi catatan dinamis

Semua bidang meta adalah wajib dalam selektor. Mengabaikan bidang apa pun akan mengembalikan null dan merupakan kesalahan TypeScript.

ProductCopy.tsx

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "react-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript memastikan bahwa `id` dan `userId` telah disediakan.

  if (!content) return null;

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

ProductCopy.tsx

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "next-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript memastikan bahwa `id` dan `userId` telah disediakan.

  if (!content) return null;

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

ProductCopy.vue

Salin kode

Salin kode ke clipboard

<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

Salin kode

Salin kode ke clipboard

<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

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "preact-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript memastikan bahwa `id` dan `userId` telah disediakan.

  if (!content) return null;

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

ProductCopy.tsx

Salin kode

Salin kode ke clipboard

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 memastikan bahwa `id` dan `userId` telah disediakan.

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

product-copy.component.ts

Salin kode

Salin kode ke clipboard

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

Salin kode

Salin kode ke clipboard

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>`;}

Dengan lokalitas eksplisit

tsx

Salin kode

Salin kode ke clipboard

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

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

Kolom meta hilang — kesalahan pada waktu kompilasi

Salin kode

Salin kode ke clipboard

// Kesalahan tipe: `userId` hilangconst content = useIntlayer("product-copy", { id: "prod_abc" });

// Kesalahan tipe: `userId` hilangconst content = useIntlayer("product-copy", { id: "prod_abc" });

Mode pemuatan (loading mode)

Catatan dinamis biasanya dimuat secara lambat (lazy loading). Tetapkan importMode pada kamus untuk mengontrol hal ini:

Salin kode

Salin kode ke clipboard

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

export default dictionary;

Lihat optimalisasi bundel untuk detail tentang mode static, dynamic, dan fetch.

Kasus penggunaan umum

Salinan pemasaran per produk yang dikelola di CMS
Konten khusus pengguna atau khusus akun
Konten apa pun yang diidentifikasi oleh ID runtime buram

Varian

File untuk setiap lokal