Astro

静的およびサーバーレンダリングされた多言語サイト向けに、i1nをAstroと統合します。

セットアップ

Astroプロジェクトでi1n initを実行します。CLIは、locales/ディレクトリにネストされたJSON形式を構成します。Astroプロジェクトでは通常、i1n SDKをスタンドアロンモードで使用します。

i18nを初期化し、useTranslations()関数をエクスポートするユーティリティモジュール(例:src/i18n/index.ts)を作成します。この関数は、適切なロケールリソースをロードし、型安全なt()関数を返します。

使用方法

`.astro` ページでは、フロントマターで `useTranslations(locale)` を呼び出して `t()` 関数を取得します。これを使用してテンプレート内の翻訳済み文字列をレンダリングします。Astro コンポーネントはビルド時に実行されるため、翻訳は生成された HTML に静的に埋め込まれます。

ファイル管理を容易にするために、名前空間(例: common.json、home.json、docs.json)ごとに翻訳を整理してください。内部ナビゲーション用のロケールプレフィックス付きURLを生成するには、getLocalePath(locale, path)を使用してください。

静的生成

すべてのサポートされているロケール用のページを生成するには getStaticPaths() を使用します。各ロケールバリアントは個別の HTML ページとしてビルドされ、適切な hreflang タグによる高速な読み込みと最適な SEO を保証します。

ビルドステップに i1n pull を追加して、静的生成の前に翻訳ファイルが同期されていることを確認してください。Astro のビルドプロセスにより、すべてのロケールバリアントが自動的に生成されます。

ブリッジモード

Astroプロジェクトでは、外部のi18nライブラリではなく、通常i1n SDKを直接使用します。ただし、フレームワーク統合(例:Astro内のReactコンポーネント)を使用する場合は、それらのフレームワークアイランド内でBridge Modeを使用できます。

Reactアイランドの場合: registerI1n((key, params) => i18next.t(key, params))。Vueアイランドの場合: registerI1n((key, params) => i18n.global.t(key, params))。Astroシェルとフレームワークアイランドは、それぞれ好みの方法を使用できます。

src/i18n/index.ts
import { init, t as i1nT } from 'i1n'

export function useTranslations(locale: string) {
  init({
    locale,
    resources: loadResources(locale)
  })
  return i1nT
}

関連