Autore:

Creazione:2026-06-12Ultimo aggiornamento:2026-06-12

Riferimento a questa documentazione al tuo assistente AI preferito

Google AI mode Gemini

Perplexity Mistral

Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta

Cronologia delle versioni

"Rilascio della funzionalità di contenuto dinamico"
v9.0.012/06/2026

Il contenuto di questa pagina è stato tradotto con un'IA.

Vedi l'ultima versione del contenuto originale in inglese

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

Record Dinamici

Un record dinamico (dynamic record) è un file di contenuto la cui identità non è un indice sequenziale o una variante denominata, ma un insieme arbitrario di coppie chiave-valore dichiarate in un campo meta. Intlayer utilizza questi campi come selettore al momento dell'esecuzione, rendendo possibile indirizzare record di CMS, testi specifici dell'utente o qualsiasi contenuto le cui chiavi non sono note a tempo di compilazione.

Dichiarare record dinamici

product-copy.abc.content.ts

Copiare il codice

Copiare il codice nella 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

Copiare il codice

Copiare il codice nella 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;

Consumare record dinamici

Tutti i campi meta sono obbligatori nel selettore. L'omissione di qualsiasi campo restituisce null ed è un errore di TypeScript.

ProductCopy.tsx

Copiare il codice

Copiare il codice nella clipboard

import { useIntlayer } from "react-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript garantisce che vengano forniti sia `id` che `userId`.

  if (!content) return null;

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

ProductCopy.tsx

Copiare il codice

Copiare il codice nella clipboard

import { useIntlayer } from "next-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript garantisce che vengano forniti sia `id` che `userId`.

  if (!content) return null;

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

ProductCopy.vue

Copiare il codice

Copiare il codice nella 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

Copiare il codice

Copiare il codice nella 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

Copiare il codice

Copiare il codice nella clipboard

import { useIntlayer } from "preact-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript garantisce che vengano forniti sia `id` che `userId`.

  if (!content) return null;

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

ProductCopy.tsx

Copiare il codice

Copiare il codice nella 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 garantisce che vengano forniti sia `id` che `userId`.

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

product-copy.component.ts

Copiare il codice

Copiare il codice nella 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

Copiare il codice

Copiare il codice nella 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>`;}

Con locale esplicita

tsx

Copiare il codice

Copiare il codice nella clipboard

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

Campo meta mancante — errore in tempo di compilazione

ts

Copiare il codice

Copiare il codice nella clipboard

// Errore di tipo: manca `userId`const content = useIntlayer("product-copy", { id: "prod_abc" });

Modalità di caricamento (loading mode)

I record dinamici vengono solitamente caricati in modo differito (lazy loading). Imposta importMode sul dizionario per controllare questo comportamento:

ts

Copiare il codice

Copiare il codice nella clipboard

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

export default dictionary;

Vedi ottimizzazione del bundle per i dettagli sulle modalità static, dynamic e fetch.

Casi d'uso tipici

Testi di marketing per prodotto gestiti in un CMS
Contenuti specifici dell'utente o dell'account
Qualsiasi contenuto identificato da un ID runtime opaco

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