Documentación / Astro

Astro i18n, automatizado

Localice un sitio Astro: las páginas .astro obtienen t() del idioma de la URL, cada página estática obtiene una copia por idioma para los motores de búsqueda, y las islas React, Vue o Svelte siguen el ritmo.

Cómo funciona

El texto y las expresiones en los archivos .astro se convierten en {t('key')}, con t leyendo el idioma de la URL (/es/about). Cada página obtiene una copia por idioma, por lo que cada idioma es una página real e indexable; las rutas dinámicas conservan sus getStaticPaths y props.

Las islas React, Vue y Svelte se localizan en la misma ejecución, cada una con su propia biblioteca, siguiendo el idioma de la página.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

src/pages/products/tea.astro · antes

---
import Layout from '../../layouts/Layout.astro';
const product = { name: 'Jasmine tea', stock: 12 };
---
<Layout title="Our teas">
  <h1>{product.name}, picked this spring</h1>
  <p>{product.stock > 0 ? 'In stock' : 'Sold out'}</p>
</Layout>

src/pages/products/tea.astro · después

---
import Layout from '../../layouts/Layout.astro';
import { getLangFromUrl, useTranslations } from '../i18n';
const product = { name: 'Jasmine tea', stock: 12 };
const t = useTranslations(getLangFromUrl(Astro.url));
---
<Layout title={t('tea.our_teas')}>
  <h1>{t('tea.picked_this_spring', { name: product.name })}</h1>
  <p>{product.stock > 0 ? t('tea.in_stock') : t('tea.sold_out')}</p>
</Layout>

locales/en.json

{
  "tea": {
    "our_teas": "Our teas",
    "picked_this_spring": "{{name}}, picked this spring",
    "in_stock": "In stock",
    "sold_out": "Sold out"
  }
}

Lo que añade la configuración

La primera ejecución configura un módulo src/i18n generado (islas: sus propias bibliotecas) si el proyecto aún no lo tiene:

src/i18n con t, getLangFromUrl y localizePath
Una copia de cada página en src/pages/<lang>/, rutas dinámicas incluidas
<html lang dir> configurado desde la URL en los diseños

Ejecutarlo

La CLI necesita Node.js 22 o posterior.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.