Skip to main content

Usage

1. Create Messages​

Create message files for each locale.

// src/messages/en.ts
export default {
  common: {
    title: "My Site",
    description: "Welcome"
  }
}

// src/messages/ja.ts
export default {
  common: {
    title: "マイサイト",
    description: "ようこそ"
  }
}

2. Define i18n Instance​

Import define from @i18n-tiny/astro to create your instance.

// src/i18n.ts
import { define } from '@i18n-tiny/astro'
import en from './messages/en'
import ja from './messages/ja'

export const { getMessages, getTranslations } = define({
  messages: { en, ja }
})

3. Advanced Setup (Optional)​

Depending on your project's output mode, you can add an Integration (for SSG) or Middleware (for SSR).

SSG​

Use the Integration if you want to copy the default locale's content to the root directory after build, allowing access without a prefix (e.g., /about instead of /en/about).

// astro.config.mjs
import { defineConfig } from 'astro/config'
import { create } from '@i18n-tiny/astro/integration'

export default defineConfig({
  output: 'static', // Default
  integrations: [
    create({ defaultLocale: 'en' })
  ]
})

SSR​

Use the Middleware for Server-Side Rendering to handle language detection and redirects.

// src/middleware.ts
import { defineMiddleware } from 'astro/middleware'
import { create } from '@i18n-tiny/astro/middleware'

export const onRequest = defineMiddleware(
  create({
    locales: ['en', 'ja'],
    defaultLocale: 'en'
  })
)

4. Use in Pages​

Retrieve messages within your [locale] directory.

---
// src/pages/[locale]/index.astro
import { getMessages } from '../../i18n'
const { locale } = Astro.params

const messages = getMessages(locale)
---

<html lang={locale}>
  <body>
    <h1>{messages.common.title}</h1>
  </body>
</html>