Documentation: getMultilingualUrls Function in intlayer

    説明:

    getMultilingualUrls 関数は、指定された URL に各サポートされているロケールでプレフィックスを付けることによって、マルチリンガル URL のマッピングを生成します。この関数は、絶対 URL と相対 URL の両方を処理でき、提供された設定やデフォルトに基づいて適切なロケールプレフィックスを適用します。


    パラメータ:

    • url: string

      • 説明: ロケールでプレフィックスを付ける元の URL 文字列。
      • : string
    • locales: Locales[]

      • 説明: サポートされているロケールのオプション配列。プロジェクトで設定されたロケールがデフォルトです。
      • : Locales[]
      • デフォルト: localesDefault
    • defaultLocale: Locales

      • 説明: アプリケーションのデフォルトロケール。プロジェクトで設定されたデフォルトロケールがデフォルトです。
      • : Locales
      • デフォルト: defaultLocaleDefault
    • prefixDefault: boolean

      • 説明: デフォルトロケールにプレフィックスを付けるかどうか。プロジェクトで設定された値がデフォルトです。
      • : boolean
      • デフォルト: prefixDefaultDefault

    戻り値:

    • : IConfigLocales<string>
    • 説明: 各ロケールをその対応するマルチリンガル URL へマッピングしたオブジェクト。

    使用例:

    相対 URL:

    typescript
    import { getMultilingualUrls, Locales } from "intlayer";getMultilingualUrls(  "/dashboard",  [Locales.ENGLISH, Locales.FRENCH],  Locales.ENGLISH,  false);// 出力: {//   en: "/dashboard",//   fr: "/fr/dashboard"// }

    絶対 URL:

    typescript
    getMultilingualUrls(  "https://example.com/dashboard",  [Locales.ENGLISH, Locales.FRENCH],  Locales.ENGLISH,  true);// 出力: {//   en: "https://example.com/en/dashboard",//   fr: "https://example.com/fr/dashboard"// }

    エッジケース:

    • ロケールセグメントなし:

      • 関数は、マルチリンガルマッピングを生成する前に、URL から既存のロケールセグメントを削除します。
    • デフォルトロケール:

      • prefixDefaultfalse のとき、関数はデフォルトロケールの URL にプレフィックスを付けません。
    • サポートされていないロケール:

      • locales 配列で提供されたロケールのみが URL の生成に考慮されます。

    アプリケーションでの使用:

    マルチリンガルアプリケーションでは、localesdefaultLocale で国際化設定を構成することが、正しい言語を表示するために重要です。以下は、アプリケーションセットアップで getMultilingualUrls を使用する方法の例です:

    tsx
    import { Locales, type IntlayerConfig } from "intlayer";// サポートされているロケールとデフォルトロケールの設定export default {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },} satisfies IntlayerConfig;export default config;

    上記の設定により、アプリケーションは ENGLISHFRENCH、および SPANISH をサポートされている言語として認識し、ENGLISH をフォールバック言語として使用します。

    この設定を使用して、getMultilingualUrls 関数はアプリケーションのサポートされているロケールに基づいてマルチリンガル URL マッピングを動的に生成できます:

    typescript
    getMultilingualUrls(  "/dashboard",  [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  Locales.ENGLISH);// 出力:// {//   en: "/dashboard",//   fr: "/fr/dashboard",//   es: "/es/dashboard"// }getMultilingualUrls(  "https://example.com/dashboard",  [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  Locales.ENGLISH,  true);// 出力:// {//   en: "https://example.com/en/dashboard",//   fr: "https://example.com/fr/dashboard",//   es: "https://example.com/es/dashboard"// }

    getMultilingualUrls を統合することで、開発者は複数の言語で一貫した URL 構造を維持でき、ユーザーエクスペリエンスと SEO の両方を向上させます。

    このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

    ドキュメントへのGitHubリンク