Penulis:

Dibuat:2026-06-12Terakhir diperbarui:2026-06-12

Referensikan dokumen ini ke asisten AI favorit AndaChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda

Riwayat Versi

"Rilis fitur konten dinamis"
v9.0.012/6/2026

Konten halaman ini diterjemahkan menggunakan AI.

Lihat versi terakhir dari konten aslinya dalam bahasa Inggris

Sunting dokumen ini

Jika Anda memiliki ide untuk meningkatkan dokumentasi ini, silakan berkontribusi dengan mengajukan pull request di GitHub.

Tautan GitHub ke dokumentasi

Salin

Salin Markdown dokumentasi ke clipboard

Catatan Dinamis

Name: Intlayer
Author: Intlayer

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

Dengan lokalitas eksplisit

tsx

Salin kode

Salin kode ke clipboard

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" });

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