\n\n \n ```\n\n \n \n ```svelte fileName=\"ProductCopy.svelte\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n \n\n {#if $content}\n

{$content.description}

\n {/if}\n ```\n\n \n \n ```tsx fileName=\"ProductCopy.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"preact-intlayer\";\n\n export const ProductCopy = ({\n productId,\n userId,\n }: {\n productId: string;\n userId: string;\n }) => {\n const content = useIntlayer(\"product-copy\", { id: productId, userId });\n // TypeScript garantit que \"id\" et \"userId\" sont tous deux fournis.\n\n if (!content) return null;\n\n return

{content.description}

;\n };\n ```\n\n \n \n ```tsx fileName=\"ProductCopy.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"solid-intlayer\";\n\n export const ProductCopy = (props: {\n productId: string;\n userId: string;\n }) => {\n const content = useIntlayer(\"product-copy\", { id: props.productId, userId: props.userId });\n // TypeScript garantit que \"id\" et \"userId\" sont tous deux fournis.\n\n return (\n <>\n {content() &&

{content().description}

}\n \n );\n };\n ```\n\n \n \n ```typescript fileName=\"product-copy.component.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { Component, Input, OnInit } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-product-copy\",\n template: `\n @if (content()) {\n

{{ content().description }}

\n }\n `,\n })\n export class ProductCopyComponent implements OnInit {\n @Input() productId!: string;\n @Input() userId!: string;\n\n content: any;\n\n ngOnInit() {\n this.content = useIntlayer(\"product-copy\", { id: this.productId, userId: this.userId });\n }\n }\n ```\n\n \n \n ```javascript fileName=\"product-copy.js\"\n import { useIntlayer } from \"vanilla-intlayer\";\n\n const content = useIntlayer(\"product-copy\", {\n id: \"prod_abcd\",\n userId: \"user_123\"\n });\n\n if (content) {\n document.body.innerHTML = `

${content.description}

`;\n }\n ```\n\n \n\n\n### Avec une locale explicite\n\n```tsx\nconst content = useIntlayer(\"product-copy\", {\n id: \"prod_abc\",\n userId: \"user_123\",\n locale: \"fr\",\n});\n```\n\n### Champ meta manquant — erreur de compilation\n\n```ts\n// Erreur de type : `userId` est manquant\nconst content = useIntlayer(\"product-copy\", { id: \"prod_abc\" });\n```\n\n## Mode de chargement (loading mode)\n\nLes enregistrements dynamiques sont généralement chargés de manière différée. Définissez `importMode` sur le dictionnaire pour contrôler cela :\n\n```ts contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nconst dictionary = {\n key: \"product-copy\",\n importMode: \"fetch\", // ou \"dynamic\"\n meta: { id: \"prod_abc\", userId: \"user_123\" },\n content: { … },\n} satisfies Dictionary;\n\nexport default dictionary;\n```\n\nVoir [optimisation du bundle](/fr/doc/concept/bundle-optimization) pour plus de détails sur les modes `static`, `dynamic` et `fetch`.\n\n## Cas d'utilisation typiques\n\n- Copie marketing par produit gérée dans un CMS\n- Contenu spécifique à l'utilisateur ou au compte\n- Tout contenu identifié par un ID opaque au moment de l'exécution\n","description":"Utilisez le champ meta dans les fichiers de contenu d'Intlayer pour déclarer des enregistrements gérés par CMS récupérés au moment de l'exécution par un identifiant opaque, permettant un contenu dynamique fortement typé sans énumération au moment de la compilation.","url":"https://intlayer.org/fr/doc/concept/dynamic-records","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Enregistrements Dynamiques, Contenu Dynamique, CMS, Contenu au moment de l'exécution, Intlayer, Internationalisation","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Développeurs, Responsables de contenu"}}

Auteur:

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

Référencez cette doc à votre assistant AI préféréChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

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

Modifier cette documentation

Si vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.

Lien GitHub de la documentation

Copier

Copier le Markdown du doc dans le presse-papiers

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

Variantes Fichier par locale