Better TranslateInicio
GitHub
Empezar
  • Introducción
  • Misión
  • Instalación
  • CLI
  • Habilidades
  • RTL
  • Changelog
Adaptadores
  • Core
  • React
  • Expo
  • Astro
  • MD y MDX
  • Next.js
  • TanStack Router

Astro

Usa @better-translate/astro cuando tu app Astro necesite traducciones conscientes de la petición.

1. Instalar los paquetes

npm install @better-translate/core @better-translate/astro astro

2. Crear el traductor

Crea src/lib/i18n.ts:

ts
1import { configureTranslations } from "@better-translate/core";23const en = {4  home: {5    title: "Hello from Astro",6  },7} as const;89const es = {10  home: {11    title: "Hola desde Astro",12  },13} as const;1415export const translator = await configureTranslations({16  availableLocales: ["en", "es"] as const,17  defaultLocale: "en",18  fallbackLocale: "en",19  messages: { en, es },20});

3. Exponer la configuración de petición

Crea src/lib/request.ts:

ts
1import { getRequestConfig } from "@better-translate/astro";23import { translator } from "./i18n";45export const requestConfig = getRequestConfig(async () => ({6  translator,7}));

4. Establecer el locale de la petición en middleware

Crea src/middleware.ts:

ts
1import { createBetterTranslateMiddleware } from "@better-translate/astro/middleware";23import { requestConfig } from "./lib/request";45export const onRequest = createBetterTranslateMiddleware(requestConfig, {6  resolveLocale: ({ params }) => params?.lang,7});

Si quieres la lista compartida en forma de corchetes, importa SUPPORTED_ASTRO_LOCALE_ROUTE_SYNTAXES desde @better-translate/astro. Incluye [locale], [lang], [language], [intl], [i18n], [l10n] y [localization].

5. Leer traducciones en una página

Crea src/lib/server.ts:

ts
1import { createServerHelpers } from "@better-translate/astro";23import { requestConfig } from "./request";45export const { getLocale, getTranslations } =6  createServerHelpers(requestConfig);

Crea src/pages/[lang]/index.astro:

astro
1---2import { getLocale, getTranslations } from "../../lib/server";34const locale = await getLocale();5const t = await getTranslations();6---78<html lang={locale}>9  <body>10    <h1>{t("home.title")}</h1>11  </body>12</html>

Paso opcional siguiente

Si la documentación o el blog de Astro viven en colecciones de contenido localizadas, añade helpers de contenido de Astro o el adaptador MDX cuando esta configuración básica funcione.

Generar archivos de locale automáticamente

En lugar de escribir cada traducción a mano, usa la CLI para extraer cadenas y generar archivos de locale: Guía de la CLI

Ejemplos

  • astro-example