Saluda a Universally para Astro: Traduce tu sitio directamente desde tu código

Tu sitio de Astro es rápido, tu código está limpio y tus páginas están exactamente donde quieres. Ahora imagina ofrecer esa misma experiencia a visitantes en español, francés, japonés y más de 100 idiomas, sin necesidad de construir un sitio separado para cada uno.

Eso es lo que traemos a Astro.

Conoce Universally para Astro, nuestro primer SDK construido para un framework de JavaScript.

Trae traducción impulsada por IA directamente a tu proyecto de Astro, permitiéndote servir páginas multilingües desde tu base de código existente, en tu propio dominio, con HTML renderizado en el servidor.

Sin carpetas de páginas duplicadas. Sin extensos archivos de traducción que mantener. Solo las páginas que ya estás construyendo, listas para una audiencia global.

Y empezar solo toma unas pocas líneas de código.

Un Conjunto de Páginas para Cada Idioma

Con Universally para Astro, no construyes un segundo sitio. Sigues escribiendo páginas como lo haces habitualmente.

Con Universally para Astro, mantienes tus archivos .astro existentes y sirves cada idioma en su propia URL. Así, tu página /about puede convertirse en /fr/about, /es/about, y más, sin duplicar la página en sí.

Todo lo que se necesita es envolver tu texto visible en t() y tus enlaces internos en href(), ambos extraídos de Astro.locals:

---
const { t, href } = Astro.locals;
---
<h1>{t('Plan your next trip')}</h1>
<p>{t('Find flights, hotels, and tours in one place.')}</p>
<a href={href('/pricing')}>{t('See pricing')}</a>

En tus páginas de idioma de origen, t() devuelve tu texto original sin modificar. En una página traducida, devuelve la traducción, y href() agrega el prefijo de idioma correcto para que los visitantes permanezcan en su idioma mientras navegan.

¿Necesitas ajustar una frase? Abre la cadena en tu panel de Universally y edítala allí. Tus reglas de glosario también se aplican, por lo que los nombres de marca y términos de producto aparecen como deseas en cada idioma.

Puedes ver todas las opciones en nuestra guía para traducir páginas en Astro.

La Configuración Toma Pocas Líneas, No una Reescrittura

Empezar se parece mucho a agregar cualquier otra integración de Astro.

Primero, crea un nuevo proyecto en tu panel de Universally, elige Astro como tu tecnología y selecciona SDK en la pantalla de Instrucciones de Configuración.

Luego, instala el paquete:

npm install @universally-sdk/astro

También funciona con pnpm, yarn y bun.

A partir de aquí, agrega la clave API de tu proyecto a .env como UNIVERSALLY_API_KEY, luego registra la integración en astro.config.mjs.

Y se verá algo así:

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
import universally from '@universally-sdk/astro';

export default defineConfig({
  site: 'https://example.com',
  output: 'server',
  adapter: node({ mode: 'standalone' }),
  integrations: [universally()],
});

Finalmente, inserta <UniversallyHead /> en el <head> de tu layout. Agrega enlaces hreflang y el selector de idioma, así no hay nada más que configurar.

¡Eso es todo! Agrega un idioma de destino en tu panel, reinicia tu servidor de desarrollo y abre /fr/about para ver tu página en francés.

Universally para Astro funciona con Astro 5 o superior, tanto para sitios renderizados en el servidor como estáticos. Para el recorrido completo, sigue nuestra guía para instalar la integración de Astro.

Tus páginas nunca esperan por una traducción

Agregar idiomas a un sitio no debería hacerlo más lento. Diseñamos el SDK pensando en eso.

Cuando tu servidor o compilación se inicia, Universally carga tus traducciones en memoria. Cada llamada a t() es una búsqueda rápida en memoria, por lo que ningún visitante se queda esperando una solicitud de traducción.

Agregar contenido nuevo funciona de la misma manera. Cuando publicas una página con texto nuevo, el primer visitante ve tu redacción original mientras Universally traduce las nuevas cadenas en segundo plano. La versión traducida generalmente aparece en una renderización posterior en uno o dos segundos.

Las ediciones que realices en el panel llegan a tu sitio en vivo a través de un push firmado, y tu servidor también verifica los cambios cada 60 segundos por defecto. ¿Ejecutas un sitio estático? Tus traducciones se integran en el momento de la compilación, y una recompilación rápida recoge cualquier novedad.

Nuestra guía de actualizaciones de traducción cubre exactamente cómo funciona esto en cada configuración.

Tú sigues publicando. Tus traducciones lo siguen.

¿Listo para llevar tu sitio de Astro a nivel mundial?

La próxima vez que alguien pida una versión en español, no necesitarás copiar carpetas ni administrar un montón de claves de traducción.

¡Universally para Astro ya está disponible en Beta!

Instala el paquete, envuelve tu texto en t() y comienza a dar la bienvenida a visitantes en más de 110 idiomas.

¡Comienza con Universally gratis!

Dado que este es nuestro primer SDK de framework, tus comentarios darán forma a dónde irá a continuación. ¿Estás construyendo algo con él? Cuéntanos qué funciona, reporta un error o sugiere una función a través de nuestra página de contacto.