Diga Olá para Universally para Astro: Traduza seu site diretamente do seu código

Seu site Astro é rápido, seu código é limpo e suas páginas estão exatamente onde você deseja. Agora, imagine oferecer essa mesma experiência a visitantes em espanhol, francês, japonês e mais de 100 outros idiomas, sem precisar criar um site separado para cada um.

É isso que estamos trazendo para o Astro.

Conheça o Universally para Astro, nosso primeiro SDK criado para um framework JavaScript.

Ele traz tradução com IA diretamente para o seu projeto Astro, permitindo que você sirva páginas multilíngues a partir da sua base de código existente, em seu próprio domínio, com HTML renderizado no servidor.

Sem pastas de páginas duplicadas. Sem arquivos de tradução extensos para manter. Apenas as páginas que você já está construindo, prontas para um público global.

E começar leva apenas algumas linhas de código.

Um Conjunto de Páginas para Cada Idioma

Com o Universally para Astro, você não cria um segundo site. Você continua escrevendo páginas da maneira que já faz.

Com o Universally para Astro, você mantém seus arquivos .astro existentes e serve cada idioma em seu próprio URL. Assim, sua página /about pode se tornar /fr/about, /es/about e mais, sem duplicar a página em si.

Tudo o que é preciso é envolver seu texto visível em t() e seus links internos em 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>

Em suas páginas de idioma de origem, t() retorna seu texto original intacto. Em uma página traduzida, ele retorna a tradução, e href() adiciona o prefixo de idioma correto para que os visitantes permaneçam em seu idioma enquanto navegam.

Precisa ajustar uma frase? Abra a string em seu painel do Universally e edite-a lá. Suas regras de glossário também se aplicam, para que nomes de marcas e termos de produtos saiam como você deseja em todos os idiomas.

Você pode ver todas as opções em nosso guia para traduzir páginas no Astro.

Configuração Leva Poucas Linhas, Não uma Reescrita

Começar se parece muito com adicionar qualquer outra integração do Astro.

Primeiro, crie um novo projeto em seu painel do Universally, escolha Astro como sua tecnologia e selecione SDK na tela de Instruções de Configuração.

Em seguida, instale o pacote:

npm install @universally-sdk/astro

Ele também funciona com pnpm, yarn e bun.

A partir daqui, adicione a chave de API do seu projeto a .env como UNIVERSALLY_API_KEY, e então registre a integração em astro.config.mjs.

E parecerá algo assim:

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, insira <UniversallyHead /> no <head> do seu layout. Ele adiciona links hreflang e o seletor de idioma, para que não haja mais nada para configurar.

É isso! Adicione um idioma de destino em seu painel, reinicie seu servidor de desenvolvimento e abra /fr/about para ver sua página em francês.

O Universally para Astro funciona com Astro 5 ou mais recente, tanto para sites renderizados no servidor quanto estáticos. Para o guia completo, siga nosso guia para instalar a integração do Astro.

Suas Páginas Nunca Esperam por uma Tradução

Adicionar idiomas a um site não deve deixá-lo lento. Projetamos o SDK com isso em mente.

Quando seu servidor ou build é iniciado, Universally carrega suas traduções na memória. Cada chamada t() é uma consulta rápida na memória, então nenhum visitante fica esperando por uma solicitação de tradução.

Adicionar novo conteúdo funciona da mesma maneira. Quando você envia uma página com texto novo, o primeiro visitante vê sua redação original enquanto Universally traduz as novas strings em segundo plano. A versão traduzida geralmente aparece em uma renderização posterior, em um ou dois segundos.

As edições que você faz no painel chegam ao seu site ativo por meio de um push assinado, e seu servidor também verifica as alterações a cada 60 segundos por padrão. Executando um site estático? Suas traduções são incorporadas no momento da compilação, e uma recompilação rápida capta qualquer novidade.

Nosso guia de atualizações de tradução cobre exatamente como isso funciona em cada configuração.

Você continua enviando. Suas traduções acompanham.

Pronto para Tornar seu Site Astro Global?

Da próxima vez que alguém pedir uma versão em espanhol, você não precisará copiar pastas ou gerenciar um monte de chaves de tradução.

Universally para Astro está disponível agora em Beta!

Instale o pacote, envolva seu texto em t() e comece a receber visitantes em mais de 110 idiomas.

Comece a usar o Universally gratuitamente!

Como este é o nosso primeiro SDK de framework, seu feedback moldará os próximos passos. Está construindo algo com ele? Conte-nos o que está funcionando, relate um bug ou sugira um recurso através da nossa página de contato.