Autor:

Creación:2026-06-12Última actualización:2026-06-26

Referencia esta doc a tu asistente AI favorito

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección

Historial de versiones

"Lanzamiento de la función de variantes"
v9.0.012/6/2026
"`variant` ahora acepta una cadena o un objeto — los antiguos `meta` / registros dinámicos se declaran como variantes de objeto"
v9.1.026/6/2026

El contenido de esta página ha sido traducido con una IA.

Ver la última versión del contenido original en 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

Variantes

Name: Intlayer
Author: Intlayer

Una variante es un conjunto de archivos de contenido que comparten la misma clave de diccionario (key) pero llevan cada uno un valor variant diferente. Intlayer sirve el archivo adecuado según el selector pasado a useIntlayer.

El valor de variant puede adoptar dos formas:

Una cadena — una única alternativa con nombre (pruebas A/B, banners de temporada, feature flags).
Un objeto — un discriminador estructurado direccionado por un conjunto de campos (registros de CMS, contenido específico de usuario, cualquier contenido indexado por un ID opaco). El objeto completo es la identidad: el selector debe proporcionar un objeto igual para resolver la entrada.

La forma de objeto sustituye al antiguo campo meta. Donde antes escribía meta: { id, … }, escriba variant: { id, … }, y selecciónela con { variant: { id, … } }.

Variantes con nombre (cadena)

Cada archivo representa una alternativa con nombre. Omitir variant (o establecerlo en "default") lo marca como el valor de reserva.

hero-banner.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "default",
  content: {
    headline: t({
      en: "Build faster with Intlayer",
      fr: "Développez plus vite avec Intlayer",
    }),
    cta: t({ en: "Get started", fr: "Commencer" }),
  },
} satisfies Dictionary;

export default dictionary;

hero-banner.black-friday.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "black_friday",
  content: {
    headline: t({
      en: "50 % off — today only",
      fr: "−50 % — aujourd'hui seulement",
    }),
    cta: t({ en: "Shop now", fr: "Acheter maintenant" }),
  },
} satisfies Dictionary;

export default dictionary;

Consumir variantes con nombre

Variante por defecto

Hero.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante por defecto

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante por defecto

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.vue

Copiar código

Copiar el código al portapapeles

<script setup>
import { useIntlayer } from "vue-intlayer";
const { headline, cta } = useIntlayer("hero-banner");
</script>

<template>
  <section>
    <h1>{{ headline }}</h1>
    <a>{{ cta }}</a>
  </section>
</template>

Hero.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("hero-banner");
</script>

<section>
  <h1>{$content.headline}</h1>
  <a>{$content.cta}</a>
</section>

Hero.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante por defecto

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → variante por defecto

  return (
    <section>
      <h1>{content().headline}</h1>
      <a>{content().cta}</a>
    </section>
  );
};

hero.component.ts

Copiar código

Copiar el código al portapapeles

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-hero",
  template: `
    <section>
      <h1>{{ content().headline }}</h1>
      <a>{{ content().cta }}</a>
    </section>
  `,
})
export class HeroComponent {
  content = useIntlayer("hero-banner");
}

hero.js

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "vanilla-intlayer";const { headline, cta } = useIntlayer("hero-banner");document.body.innerHTML = `  <section>    <h1>${headline}</h1>    <a>${cta}</a>  </section>`;

import { useIntlayer } from "vanilla-intlayer";const { headline, cta } = useIntlayer("hero-banner");document.body.innerHTML = `  <section>    <h1>${headline}</h1>    <a>${cta}</a>  </section>`;

Variante con nombre

tsx

Copiar código

Copiar el código al portapapeles

const { headline, cta } = useIntlayer("hero-banner", {  variant: "black_friday",});

const { headline, cta } = useIntlayer("hero-banner", {  variant: "black_friday",});

Variante con nombre con locale explícito

tsx

Copiar código

Copiar el código al portapapeles

const content = useIntlayer("hero-banner", {  variant: "black_friday",  locale: "fr",});

const content = useIntlayer("hero-banner", {  variant: "black_friday",  locale: "fr",});

Variantes de objeto (estructuradas)

Una variante de objeto direcciona el contenido mediante un conjunto arbitrario de pares clave-valor declarados en el campo variant — lo que permite modelar registros de CMS, contenido específico de usuario o cualquier contenido cuya clave sea un ID opaco. El objeto completo es la identidad: el selector debe proporcionar un objeto igual para que la entrada se resuelva.

product.abc.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "product",
  variant: { 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.abcd.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "product",
  variant: { 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;

Consumir variantes de objeto

Pase el objeto coincidente a variant. Cada campo declarado en el diccionario debe proporcionarse e ser igual; de lo contrario el resultado es null. El orden de los campos no importa.

Product.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "react-intlayer";

export const Product = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product", {
    variant: { id: productId, userId },
  });

  if (!content) return null;

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

Product.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "next-intlayer";

export const Product = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product", {
    variant: { id: productId, userId },
  });

  if (!content) return null;

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

Product.vue

Copiar código

Copiar el código al portapapeles

<script setup>
import { useIntlayer } from "vue-intlayer";

const props = defineProps({
  productId: String,
  userId: String,
});

const content = useIntlayer("product", {
  variant: { id: props.productId, userId: props.userId },
});
</script>

<template>
  <p v-if="content">{{ content.description }}</p>
</template>

Product.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";

export let productId: string;
export let userId: string;

const content = useIntlayer("product", {
  variant: { id: productId, userId },
});
</script>

{#if $content}
  <p>{$content.description}</p>
{/if}

Product.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "preact-intlayer";

export const Product = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product", {
    variant: { id: productId, userId },
  });

  if (!content) return null;

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

Product.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "solid-intlayer";

export const Product = (props: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product", {
    variant: { id: props.productId, userId: props.userId },
  });

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

product.component.ts

Copiar código

Copiar el código al portapapeles

import { Component, Input, OnInit } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-product",
  template: `
    @if (content()) {
      <p>{{ content().description }}</p>
    }
  `,
})
export class ProductComponent implements OnInit {
  @Input() productId!: string;
  @Input() userId!: string;

  content: any;

  ngOnInit() {
    this.content = useIntlayer("product", {
      variant: { id: this.productId, userId: this.userId },
    });
  }
}

product.js

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product", {  variant: { id: "prod_abcd", userId: "user_123" },});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product", {  variant: { id: "prod_abcd", userId: "user_123" },});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

Con locale explícito

tsx

Copiar código

Copiar el código al portapapeles

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

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

Campo faltante — sin coincidencia

Copiar código

Copiar el código al portapapeles

// Devuelve null: falta `userId`, por lo que el objeto no coincide con la variante declaradaconst content = useIntlayer("product", { variant: { id: "prod_abc" } });

// Devuelve null: falta `userId`, por lo que el objeto no coincide con la variante declaradaconst content = useIntlayer("product", { variant: { id: "prod_abc" } });

Modo de carga

Las variantes de objeto suelen cargarse de forma diferida. Establezca importMode en el diccionario para controlarlo:

Copiar código

Copiar el código al portapapeles

const dictionary = {
  key: "product",
  importMode: "fetch", // or "dynamic"
  variant: { id: "prod_abc", userId: "user_123" },
  content: { … },
} satisfies Dictionary;

export default dictionary;

Consulte optimización del bundle para detalles sobre los modos static, dynamic y fetch.

Casos de uso típicos

Pruebas A/B de texto dirigidas por una clave de experimento
Banners de temporada o promocionales
Mensajería con feature flag
Campañas de marketing específicas por locale
Copia de marketing por producto gestionada en un CMS
Contenido específico de usuario o de cuenta
Cualquier contenido indexado por un ID opaco en tiempo de ejecución

Colecciones

Archivo por locale