Auteur:

Création:2026-06-12Dernière mise à jour:2026-06-12

Référencez cette doc à votre assistant AI préféré

Google AI mode Gemini

Perplexity Mistral

Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix

Historique des versions

"Lancement de la fonctionnalité de contenu dynamique"
v9.0.012/06/2026

Le contenu de cette page a été traduit à l'aide d'une IA.

Voir la dernière version du contenu original en anglais

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

Enregistrements Dynamiques

Un enregistrement dynamique (dynamic record) est un fichier de contenu dont l'identité n'est pas un index séquentiel ou une variante nommée, mais un ensemble arbitraire de paires clé-valeur déclarées dans un champ meta. Intlayer utilise ces champs comme sélecteur au moment de l'exécution, ce qui permet d'adresser des enregistrements CMS, des copies spécifiques à l'utilisateur ou tout contenu dont les clés ne sont pas connues au moment de la compilation.

Déclarer des enregistrements dynamiques

product-copy.abc.content.ts

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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;

Consommer des enregistrements dynamiques

Tous les champs meta sont obligatoires dans le sélecteur. Omettre un champ renvoie null et génère une erreur TypeScript.

ProductCopy.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "react-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript garantit que "id" et "userId" sont tous deux fournis.

  if (!content) return null;

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

ProductCopy.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "next-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript garantit que "id" et "userId" sont tous two fournis.

  if (!content) return null;

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

ProductCopy.vue

Copier le code

Copier le code dans le presse-papiers

<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

Copier le code

Copier le code dans le presse-papiers

<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

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "preact-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript garantit que "id" et "userId" sont tous deux fournis.

  if (!content) return null;

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

ProductCopy.tsx

Copier le code

Copier le code dans le presse-papiers

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 garantit que "id" et "userId" sont tous deux fournis.

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

product-copy.component.ts

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Avec une locale explicite

tsx

Copier le code

Copier le code dans le presse-papiers

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

Champ meta manquant — erreur de compilation

ts

Copier le code

Copier le code dans le presse-papiers

// Erreur de type : `userId` est manquantconst content = useIntlayer("product-copy", { id: "prod_abc" });

Mode de chargement (loading mode)

Les enregistrements dynamiques sont généralement chargés de manière différée. Définissez importMode sur le dictionnaire pour contrôler cela :

ts

Copier le code

Copier le code dans le presse-papiers

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

export default dictionary;

Voir optimisation du bundle pour plus de détails sur les modes static, dynamic et fetch.

Cas d'utilisation typiques

Copie marketing par produit gérée dans un CMS
Contenu spécifique à l'utilisateur ou au compte
Tout contenu identifié par un ID opaque au moment de l'exécution

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