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

    remix-intlayer パッケージ

    remix-intlayer パッケージは、Intlayer を Remix 3 アプリケーションに統合するためのツールを提供します。リクエストのロケール検出用ミドルウェア、リクエストコンテキストへのアクセス、辞書の取得やロケール管理を行うフックが含まれています。

    インストール

    bash
    npm install remix-intlayer

    パッケージのエクスポート

    ミドルウェア

    エクスポートタイプ説明関連ドキュメント
    intlayerミドルウェア関数リクエストのロケールを検出し、リダイレクトを処理し、リクエストコンテキストを設定する Remix 3 用ミドルウェア。intlayer ミドルウェア

    コンテキストストレージ

    エクスポートタイプ説明関連ドキュメント
    IntlayerRequestContext キー / ストレージRemix 3 のリクエストコンテキスト（context.get(Intlayer)）から Intlayer の状態を取得するために使用するリクエストコンテキストキー。Intlayer コンテキスト

    フック

    エクスポートタイプ説明関連ドキュメント
    useIntlayerフック現在のリクエストロケールに基づいて、キーで指定された辞書コンテンツを取得・解決します。useIntlayer フック
    useDictionaryフックインポート済みの辞書オブジェクトから、現在のロケールに対応するコンテンツを返します。useDictionary フック
    useLocaleフック現在のリクエストロケール、デフォルトロケール、および利用可能なロケール一覧へのアクセスを提供します。useLocale フック

    クイックスタート

    ルーターでのミドルウェア設定

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

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

    コンポーネントおよびビューでのコンテンツ利用

    src/views/home.ts
    import { useIntlayer } from "remix-intlayer";

export const HomeView = () => {
  const content = useIntlayer("home");

  return `<h1>${content.title}</h1><p>${content.description}</p>`;
};
    useLocaleintlayer