Traducciones y variables

Continúa desde Inicio rápido. Mantén la misma configuración y sustituye los mensajes y la página por los ejemplos siguientes.

Mensajes con variables y secciones

Una variable reserva un espacio para un valor. Un namespace agrupa claves relacionadas dentro de un objeto, como nav. Mantén la misma estructura en los dos idiomas.

src/i18n/messages/en.json

{
  "greeting": "Hello, {name}!",
  "nav": {
    "home": "Home"
  }
}

src/i18n/messages/es.json

{
  "greeting": "Hola, {name}!",
  "nav": {
    "home": "Inicio"
  }
}

Traduce desde la página

getTranslations() lee desde la raíz; getTranslations('nav') limita las claves a nav. Inicializa el idioma en la página antes de traducir. Un layout usado dentro de la página no inicializa retroactivamente su frontmatter.

src/pages/[lang]/index.astro

---
import { setRequestLocale, getTranslations } from "astro-intl";

export function getStaticPaths() {
  return [{ params: { lang: "en" } }, { params: { lang: "es" } }];
}

await setRequestLocale(Astro.url);
const t = getTranslations();
const tNav = getTranslations("nav");
---

<h1>{t("greeting", { name: "Ana" })}</h1>
<a href={`/${Astro.params.lang}/`}>{tNav("home")}</a>

Valores aceptados

Las variables aceptan string, number y boolean. Si omites una variable o pasas null/undefined, el marcador permanece en el texto. Para etiquetas HTML y componentes, continúa en Contenido enriquecido.