Ejemplos

Estos ejemplos amplían el inicio rápido. Conserva su configuración, sus dos JSON y getStaticPaths; los fragmentos indican dónde añadir cada cambio.

Un componente reutilizable

El componente recibe el texto ya traducido. Así no necesita inicializar un idioma ni conocer la configuración.

src/components/Greeting.astro

---
interface Props { text: string; }
const { text } = Astro.props;
---
<h1>{text}</h1>

src/pages/[lang]/index.astro

---
import Greeting from "../../components/Greeting.astro";
import { setRequestLocale, getTranslations } from "astro-intl";

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

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

<Greeting text={t("greeting")} />

Autocompletado de claves

En el frontmatter de la página, después de inicializar el idioma, usa el tipo de tu JSON como argumento genérico. Esto permite comprobar claves como greeting con TypeScript.

src/pages/[lang]/index.astro — frontmatter

import type en from "../../i18n/messages/en.json";

const t = getTranslations<typeof en>();
const greeting = t("greeting");