Astro

Astroアプリでリクエストに応じた翻訳が必要な場合は、@better-translate/astroを使用してください。

1. パッケージをインストールする

npm install @better-translate/core @better-translate/astro astro

2. 翻訳エンジンを作成する

src/lib/i18n.tsを作成してください：

1import { configureTranslations } from "@better-translate/core";23const en = {4  home: {5    title: "Hello from Astro",6  },7} as const;89const es = {10  home: {11    title: "Hola desde Astro",12  },13} as const;1415export const translator = await configureTranslations({16  availableLocales: ["en", "es"] as const,17  defaultLocale: "en",18  fallbackLocale: "en",19  messages: { en, es },20});

3. リクエスト設定を公開する

src/lib/request.tsを作成してください：

1import { getRequestConfig } from "@better-translate/astro";23import { translator } from "./i18n";45export const requestConfig = getRequestConfig(async () => ({6  translator,7}));

4. ミドルウェアでリクエストのロケールを設定する

src/middleware.tsを作成してください：

1import { createBetterTranslateMiddleware } from "@better-translate/astro/middleware";23import { requestConfig } from "./lib/request";45export const onRequest = createBetterTranslateMiddleware(requestConfig, {6  resolveLocale: ({ params }) => params?.lang,7});

5. ページで翻訳を読み込む

src/lib/server.tsを作成してください：

1import { createServerHelpers } from "@better-translate/astro";23import { requestConfig } from "./request";45export const { getLocale, getTranslations } =6  createServerHelpers(requestConfig);

src/pages/[lang]/index.astroを作成してください：

astro

1---2import { getLocale, getTranslations } from "../../lib/server";34const locale = await getLocale();5const t = await getTranslations();6---78<html lang={locale}>9  <body>10    <h1>{t("home.title")}</h1>11  </body>12</html>

オプションの次のステップ

Astroのドキュメントやブログ投稿がローカライズされたコンテンツコレクションにある場合は、この基本的なセットアップが動作した後に、AstroコンテンツヘルパーまたはMDXアダプターを追加してください。

ロケールファイルを自動生成する

すべての翻訳を手動で書く代わりに、CLIを使用して文字列を抽出し、ロケールファイルを生成できます：CLIガイド

例

astro-example