ポルトガルの同盟者とのより良い関係

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

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

問題

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

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

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

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

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

/[任意の言語フラグ]/all-my-routes のようなものが必要です。

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

挑戦して失敗する

まず最初に、i18n に関する Astro レシピを読み、この問題を解決するためにいくつかのコミュニティ ライブラリを調べました。

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

構成ファイル内の配列に基づいて、astro-i18next はビルド時に i18n ページを生成するため、コーディングは 1 回だけで済み、ページのクローン作成について心配する必要はありません。

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

解決

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

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

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

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

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

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

{m.hello({ name: "Alan" })}

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

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

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

.
└── 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()}/`, '');
---

• Ir para Português
• Go to English

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

• {m.goToLanguage(undefined, { languageTag: 'pt-br' })}
• {m.goToLanguage(undefined, { languageTag: 'en' })}

考慮事項

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

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