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-account にリダイレクトする必要があります) ).

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

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

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

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

export const onRequest = defineMiddleware((context, next) => {
  // Obter o idioma do parâmetro da URL
  const lang = context.params.lang;

  // Se mudou
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirecionar para o idioma alterado ou padrão (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 サイトの他の関連記事を参照してください。