Astro
Integrate i1n with Astro for static and server-rendered multilingual sites.
Setup
Run i1n init in your Astro project. The CLI configures nested JSON format in the locales/ directory. Astro projects typically use the i1n SDK in standalone mode.
Create a utility module (e.g., src/i18n/index.ts) that initializes i1n and exports a useTranslations() function. This function loads the appropriate locale resources and returns the type-safe t() function.
Usage
In your .astro pages, call useTranslations(locale) in the frontmatter to get the t() function. Use it to render translated strings in your templates. Since Astro components run at build time, translations are statically embedded in the generated HTML.
Organize translations by namespace (e.g., common.json, home.json, docs.json) to keep files manageable. Use getLocalePath(locale, path) to generate locale-prefixed URLs for internal navigation.
Static Generation
Use getStaticPaths() to generate pages for all supported locales. Each locale variant is built as a separate HTML page, ensuring fast loading and optimal SEO with proper hreflang tags.
Add i1n pull to your build step to ensure translation files are in sync before static generation. Astro's build process will then generate all locale variants automatically.
Bridge Mode
Astro projects typically use the i1n SDK directly rather than an external i18n library. However, if you use a framework integration (e.g., React components inside Astro), you can use Bridge Mode within those framework islands.
For React islands: registerI1n((key, params) => i18next.t(key, params)). For Vue islands: registerI1n((key, params) => i18n.global.t(key, params)). The Astro shell and framework islands can each use their preferred approach.
import { init, t as i1nT } from 'i1n'
export function useTranslations(locale: string) {
init({
locale,
resources: loadResources(locale)
})
return i1nT
}