著者:
    作成:2026-01-21最終更新:2026-01-21

    next-intlayer パッケージ

    next-intlayer パッケージは、Intlayer を Next.js アプリケーションに統合するための必要なツールを提供します。App Router と Page Router の両方をサポートし、ロケールベースのルーティング用ミドルウェアも含まれます。

    インストール

    bash
    npm install next-intlayer
    

    エクスポート

    ミドルウェア

    インポート:

    tsx
    import "next-intlayer/middleware";
    
    関数説明関連ドキュメント
    intlayerMiddlewareNext.js のミドルウェアで、ロケールに基づくルーティングとリダイレクトを処理します。ヘッダーやクッキーからロケールを検出し、適切なロケールパスへリダイレクトします。intlayerMiddleware

    設定ヘルパー

    インポート:

    tsx
    import "next-intlayer/server";
    
    関数説明関連ドキュメント
    withIntlayerIntlayer の辞書をビルド前に準備することを保証しながら、Next.js の設定をラップする非同期ヘルパー。コンテンツファイルを準備し、webpack/SWC プラグインを設定します。-
    withIntlayerSync非同期が使用できない/望ましくない設定に最適な、Next.js の設定をラップする同期ヘルパー。サーバー起動時に辞書を準備しません。-

    プロバイダー

    インポート:

    tsx
    import "next-intlayer";
    

    または

    tsx
    import "next-intlayer/server";
    
    コンポーネント説明関連ドキュメント
    IntlayerClientProviderNext.js App Router のクライアント側コンポーネント用プロバイダー。react-intlayerIntlayerProvider をラップします。-
    IntlayerServerProviderNext.js(App Router)のサーバー側コンポーネント用プロバイダー。サーバー上でロケールコンテキストを提供します。-
    IntlayerServerApp Router における Intlayer コンテンツのサーバー側ラッパー。サーバーコンポーネントでの適切なロケール処理を保証します。-

    フック(クライアント側)

    インポート:

    tsx
    import "next-intlayer";
    

    react-intlayer からほとんどのフックを再エクスポートします。

    フック説明関連ドキュメント
    useIntlayerキーで辞書を選択してその内容を返すクライアントサイドのフック。ロケールが指定されていない場合はコンテキストからlocaleを使用します。useIntlayer
    useDictionary辞書オブジェクトを変換し、現在のlocale向けの内容を返すフック。t()翻訳、列挙(enumerations)などを処理します。useDictionary
    useDictionaryAsync非同期辞書を扱うフック。Promiseベースの辞書マップを受け取り、現在のロケール向けに解決します。-
    useDictionaryDynamicキーで読み込まれる動的辞書を扱うフック。読み込み状態のために内部で React Suspense を使用します。-
    useLocale現在のロケールを取得し、それを設定する関数を返すクライアントサイドフック。Next.js App Router 向けにナビゲーション対応で拡張されています。useLocale
    usePathnameロケールプレフィックスとロケールパラメータを取り除いたクエリパラメータを含まない現在のパス名を返します。usePathname
    useRewriteURLURL のリライトを管理するクライアントサイドフック。より見栄えの良いローカライズされたリライトルールが存在する場合に自動で URL を更新します。useRewriteURL
    useLocalePageRouterNext.js の Page Router 用のロケール管理フック。ロケール変更時のリダイレクトやページ再読み込みを処理します。-
    useI18nキーでネストされたコンテンツにアクセスするための翻訳関数 t() を提供するフック。i18next/next-intl のパターンに似ています。useI18n
    useIntlロケールにバインドされた Intl オブジェクトを提供するフック。現在のロケールを自動的に注入し、最適化されたキャッシュを使用します。-
    useLoadDynamicReact Suspense を使用して動的な辞書を読み込むフック。キーと Promise を受け取り、結果をキャッシュします。-

    関数(サーバーサイド)

    インポート:

    tsx
    import "next-intlayer/server";
    
    関数説明関連ドキュメント
    tNext.js App Router向けのサーバーサイド版の翻訳関数。サーバーロケールに対する多言語コンテンツの翻訳を返します。translation
    getLocaleNext.jsのヘッダーとクッキーから現在のロケールを抽出するヘルパー関数。Server Components、Server Actions、Route Handlers向けに設計されています。-
    generateStaticParams設定されたロケールに基づいて Next.js の動的ルートのための静的パラメータを生成します。プリレンダリング用のロケールオブジェクトの配列を返します。-
    localeサーバーコンテキスト(App Router)でロケールを取得または設定する関数。サーバーコンポーネントでのロケール管理を提供します。-

    Import:

    tsx
    import "next-intlayer";
    
    説明
    NextPageIntlayerIntlayerサポート付きNext.jsのページ向けの型。localeパラメータを含むジェネリック型。
    Next14PageIntlayerIntlayerサポート付きNext.js 14のページ向けの型。
    Next15PageIntlayerIntlayerサポート付きNext.js 15のページ向けの型。
    NextLayoutIntlayerIntlayerサポート付きNext.jsのレイアウト向けの型。localeパラメータを含むジェネリック型。
    Next14LayoutIntlayerIntlayer をサポートする Next.js 14 のレイアウト用の型。
    Next15LayoutIntlayerIntlayer をサポートする Next.js 15 のレイアウト用の型。
    LocalParamsロケールを含む Next.js のルートパラメータ用の型。locale プロパティを持つオブジェクト。
    LocalPromiseParamsロケールを含む Next.js のルートパラメータ用の型(非同期版)。locale プロパティを持つオブジェクトに解決する Promise。