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

このガイドでは、React Router v7 プロジェクトでロケール対応ルーティング、TypeScript サポート、および最新の開発プラクティスを使用して、シームレスな国際化のために Intlayer を統合する方法を示します。

設定ベースのルーティング (routes.ts) と ファイルシステムベースのルーティング (@react-router/fs-routes) の両方をカバーしています。

目次

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

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

React Router v7 アプリケーションで Intlayer をセットアップするためのステップバイステップ ガイド

ビデオコード (設定ベース)コード (ファイルシステムルート)デモ (設定ベース)

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

intlayer-react-router-v7.vercel.app

Open embedded page in fullscreen

See the Config-Based Routing Template or File-System Routes Template on GitHub.

1. 1

   依存関係のインストール

   お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします:

   bash

   コンテンツをコピー

   コードをコピー

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

   npx intlayer init --interactive
   

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

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

   bash

   コンテンツをコピー

   コードをコピー

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

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

   • intlayer

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

   • react-intlayer IntlayerをReactアプリケーションと統合するパッケージです。Reactの国際化のためのコンテキストプロバイダーとフックを提供します。

   • vite-intlayer IntlayerをViteバンドラーと統合するためのViteプラグイン、およびユーザーの優先ロケールの検出、Cookieの管理、URLリダイレクトの処理のためのミドルウェアが含まれています。

2. 2

   プロジェクトの設定

   アプリケーションの言語を設定するための 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;
   

   この設定ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクト、Cookie名、コンテンツ宣言の場所と拡張子の設定、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

3. 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 環境変数を定義します。さらに、パフォーマンスを最適化するためのエイリアスを提供します。

4. 4

   React Router v7 ルートを設定する

   Config-based routingFile-system routes

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

   app/routes.ts

   コンテンツをコピー

   コードをコピー

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

   import { layout, route, type RouteConfig } from "@react-router/dev/routes";
   
   export default [
     route("/:locale?", "routes/page.tsx"), // ローカライズされたホームページ
     route("/:locale?/about", "routes/about/page.tsx"), // ローカライズされたアバウトページ
   ] satisfies RouteConfig;
   

   Set up your routing configuration to use file-system based routes with flatRoutes:

   app/routes.ts

   コンテンツをコピー

   コードをコピー

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

   import type { RouteConfig } from "@react-router/dev/routes";
   import { flatRoutes } from "@react-router/fs-routes";
   import { configuration } from "intlayer";
   
   const routes: RouteConfig = flatRoutes({
     // Ignore content declaration files from being treated as routes
     ignoredRouteFiles: configuration.content.fileExtensions.map(
       (fileExtension) => `**/*${fileExtension}`
     ),
   });
   
   export default routes;
   

   The flatRoutes function from @react-router/fs-routes enables file-system based routing, where the file structure in the routes/ directory determines your application's routes. The ignoredRouteFiles option ensures that Intlayer content declaration files (.content.ts, etc.) are not treated as route files.

5. 5

   ルートレイアウトの作成

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

   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>
     );
   }
   

6. 6

   コンテンツ宣言

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

   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}）。

   ファイルシステムベースのルーティングを使用する場合は、app/routes/($locale)._index.content.ts に配置できます。

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

7. 7

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

   ロケール対応ナビゲーション用の 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;
   };
   

8. 8

   ページで Intlayer を使用

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

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

   Config-based routingFile-system routes

   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>
     );
   }
   

   app/routes/($locale)._index.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/($locale)._index";
   
   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 コマンドを使用して、わずか数秒で数千のコンポーネントを変換できます。

9. 9

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

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

   Config-based routingFile-system routes

   app/components/locale-switcher.tsx

   コンテンツをコピー

   コードをコピー

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

   import type { FC } from "react";
   
   import {
     getHTMLTextDir,
     getLocaleName,
     getLocalizedUrl,
     getPathWithoutLocale,
     defaultLocale,
   } from "intlayer";
   import { 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, setLocale } = 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)}
               reloadDocument // Reload the page to apply the new locale
               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={defaultLocale}>
                 {/* 言語を英語で表示 - 例: French */}
                 {getLocaleName(localeItem, defaultLocale)}
               </span>
             </Link>
           </li>
         ))}
       </ol>
     );
   };
   

   app/components/locale-switcher.tsx

   コンテンツをコピー

   コードをコピー

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

   import type { FC } from "react";
   
   import {
     getHTMLTextDir,
     getLocaleName,
     getLocalizedUrl,
     getPathWithoutLocale,
     defaultLocale,
   } from "intlayer";
   import { 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, setLocale } = 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)}
               reloadDocument // Reload the page to apply the new locale
               to={getLocalizedUrl(pathWithoutLocale, localeItem)}
             >
               <span>
                 {/* Locale - e.g. FR */}
                 {localeItem}
               </span>
               <span>
                 {/* Language in its own Locale - e.g. Français */}
                 {getLocaleName(localeItem, locale)}
               </span>
               <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
                 {/* Language in current Locale - e.g. Francés with current locale set to Locales.SPANISH */}
                 {getLocaleName(localeItem)}
               </span>
               <span dir="ltr" lang={defaultLocale}>
                 {/* Language in English - e.g. French */}
                 {getLocaleName(localeItem, defaultLocale)}
               </span>
             </Link>
           </li>
         ))}
       </ol>
     );
   };
   

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

10. 10

    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. 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"),
          },
        }),
      ],
    });
    

12. 12

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

    オプション

    既存の 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;
    

    Extract コマンドBabel コンパイラ

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

    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の設定に自動生成された型が含まれていることを確認してください。

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

Gitの設定

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

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

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

VS Code 拡張機能

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

VS Code Marketplaceからインストール

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

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

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

さらに進む

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

ドキュメント参照

• Intlayer ドキュメント
• React Router v7 ドキュメント
• useIntlayer フック
• useLocale フック
• コンテンツ宣言
• 設定

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

よくある質問