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});

共有のブラケット形式一覧が必要なら、@better-translate/astro から SUPPORTED_ASTRO_LOCALE_ROUTE_SYNTAXES を import します。[locale]、[lang]、[language]、[intl]、[i18n]、[l10n]、[localization] が含まれます。

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