Autor:

Criação:2026-06-12Última atualização:2026-06-12

Referência esta documentação ao seu assistente AI favorito

Google AI mode Gemini

Perplexity Mistral

Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha

Histórico de versões

"Lançamento do recurso de conteúdo dinâmico"
v9.0.012/06/2026

O conteúdo desta página foi traduzido com uma IA.

Veja a última versão do conteúdo original em inglês

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Registros Dinâmicos

Um registro dinâmico (dynamic record) é um arquivo de conteúdo cuja identidade não é um índice sequencial ou uma variante nomeada, mas um conjunto arbitrário de pares chave-valor declarados em um campo meta. O Intlayer usa esses campos como o seletor em tempo de execução, tornando possível endereçar registros de CMS, cópia específica do usuário ou qualquer conteúdo cujas chaves não são conhecidas em tempo de compilação.

Declarando registros dinâmicos

product-copy.abc.content.ts

Copiar código

Copiar o código para a área de transferência

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

Copiar código

Copiar o código para a área de transferência

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 mais légère." }),
  },
} satisfies Dictionary;

export default dictionary;

Consumindo registros dinâmicos

Todos os campos meta são obrigatórios no seletor. Omitir qualquer campo retorna null e é um erro do TypeScript.

ProductCopy.tsx

Copiar código

Copiar o código para a área de transferência

import { useIntlayer } from "react-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // O TypeScript garante que tanto `id` quanto `userId` sejam fornecidos.

  if (!content) return null;

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

ProductCopy.tsx

Copiar código

Copiar o código para a área de transferência

import { useIntlayer } from "next-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // O TypeScript garante que tanto `id` quanto `userId` sejam fornecidos.

  if (!content) return null;

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

ProductCopy.vue

Copiar código

Copiar o código para a área de transferência

<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

Copiar código

Copiar o código para a área de transferência

<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

Copiar código

Copiar o código para a área de transferência

import { useIntlayer } from "preact-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // O TypeScript garante que tanto `id` quanto `userId` sejam fornecidos.

  if (!content) return null;

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

ProductCopy.tsx

Copiar código

Copiar o código para a área de transferência

import { useIntlayer } from "solid-intlayer";

export const ProductCopy = (props: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
  // O TypeScript garante que tanto `id` quanto `userId` sejam fornecidos.

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

product-copy.component.ts

Copiar código

Copiar o código para a área de transferência

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

Copiar código

Copiar o código para a área de transferência

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

Com localidade explícita

tsx

Copiar código

Copiar o código para a área de transferência

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

Campo meta ausente — erro em tempo de compilação

ts

Copiar código

Copiar o código para a área de transferência

// Erro de tipo: `userId` está ausenteconst content = useIntlayer("product-copy", { id: "prod_abc" });

Modo de carregamento (loading mode)

Os registros dinâmicos são geralmente carregados de forma preguiçosa (lazy loading). Defina importMode no dicionário para controlar isso:

ts

Copiar código

Copiar o código para a área de transferência

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

export default dictionary;

Consulte otimização do bundle para obter detalhes sobre os modos static, dynamic e fetch.

Casos de uso típicos

Textos de marketing de produtos gerenciados em um CMS
Conteúdo específico do usuário ou da conta
Qualquer conteúdo identificado por um ID opaco em tempo de execução

Arquivo por locale

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