著者:
    Aymeric PINEAU
    作成:2026-09-19最終更新:2026-09-19

    useLocale フックのドキュメント

    remix-intlayer の useLocale フックは、現在処理中の HTTP リクエストのロケールと、プロジェクトで設定されたデフォルトロケールおよび利用可能なロケールへのアクセスを提供します。

    使用方法

    Remixコンポーネント内（例：言語スイッチャー）：

    src/components/LocaleSwitcher.tsx
    import { type FC } from "react";
import { Link } from "@remix-run/react";
import { useLocale } from "remix-intlayer";
import { getLocalizedUrl, getPathWithoutLocale } from "intlayer";

export const LocaleSwitcher: FC = () => {
  const { locale, availableLocales } = useLocale();
  const pathWithoutLocale = getPathWithoutLocale();

  return (
    <nav>
      <ul>
        {availableLocales.map((localeItem) => (
          <li key={localeItem} className="p-1">
            <Link
              href={getLocalizedUrl(pathWithoutLocale, localeItem)}
              aria-current={localeItem === locale ? "page" : undefined}
            >
              {localeItem.toUpperCase()}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
};

    ルートハンドラー内での使用:

    src/server.ts
    import { createRouter } from "remix/router";
import { intlayer, useLocale } from "remix-intlayer";

const router = createRouter({
  middleware: [intlayer()],
});

router.get("/api/locale-info", () => {
  const { locale, defaultLocale, availableLocales } = useLocale();

  return Response.json({
    locale,
    defaultLocale,
    availableLocales,
  });
});

    戻り値

    このフックは UseLocaleResult 型のオブジェクトを返します。

    プロパティタイプ説明
    localeDeclaredLocales現在のリクエストに対して解決されたロケール。
    defaultLocaleDeclaredLocalesintlayer.config.ts で設定されたデフォルトのフォールバックロケール。
    availableLocalesDeclaredLocales[]intlayer.config.ts で設定されたすべての利用可能なロケールの配列。

    説明

    1. リクエストスコープの解決: intlayer() ミドルウェアによって処理されるアクティブなリクエスト内で、useLocale はリクエストストレージから解決されたロケールを読み取ります。
    2. 安全なフォールバック: 初期化スクリプトやテストスイートなど、リクエストコンテキスト外で呼び出された場合、設定された defaultLocale にフォールバックします。

    関連ドキュメント

    useIntlayervite-intlayer