Astro Build で i 用の動的ルート言語を作成する

ポルトガルの同盟者と協力してください

最近、ダッシュボードのようなプロジェクトを作成するために Astro を学習し始めました。

このプロジェクトでは国際化 (i18n) を実装したいと考えています。言語に関係なく、誰もが国際化を使用できるようにする必要があるという考えです。

問題

Astro の i18n サポートは非​​常に優れています。ファイル/フォルダー構造に基づいたルーティングを備えた Next.js やその他のフレームワークと同様に機能します。

英語のページとポルトガル語の同じページが必要な場合は、次のようにファイルを整理できます:

.
└── src/
    └── pages/
        ├── en/
        │   ├── login.astro
        │   └── dashboard.astro
        └── pt-br/
            ├── login.astro
            └── dashboard.astro

そして、各ページには独自の i18n 文字列があります。素晴らしいですね!

しかし、ここからが問題の始まりです。すべてのページを複製したくないのです。これらのページの文字列のみを変更したいと考えています。

/[any- language-flag]/all-my-routes のようなものが必要です。

「react-intl のようなものを使用しないのはなぜですか?」と疑問に思うかもしれません。私の答えは、Astro のエンジン、特に SSG/SSR を最大限に活用し、クライアント コンポーネントを避けたいということです。通常、これらのフレームワークはクライアント側でのみレンダリングされる React Context を使用します。

挑戦して失敗する

まず、私は i18n に関する Astro レシピを読み、この問題を解決するためにいくつかのコミュニティ ライブラリをチェックしました。

私が最初にテストしたライブラリは astro-i18next で、まさに私が必要としていたものに似ていました!

astro-i18next は、構成ファイル内の配列に基づいてビルド時に i18n ページを生成するため、コードを一度作成するだけでよく、ページの複製について心配する必要はありません。

問題は、astro-i18next がアーカイブされているか、もうメンテナンスされていないように見えることです。問題はたくさんありますが、最後のコミットは 1 年以上前です。

解決

他のライブラリ (astro-i18n に敬意を表します) を試した後、Paraglide を見つけました。これは私のプロジェクトにとって大きな変革となりました。

私がパラグライダーを選んだ理由:

• タイプセーフなので、TypeScript で使用でき、オートコンプリートの恩恵を受けることができます。
• i18n 文字列を関数に変換するため、文字列キーが変更されるとビルドが失敗し、エラーが早期に検出されます。
• i18n 関数を使用すると、ツリーシェイキングが改善され、未使用の関数が削除されます。
• 開発エクスペリエンスを強化する VS Code 拡張機能があります。

注: Paraglide は JS プロジェクトでも使用でき、Next.js もサポートしています。

インストールと構成後、メッセージを次のように使用しました:

---
import * as m from "../paraglide/messages.js";
---

<h1>{m.hello({ name: "Alan" })}</h1>

しかし、これではルーティングの問題は解決されませんでした。追加したい言語ごとにページのクローンを作成していました。

これを解決するために、ルート ルートで動的ルートを使用するようにプロジェクトを変更しました。これにより、すべてのルートが言語フラグで始まるようになりました。

私のフォルダー構造は次のようになりました:

.
└── src/
    └── pages/
        └── [lang]/
            ├── login.astro
            └── dashboard.astro

この変更後、Paraglide はルート パラメーターから言語を自動的に取得できるようになります。

• http://localhost:4321/en/login
• http://localhost:4321/pt-br/login

これで、astro.config.ts で設定し、文字列ファイルを翻訳するだけで、新しい言語を追加できるようになりました。

しかし、解決すべき問題がまだ 2 つあります:

1. ユーザーが言語フラグなしで http://localhost:4321/ に初めてアクセスしたとき。
2. ユーザーが特定のルートで言語を変更した場合、同じルートに維持する必要があります (例: /en/create-account は /pt-br/create-account または /pt-br/criar にリダイレクトする必要があります) -コンタ).

言語リダイレクト用ミドルウェア

言語リダイレクトの最初の問題を解決するために、Astro ミドルウェアを使用しました。

src/middleware/index.ts に次のコードを追加しました:

import { defineMiddleware } from 'astro:middleware';
import {
  languageTag,
  setLanguageTag,
  type AvailableLanguageTag,
} from '../paraglide/runtime';

export const onRequest = defineMiddleware((context, next) => {
  // Get lang from url param
  const lang = context.params.lang;

  // If changed
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirect to lang changed or default (en)
    return context.redirect(`/${lang ?? 'en'}`);
  }

  return next();
});

現在のルートを含む言語ピッカー

ユーザーが言語を切り替えたときに同じルートを維持できるように、次のコンポーネントを追加しました:

---
import { languageTag } from '../paraglide/runtime';

const pathName = Astro.url.pathname.replace(`/${languageTag()}/`, '');
---

<ul>
  <li>
    <a href={`/pt-br/${pathName}`}>Ir para Português</a>
  </li>
  <li>
    <a href={`/en/${pathName}`}>Go to English</a>
  </li>
</ul>

さらに、Paraglide メッセージ関数の 2 番目のパラメーターを使用して、これらのメッセージも翻訳できます。

<ul>
  <li>
    <a href={`/pt-br/${pathName}`}>{m.goToLanguage(undefined, { languageTag: 'pt-br' })}</a>
  </li>
  <li>
    <a href={`/en/${pathName}`}>{m.goToLanguage(undefined, { languageTag: 'en' })}</a>
  </li>
</ul>

考慮事項

特に私はまだ Astro を学んでいる最中なので、私の解決策が最善であるとは考えていません。そのため、他の解決策があるかもしれません。何かご存知の場合は、コメントしてください。試してみます :)

この記事を読んでいただきありがとうございます!ご質問がございましたら、コメントしてください。喜んで返信させていただきます。

以上がAstro Build で i 用の動的ルート言語を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。