Examples

These examples extend the quick start. Keep its configuration, both JSON files and getStaticPaths; each snippet indicates where to add the change.

A reusable component

The component receives already translated text. It does not need to initialize a language or know about the configuration.

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")} />

Key autocomplete

In the page frontmatter, after initializing the language, use your JSON type as a generic argument. This lets TypeScript check keys such as greeting.

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

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

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