Astro
Integre o i1n com o Astro para sites multilíngues estáticos e renderizados no servidor.
Configuração
Execute i1n init no seu projeto Astro. A CLI configura o formato JSON aninhado no diretório locales/. Projetos Astro geralmente usam o SDK i1n no modo autônomo.
Crie um módulo de utilidade (ex. src/i18n/index.ts) que inicialize o i1n e exporte uma função useTranslations(). Essa função carrega os recursos de localidade apropriados e retorna a função t() type-safe.
Uso
Em suas páginas .astro, chame useTranslations(locale) no frontmatter para obter a função t(). Use-a para renderizar strings traduzidas em seus templates. Como os componentes Astro são executados em tempo de build, as traduções são incorporadas estaticamente ao HTML gerado.
Organize as traduções por namespace (ex: common.json, home.json, docs.json) para manter os arquivos gerenciáveis. Use getLocalePath(locale, path) para gerar URLs com prefixo de localidade para navegação interna.
Geração Estática
Use getStaticPaths() para gerar páginas para todas as localidades suportadas. Cada variante de localidade é criada como uma página HTML separada, garantindo carregamento rápido e SEO otimizado com as tags hreflang corretas.
Adicione o i1n pull à sua etapa de build para garantir que os arquivos de tradução estejam sincronizados antes da geração estática. O processo de build do Astro gerará automaticamente todas as variantes de localidade.
Modo Bridge
Projetos Astro normalmente usam o SDK i1n diretamente em vez de uma biblioteca i18n externa. No entanto, se você usar uma integração de framework (por exemplo, componentes React dentro do Astro), você pode usar o Modo Bridge dentro dessas ilhas de framework.
Para ilhas React: registerI1n((key, params) => i18next.t(key, params)). Para ilhas Vue: registerI1n((key, params) => i18n.global.t(key, params)). O shell do Astro e as ilhas de framework podem usar cada uma sua abordagem preferida.
import { init, t as i1nT } from 'i1n'
export function useTranslations(locale: string) {
init({
locale,
resources: loadResources(locale)
})
return i1nT
}