著者:

作成:2025-09-04最終更新:2026-06-23

GitHubでアプリケーションテンプレートを見る

このページにはアプリケーションテンプレートが用意されています。

ショーケースアプリケーションを見る

このページはテンプレートのライブデモにリンクしています。

ビデオチュートリアルを見る

このページにはビデオチュートリアルがあります。

このドキュメントをあなたの好きなAIアシスタントに参照してくださいChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します

バージョン履歴

"Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"
v8.9.02026/5/4
"initコマンドを追加"
v7.5.92025/12/30
"レイアウトの更新と404の処理"
v7.5.62025/12/27
"ドキュメント更新"
v6.1.52025/10/3
"React Router v7対応追加"
v5.8.22025/9/4

このページのコンテンツはAIを使用して翻訳されました。

英語の元のコンテンツの最新バージョンを見る

このドキュメントを編集

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

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

コピー

ドキュメントのMarkdownをクリップボードにコピー

IntlayerでReact Router v7を翻訳する | 国際化（i18n）

Name: Intlayer
Rating: 4.92 (64 reviews)
Author: Intlayer

www.youtube.com

代替手段ではなく Interlayer を使用する理由

「react-i18next」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。

React Router を完全にカバー

Intlayer は、ロケール対応ルーティング、ロケール検出用のミドルウェア、およびスケーリング国際化 (i18n) に必要なすべての機能を提供することにより、React Router と完全に連携するように最適化されています。

バンドルサイズ

大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、バンドルとページのサイズを最大 50% 削減するのに役立ちます。

保守性

アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの メンテナンスが容易になります。コンテンツコードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は完全に型指定されており、コンテンツの正確性を保証します。

AI エージェント

コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって 必要なコンテキストが削減されます。 Intlayer には、翻訳の欠落をテストする CLI、LSP、MCP などのツールスイートも付属しています。および agent skills により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。

オートメーション

AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する コンパイラー と、バックグラウンドでの翻訳を支援する Web プラットフォームも提供します。

パフォーマンス

大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。

非開発によるスケーリング

Intlayer は単なる i18n ソリューションではなく、自己ホスト型ビジュアルエディター と 完全な CMS を提供します。 リアルタイムで多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチームメンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。

VS Code Extension

To improve your development experience with Intlayer, you can install the official Intlayer VS Code Extension.

Install from the VS Code Marketplace

This extension provides:

bash

コードをコピー

コードをクリップボードにコピー

npx intlayer init --interactive

--interactive フラグはオプションです。AI エージェントの場合は intlayer-cli init を使用してください。

このコマンドはあなたの環境を検出し、必要なパッケージをインストールします。例えば：

bash

コードをコピー

コードをクリップボードにコピー

npm install intlayer react-intlayer
npm install vite-intlayer --save-dev

intlayer

設定管理、翻訳、コンテンツ宣言、トランスパイレーション、およびCLIコマンドのための国際化ツールを提供するコアパッケージです。

Autocompletion for translation keys.
Real-time error detection for missing translations.
Inline previews of translated content.
Quick actions to easily create and update translations.

For more details on how to use the extension, refer to the Intlayer VS Code Extension documentation.

</Step>

プロジェクトの設定

Documentation References

www.youtube.com

ide.intlayer.org

intlayer-react-router-v7.vercel.app

アプリケーションの言語を設定するための config ファイルを作成します:

intlayer.config.ts

コードをコピー

コードをクリップボードにコピー

import { type IntlayerConfig, Locales } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    defaultLocale: Locales.ENGLISH,
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 for a fully internationalized application with locale-aware routing and TypeScript support.

3
Integrate Intlayer in Your Vite Configuration

Add the intlayer plugin into your configuration:
vite.config.ts
コードをコピー
コードをクリップボードにコピー
import { reactRouter } from "@react-router/dev/vite"; import { defineConfig } from "vite"; import { intlayer } from "vite-intlayer"; export default defineConfig({ plugins: [reactRouter(), intlayer()], });
intlayer() Vite プラグインは、Intlayer を Vite と統合するために使用されます。コンテンツ宣言ファイルのビルドを確保し、開発モードでそれらを監視します。Vite アプリケーション内で Intlayer 環境変数を定義します。さらに、パフォーマンスを最適化するためのエイリアスを提供します。

React Router v7 ルートを設定する

ロケール対応ルートでルーティング設定を設定します:

app/routes.ts

コードをコピー

コードをクリップボードにコピー

import { layout, route, type RouteConfig } from "@react-router/dev/routes";

export default [
  route("/:lang?", "routes/page.tsx"), // ローカライズされたホームページ
  route("/:lang?/about", "routes/about/page.tsx"), // ローカライズされたアバウトページ
] satisfies RouteConfig;

ルートレイアウトの作成

ルートレイアウトとロケール固有のレイアウトを設定します:

Root Layout

app/root.tsx

コードをコピー

コードをクリップボードにコピー

import { getLocaleFromPath } from "intlayer";
import { IntlayerProvider } from "react-intlayer";
import {
  data,
  Meta,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "react-router";
import type { Route } from "./+types/root";

// ... 変更されていない App、links、ErrorBoundary コード

export async function loader({ request }: Route.LoaderArgs) {
  const locale = getLocaleFromPath(request.url);

  if (!locale) {
    throw data("Language not supported", { status: 404 });
  }

  return { locale };
}

export function Layout({
  children,
}: { children: React.ReactNode } & Route.ComponentProps) {
  const data = useLoaderData<typeof loader>();
  const { locale } = data ?? {};

  return (
    <html lang={locale}>
      <head>
        <meta charSet="utf-8" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <Meta />
        <Links />
      </head>
      <body>
        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

コンテンツ宣言

翻訳を保存するためのコンテンツ宣言を作成し管理します：

app/routes/[lang]/page.content.ts

コードをコピー

コードをクリップボードにコピー

import { t, type Dictionary } from "intlayer";

const pageContent = {
  key: "page",
  content: {
    title: t({
      ja: "React Router v7 + Intlayer へようこそ",
      en: "Welcome to React Router v7 + Intlayer",
      es: "Bienvenido a React Router v7 + Intlayer",
      fr: "Bienvenue sur React Router v7 + Intlayer",
    }),
    description: t({
      ja: "React Router v7 と Intlayer を使用して、多言語アプリケーションを簡単に構築できます。",
      en: "Build multilingual applications with ease using React Router v7 and Intlayer.",
      es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.",
      fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.",
    }),
    aboutLink: t({
      ja: "詳細情報",
      en: "Learn About Us",
      es: "Aprender Sobre Nosotros",
      fr: "En savoir plus sur nous",
    }),
    homeLink: t({
      ja: "ホーム",
      en: "Home",
      es: "Inicio",
      fr: "Accueil",
    }),
  },
} satisfies Dictionary;

export default pageContent;

コンテンツ宣言は、contentDir ディレクトリに含まれている限り、アプリケーション内のどこでも定義できます（デフォルトは ./app）。また、コンテンツ宣言ファイルの拡張子と一致する必要があります（デフォルトは .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}）。

詳細については、コンテンツ宣言ドキュメントを参照してください。

ロケール対応コンポーネントを作成

ロケール対応ナビゲーション用の LocalizedLink コンポーネントを作成します：

app/components/localized-link.tsx

コードをコピー

コードをクリップボードにコピー

import type { FC } from "react";

import { getLocalizedUrl, type LocalesValues } from "intlayer";
import { useLocale } from "react-intlayer";
import { Link, type LinkProps, type To } from "react-router";

const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);

export const locacalizeTo = (to: To, locale: LocalesValues): To => {
  if (typeof to === "string") {
    if (isExternalLink(to)) {
      return to;
    }

    return getLocalizedUrl(to, locale);
  }

  if (isExternalLink(to.pathname ?? "")) {
    return to;
  }

  return {
    ...to,
    pathname: getLocalizedUrl(to.pathname ?? "", locale),
  };
};

export const LocalizedLink: FC<LinkProps> = (props) => {
  const { locale } = useLocale();

  return <Link {...props} to={locacalizeTo(props.to, locale)} />;
};

ローカライズされたルートにナビゲートしたい場合は、useLocalizedNavigate hook を使用できます：

app/hooks/useLocalizedNavigate.ts

コードをコピー

コードをクリップボードにコピー

import { useLocale } from "react-intlayer";
import { type NavigateOptions, type To, useNavigate } from "react-router";

import { locacalizeTo } from "~/components/localized-link";

export const useLocalizedNavigate = () => {
  const navigate = useNavigate();
  const { locale } = useLocale();

  const localizedNavigate = (to: To, options?: NavigateOptions) => {
    const localedTo = locacalizeTo(to, locale);

    navigate(localedTo, options);
  };

  return localizedNavigate;
};

ページで Intlayer を使用

アプリケーション全体でコンテンツ辞書にアクセスします：

ローカライズされたホームページ

app/routes/page.tsx

コードをコピー

コードをクリップボードにコピー

import { getIntlayer, validatePrefix } from "intlayer";
import { useIntlayer } from "react-intlayer";
import { data } from "react-router";

import { LocaleSwitcher } from "~/components/locale-switcher";

import { Navbar } from "~/components/navbar";
import type { Route } from "./+types/page";

export const loader = ({ params }: Route.LoaderArgs) => {
  const { locale } = params;

  const { isValid } = validatePrefix(locale);

  if (!isValid) {
    throw data("Locale not supported", { status: 404 });
  }
};

export const meta: Route.MetaFunction = ({ params }) => {
  const content = getIntlayer("page", params.locale);

  return [
    { title: content.title },
    { content: content.description, name: "description" },
  ];
};

export default function Page() {
  const { title, description, aboutLink } = useIntlayer("page");

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      <nav>
        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
      </nav>
    </div>
  );
}

useIntlayer フックについて詳しく知るには、ドキュメントを参照してください。

既存のアプリケーションがある場合、Intlayer Compiler と extract コマンドを使用して、わずか数秒で数千のコンポーネントを変換できます。

ロケール切り替えコンポーネントの作成

ユーザーが言語を変更できるようにするコンポーネントを作成します:

app/components/locale-switcher.tsx

コードをコピー

コードをクリップボードにコピー

import type { FC } from "react";

import {
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
  getPathWithoutLocale,
} from "intlayer";
import { setLocaleInStorage, useIntlayer, useLocale } from "react-intlayer";
import { Link, useLocation } from "react-router";

export const LocaleSwitcher: FC = () => {
  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
  const { pathname } = useLocation();

  const { availableLocales, locale } = useLocale();

  const pathWithoutLocale = getPathWithoutLocale(pathname);

  return (
    <ol>
      {availableLocales.map((localeItem) => (
        <li key={localeItem}>
          <Link
            aria-current={localeItem === locale ? "page" : undefined}
            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
            onClick={() => setLocale(localeItem)}
            to={getLocalizedUrl(pathWithoutLocale, localeItem)}
          >
            <span>
              {/* ロケール - 例: FR */}
              {localeItem}
            </span>
            <span>
              {/* 言語をそのロケールで表示 - 例: Français */}
              {getLocaleName(localeItem, locale)}
            </span>
            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
              {/* 言語を現在のロケールで表示 - 例: Francés（現在のロケールがLocales.SPANISHの場合） */}
              {getLocaleName(localeItem)}
            </span>
            <span dir="ltr" lang={Locales.ENGLISH}>
              {/* 言語を英語で表示 - 例: French */}
              {getLocaleName(localeItem, Locales.ENGLISH)}
            </span>
          </Link>
        </li>
      ))}
    </ol>
  );
};

useLocale フックについて詳しく知るには、ドキュメントを参照してください。

HTML 属性の管理を追加

HTML の lang および dir 属性を管理するフックを作成します:

app/hooks/useI18nHTMLAttributes.tsx

コードをコピー

コードをクリップボードにコピー

import { getHTMLTextDir } from "intlayer";
import { useEffect } from "react";
import { useLocale } from "react-intlayer";

export const useI18nHTMLAttributes = () => {
  const { locale } = useLocale();

  useEffect(() => {
    document.documentElement.lang = locale;
    document.documentElement.dir = getHTMLTextDir(locale);
  }, [locale]);
};

次に、ルートコンポーネントで使用します:

app/routes/layout.tsx

コードをコピー

コードをクリップボードにコピー

import { Outlet } from "react-router";
import { IntlayerProvider } from "react-intlayer";

import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // フックをインポート

export default function RootLayout() {
  useI18nHTMLAttributes(); // フックを呼び出す

  return (
    <IntlayerProvider>
      <Outlet />
    </IntlayerProvider>
  );
}

11
ミドルウェアを追加

intlayerProxy を使用して、アプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインは、URL に基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザ言語設定に基づいて最も適切なロケールを決定します。ロケールが検出されない場合は、デフォルトロケールにリダイレクトします。

本番環境で intlayerProxy を使用するには、vite-intlayer パッケージを devDependencies から dependencies に切り替える必要があります。

Intlayer v9 以降、intlayerProxy() は intlayer() プラグインに直接含まれており、routing.enableProxy オプション（デフォルトでは true）で有効になっています。下記のように別々に登録することはオプションとなりました — 後方互換性とプラグインの順序を制御する必要がある場合のために保持されています。routing.enableProxy: false に設定してオプトアウトできます。v9 リリースノートを参照してください。
vite.config.ts
コードをコピー
コードをクリップボードにコピー
import { defineConfig } from "vite"; import react from "@vitejs/plugin-react-swc"; import { intlayer } from "vite-intlayer"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ react(), intlayer({ proxy: { ignore: (req) => req.url?.startsWith("/api"), }, }), ], });

コンポーネントのコンテンツを抽出

オプション

既存の codebase を持っている場合、数千のファイルを変換するには時間がかかることがあります。

このプロセスを簡単にするために、Intlayer はcompiler / extractor を提供して、コンポーネントを変換してコンテンツを抽出します。

設定するには、intlayer.config.ts ファイルに compiler セクションを追加できます:

intlayer.config.ts

コードをコピー

コードをクリップボードにコピー

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... 設定の残り
  compiler: {
    /**
     * コンパイラを有効にするかどうかを示します。
     */
    enabled: true,

    /**
     * 出力ファイルパスを定義します
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * 変換後にコンポーネントを保存するかどうかを示します。
     *
     * - `true` の場合、コンパイラはコンポーネントファイルをディスクに上書きします。したがって、変換は永続的になり、コンパイラは次のプロセスで変換をスキップします。このように、コンパイラはアプリを変換でき、その後削除できます。
     *
     * - `false` の場合、コンパイラは `useIntlayer()` 関数呼び出しをビルド出力のコード内にのみ注入し、基本コードベースはそのままにします。変換はメモリ内でのみ実行されます。
     */
    saveComponents: false,

    /**
     * 辞書キープレフィックス
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

エクストラクタを実行してコンポーネントを変換してコンテンツを抽出します

bash

コードをコピー

コードをクリップボードにコピー

npx intlayer extract

v9 以降、intlayerCompiler は intlayer プラグインに含まれています。したがって、手動で追加する必要はありません。

vite.config.ts を更新して intlayerCompiler プラグインを含めます:

vite.config.ts

コードをコピー

コードをクリップボードにコピー

import { defineConfig } from "vite";
import { intlayer, intlayerCompiler } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayer(),
    intlayerCompiler(), // コンパイラプラグインを追加
  ],
});

bash

コードをコピー

コードをクリップボードにコピー

npm run build # または npm run dev

TypeScriptの設定

Intlayerはモジュール拡張を使用して、TypeScriptの利点を活かし、コードベースをより強固にします。

TypeScriptの設定に自動生成された型が含まれていることを確認してください。

tsconfig.json

コードをコピー

コードをクリップボードにコピー

{
  // ... 既存の設定
  include: [
    // ... 既存のinclude
    ".intlayer/**/*.ts", // 自動生成された型を含める
  ],
}

Gitの設定

Intlayerによって生成されたファイルは無視することを推奨します。これにより、Gitリポジトリへのコミットを避けることができます。

これを行うには、.gitignoreファイルに以下の指示を追加してください。

.gitignore

コードをコピー

コードをクリップボードにコピー

# Intlayerによって生成されたファイルを無視する
.intlayer

VS Code 拡張機能

Intlayerでの開発体験を向上させるために、公式の Intlayer VS Code 拡張機能 をインストールできます。

VS Code Marketplaceからインストール

この拡張機能は以下を提供します：

翻訳キーの 自動補完。
翻訳が不足している場合の リアルタイムエラー検出。
翻訳内容の インラインプレビュー。
翻訳を簡単に作成・更新できる クイックアクション。

拡張機能の使い方の詳細は、Intlayer VS Code 拡張機能のドキュメントを参照してください。

さらに進む

さらに進めるために、ビジュアルエディターを実装するか、CMSを使用してコンテンツを外部化することができます。

ドキュメント参照

この包括的なガイドは、IntlayerをReact Router v7と統合し、ロケール対応のルーティングとTypeScriptサポートを備えた完全に国際化されたアプリケーションを構築するために必要なすべてを提供します。

ViteおよびReact React Router v7 (fs-routes)

バージョン履歴

IntlayerでReact Router v7を翻訳する | 国際化（i18n）

目次

代替手段ではなく Interlayer を使用する理由

VS Code Extension

プロジェクトの設定

Documentation References

Integrate Intlayer in Your Vite Configuration

React Router v7 ルートを設定する

ルートレイアウトの作成

Root Layout

コンテンツ宣言

ロケール対応コンポーネントを作成

ページで Intlayer を使用

ローカライズされたホームページ

ロケール切り替えコンポーネントの作成

HTML 属性の管理を追加

ミドルウェアを追加

コンポーネントのコンテンツを抽出

TypeScriptの設定

Gitの設定

VS Code 拡張機能

さらに進む

ドキュメント参照