このガイドでは、React Router v7プロジェクトにおいて、ファイルシステムベースのルーティング（@react-router/fs-routes）を使用して、ロケール対応ルーティング、TypeScriptサポート、最新の開発手法を活用しながら、Intlayerを使ったシームレスな国際化の統合方法を説明します。

クライアントサイドルーティングについては、IntlayerとReact Router v7ガイドを参照してください。

Intlayerとは？

Intlayerは、現代のウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。

Intlayerを使うことで、以下が可能になります：

コンポーネントレベルで宣言的辞書を使い、翻訳を簡単に管理できます。
メタデータ、ルート、コンテンツを動的にローカライズできます。
自動生成される型情報によりTypeScriptサポートを確保し、オートコンプリートやエラー検出を向上させます。
動的なロケール検出や切り替えなどの高度な機能を活用できます。
React Router v7のファイルシステムベースのルーティングシステムを使って、ロケール対応ルーティングを有効化します。

ファイルシステムベースのルートを使用したReact Router v7アプリケーションでIntlayerを設定するためのステップバイステップガイド

www.youtube.com

See Application Template on GitHub.

ステップ1: 依存パッケージのインストール

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

bash

コードをコピー

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

npm install intlayer react-intlayernpm install vite-intlayer --save-devnpm install @react-router/fs-routes --save-devnpx intlayer init

intlayer
intlayer
設定管理、翻訳、コンテンツ宣言、トランスパイル、およびCLIコマンドのための国際化ツールを提供するコアパッケージ。
react-intlayer
IntlayerをReactアプリケーションと統合するパッケージです。Reactの国際化のためのコンテキストプロバイダーとフックを提供します。
vite-intlayer IntlayerをViteバンドラーと統合するためのViteプラグイン、およびユーザーの優先ロケール検出、クッキー管理、URLリダイレクト処理のためのミドルウェアを含みます。
@react-router/fs-routes React Router v7のファイルシステムベースのルーティングを有効にするパッケージ。

ステップ 2: プロジェクトの設定

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

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、ミドルウェアのリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

ステップ3: Vite設定にIntlayerを統合する

設定にintlayerプラグインを追加します：

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: React Router v7のファイルシステムルートを設定する

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({  // コンテンツ宣言ファイルをルートとして扱わないように無視する  ignoredRouteFiles: configuration.content.fileExtensions.map(    (fileExtension) => `**/*${fileExtension}`  ),});export default routes;

@react-router/fs-routesのflatRoutes関数は、routes/ディレクトリ内のファイル構造がアプリケーションのルートを決定するファイルシステムベースのルーティングを有効にします。ignoredRouteFilesオプションは、Intlayerコンテンツ宣言ファイル（.content.tsなど）がルートファイルとして扱われないようにします。

ステップ5: ファイルシステム規則でルートファイルを作成する

ファイルシステムルーティングでは、ドット（.）がパスセグメントを表し、括弧()がオプションセグメントを示すフラットな命名規則を使用します。

app/routes/ディレクトリに次のファイルを作成します：

ファイル構造

bash

コードをコピー

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

app/├── root.tsx                         # ロケールルートのレイアウトラッパー└──routes/    ├── ($locale)._index.tsx         # ホームページ (/, /es, など)    ├── ($locale)._index.content.ts  # ホームページのコンテンツ    ├── ($locale).about.tsx          # アバウトページ (/about, /es/about, など)    └── ($locale).about.content.ts   # アバウトページのコンテンツ

命名規則：

($locale) - ロケールパラメータのオプションの動的セグメント
_layout - 子ルートをラップするレイアウトルート
_index - インデックスルート（親パスでレンダリングされる）
.（ドット） - パスセグメントを区切る（例：($locale).about → /:locale?/about）

レイアウトコンポーネント

app/root.tsx

コードをコピー

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

import { getLocaleFromPath } from "intlayer";import { IntlayerProvider } from "react-intlayer";import {  isRouteErrorResponse,  Meta,  Outlet,  Scripts,  ScrollRestoration,  useLoaderData,} from "react-router";import type { Route } from "./+types/root";import "./app.css";// links and ErrorBoundary codeexport async function loader({ request }: Route.LoaderArgs) {  const locale = getLocaleFromPath(request.url);  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/($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>  );}

アバウトページ

app/routes/($locale).about.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).about";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("about", params.locale);  return [    { title: content.title },    { content: content.description, name: "description" },  ];};export default function AboutPage() {  const { title, content, homeLink } = useIntlayer("about");  return (    <div>      <h1>{title}</h1>      <p>{content}</p>      <nav>        <LocalizedLink to="/">{homeLink}</LocalizedLink>      </nav>    </div>  );}

ステップ 6: コンテンツを宣言する

翻訳を格納するためのコンテンツ宣言を作成および管理します。コンテンツファイルをルートファイルの横に配置します：

app/routes/($locale)._index.content.ts

コードをコピー

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

import { t, type Dictionary } from "intlayer";const pageContent = {  key: "page",  content: {    title: t({      en: "Welcome to React Router v7 + Intlayer",      es: "Bienvenido a React Router v7 + Intlayer",      fr: "Bienvenue sur React Router v7 + Intlayer",    }),    description: t({      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({      en: "Learn About Us",      es: "Aprender Sobre Nosotros",      fr: "En savoir plus sur nous",    }),  },} satisfies Dictionary;export default pageContent;

app/routes/($locale).about.content.ts

コードをコピー

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

import { t, type Dictionary } from "intlayer";const aboutContent = {  key: "about",  content: {    title: t({      en: "About Us",      es: "Sobre Nosotros",      fr: "À propos de nous",    }),    content: t({      en: "This is the about page content.",      es: "Este es el contenido de la página de información.",      fr: "Ceci est le contenu de la page à propos.",    }),    homeLink: t({      en: "Home",      es: "Inicio",      fr: "Accueil",    }),  },} satisfies Dictionary;export default aboutContent;

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

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

アプリケーションが既に存在する場合は、Intlayer コンパイラと抽出コマンドを組み合わせて、1 秒で何千ものコンポーネントを変換できます。

ステップ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);// 指定されたURLをロケールに応じてローカライズする関数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 フックを使用できます。

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：ロケールスイッチャーコンポーネントを作成する

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

app/components/locale-switcher.tsx

コードをコピー

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

import type { FC } from "react";import {  getHTMLTextDir,  getLocaleName,  getLocalizedUrl,  getPathWithoutLocale,  Locales,} 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 } = 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)}`}            reloadDocument // 新しいロケールを適用するためにページを再読み込み            to={getLocalizedUrl(pathWithoutLocale, localeItem)}          >            <span>              {/* ロケール - 例: FR */}              {localeItem}            </span>            <span>              {/* 自身のロケールでの言語名 - 例: Français */}              {getLocaleName(localeItem, locale)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* 現在のロケールでの言語名 - 例: 現在のロケールがLocales.SPANISHの場合のFrancés */}              {getLocaleName(localeItem)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* 英語での言語名 - 例: French */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>          </Link>        </li>      ))}    </ol>  );};

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

ステップ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]);};

このフックは、ステップ5で示したレイアウトコンポーネント（root.tsx）で既に使用されています。

(オプション) ステップ 1 : コンポーネントのコンテンツを抽出する

既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。

このプロセスを容易にするために、Intlayerは、コンポーネントを変換しコンテンツを抽出するためのコンパイラ / エクストラクタを提案しています。

セットアップするには、intlayer.config.ts ファイルに compiler セクションを追加します。

intlayer.config.ts

コードをコピー

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

import { type IntlayerConfig } from "intlayer";

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

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

    /**
     * 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
     */
    saveComponents: false,

    /**
     * 辞書キーの接頭辞
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

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

bash

コードをコピー

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

npx intlayer extract

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

Configure TypeScript

Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.

Ensure your TypeScript configuration includes the autogenerated types:

tsconfig.json

コードをコピー

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

{  // ... your existing configurations  include: [    // ... your existing includes    ".intlayer/**/*.ts", // Include the auto-generated types  ],}

Git Configuration

It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.

To do this, you can add the following instructions to your .gitignore file:

.gitignore

コードをコピー

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

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

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:

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.

Go Further

To go further, you can implement the visual editor or externalize your content using the CMS.

Documentation References

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

ステップ10: ミドルウェアを追加する（オプション）

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

intlayerProxy を本番環境で使用するには、vite-intlayer パッケージを devDependencies から dependencies に切り替える必要があることに注意してください。

vite.config.ts

コードをコピー

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

import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    reactRouter(),    intlayer(),  ],});

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サポートを備えた完全に国際化されたアプリケーションを構築するために必要なすべてを提供します。

React Router v7

Compiler

作成:2025-12-07最終更新:2026-05-06

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
"初期履歴"
v7.3.42025/12/8

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

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

このドキュメントを編集

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

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

コピー

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

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

クライアントサイドルーティングについては、IntlayerとReact Router v7ガイドを参照してください。

Intlayerとは？

Intlayerを使うことで、以下が可能になります：

コンポーネントレベルで宣言的辞書を使い、翻訳を簡単に管理できます。
メタデータ、ルート、コンテンツを動的にローカライズできます。
自動生成される型情報によりTypeScriptサポートを確保し、オートコンプリートやエラー検出を向上させます。
動的なロケール検出や切り替えなどの高度な機能を活用できます。
React Router v7のファイルシステムベースのルーティングシステムを使って、ロケール対応ルーティングを有効化します。

ファイルシステムベースのルートを使用したReact Router v7アプリケーションでIntlayerを設定するためのステップバイステップガイド

www.youtube.com

See Application Template on GitHub.

ステップ1: 依存パッケージのインストール

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

bash

コードをコピー

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

npm install intlayer react-intlayernpm install vite-intlayer --save-devnpm install @react-router/fs-routes --save-devnpx intlayer init

npm install intlayer react-intlayernpm install vite-intlayer --save-devnpm install @react-router/fs-routes --save-devnpx intlayer init

intlayer
intlayer
設定管理、翻訳、コンテンツ宣言、トランスパイル、およびCLIコマンドのための国際化ツールを提供するコアパッケージ。
react-intlayer
IntlayerをReactアプリケーションと統合するパッケージです。Reactの国際化のためのコンテキストプロバイダーとフックを提供します。
vite-intlayer IntlayerをViteバンドラーと統合するためのViteプラグイン、およびユーザーの優先ロケール検出、クッキー管理、URLリダイレクト処理のためのミドルウェアを含みます。
@react-router/fs-routes React Router v7のファイルシステムベースのルーティングを有効にするパッケージ。

ステップ 2: プロジェクトの設定

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

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、ミドルウェアのリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

ステップ3: Vite設定にIntlayerを統合する

設定にintlayerプラグインを追加します：

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

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: React Router v7のファイルシステムルートを設定する

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({  // コンテンツ宣言ファイルをルートとして扱わないように無視する  ignoredRouteFiles: configuration.content.fileExtensions.map(    (fileExtension) => `**/*${fileExtension}`  ),});export default routes;

import type { RouteConfig } from "@react-router/dev/routes";import { flatRoutes } from "@react-router/fs-routes";import { configuration } from "intlayer";const routes: RouteConfig = flatRoutes({  // コンテンツ宣言ファイルをルートとして扱わないように無視する  ignoredRouteFiles: configuration.content.fileExtensions.map(    (fileExtension) => `**/*${fileExtension}`  ),});export default routes;

@react-router/fs-routesのflatRoutes関数は、routes/ディレクトリ内のファイル構造がアプリケーションのルートを決定するファイルシステムベースのルーティングを有効にします。ignoredRouteFilesオプションは、Intlayerコンテンツ宣言ファイル（.content.tsなど）がルートファイルとして扱われないようにします。

ステップ5: ファイルシステム規則でルートファイルを作成する

app/routes/ディレクトリに次のファイルを作成します：

ファイル構造

bash

コードをコピー

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

app/├── root.tsx                         # ロケールルートのレイアウトラッパー└──routes/    ├── ($locale)._index.tsx         # ホームページ (/, /es, など)    ├── ($locale)._index.content.ts  # ホームページのコンテンツ    ├── ($locale).about.tsx          # アバウトページ (/about, /es/about, など)    └── ($locale).about.content.ts   # アバウトページのコンテンツ

app/├── root.tsx                         # ロケールルートのレイアウトラッパー└──routes/    ├── ($locale)._index.tsx         # ホームページ (/, /es, など)    ├── ($locale)._index.content.ts  # ホームページのコンテンツ    ├── ($locale).about.tsx          # アバウトページ (/about, /es/about, など)    └── ($locale).about.content.ts   # アバウトページのコンテンツ

命名規則：

($locale) - ロケールパラメータのオプションの動的セグメント
_layout - 子ルートをラップするレイアウトルート
_index - インデックスルート（親パスでレンダリングされる）
.（ドット） - パスセグメントを区切る（例：($locale).about → /:locale?/about）

レイアウトコンポーネント

app/root.tsx

コードをコピー

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

import { getLocaleFromPath } from "intlayer";import { IntlayerProvider } from "react-intlayer";import {  isRouteErrorResponse,  Meta,  Outlet,  Scripts,  ScrollRestoration,  useLoaderData,} from "react-router";import type { Route } from "./+types/root";import "./app.css";// links and ErrorBoundary codeexport async function loader({ request }: Route.LoaderArgs) {  const locale = getLocaleFromPath(request.url);  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>  );}

import { getLocaleFromPath } from "intlayer";import { IntlayerProvider } from "react-intlayer";import {  isRouteErrorResponse,  Meta,  Outlet,  Scripts,  ScrollRestoration,  useLoaderData,} from "react-router";import type { Route } from "./+types/root";import "./app.css";// links and ErrorBoundary codeexport async function loader({ request }: Route.LoaderArgs) {  const locale = getLocaleFromPath(request.url);  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/($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>  );}

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

アバウトページ

app/routes/($locale).about.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).about";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("about", params.locale);  return [    { title: content.title },    { content: content.description, name: "description" },  ];};export default function AboutPage() {  const { title, content, homeLink } = useIntlayer("about");  return (    <div>      <h1>{title}</h1>      <p>{content}</p>      <nav>        <LocalizedLink to="/">{homeLink}</LocalizedLink>      </nav>    </div>  );}

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).about";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("about", params.locale);  return [    { title: content.title },    { content: content.description, name: "description" },  ];};export default function AboutPage() {  const { title, content, homeLink } = useIntlayer("about");  return (    <div>      <h1>{title}</h1>      <p>{content}</p>      <nav>        <LocalizedLink to="/">{homeLink}</LocalizedLink>      </nav>    </div>  );}

ステップ 6: コンテンツを宣言する

翻訳を格納するためのコンテンツ宣言を作成および管理します。コンテンツファイルをルートファイルの横に配置します：

app/routes/($locale)._index.content.ts

コードをコピー

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

import { t, type Dictionary } from "intlayer";const pageContent = {  key: "page",  content: {    title: t({      en: "Welcome to React Router v7 + Intlayer",      es: "Bienvenido a React Router v7 + Intlayer",      fr: "Bienvenue sur React Router v7 + Intlayer",    }),    description: t({      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({      en: "Learn About Us",      es: "Aprender Sobre Nosotros",      fr: "En savoir plus sur nous",    }),  },} satisfies Dictionary;export default pageContent;

import { t, type Dictionary } from "intlayer";const pageContent = {  key: "page",  content: {    title: t({      en: "Welcome to React Router v7 + Intlayer",      es: "Bienvenido a React Router v7 + Intlayer",      fr: "Bienvenue sur React Router v7 + Intlayer",    }),    description: t({      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({      en: "Learn About Us",      es: "Aprender Sobre Nosotros",      fr: "En savoir plus sur nous",    }),  },} satisfies Dictionary;export default pageContent;

app/routes/($locale).about.content.ts

コードをコピー

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

import { t, type Dictionary } from "intlayer";const aboutContent = {  key: "about",  content: {    title: t({      en: "About Us",      es: "Sobre Nosotros",      fr: "À propos de nous",    }),    content: t({      en: "This is the about page content.",      es: "Este es el contenido de la página de información.",      fr: "Ceci est le contenu de la page à propos.",    }),    homeLink: t({      en: "Home",      es: "Inicio",      fr: "Accueil",    }),  },} satisfies Dictionary;export default aboutContent;

import { t, type Dictionary } from "intlayer";const aboutContent = {  key: "about",  content: {    title: t({      en: "About Us",      es: "Sobre Nosotros",      fr: "À propos de nous",    }),    content: t({      en: "This is the about page content.",      es: "Este es el contenido de la página de información.",      fr: "Ceci est le contenu de la page à propos.",    }),    homeLink: t({      en: "Home",      es: "Inicio",      fr: "Accueil",    }),  },} satisfies Dictionary;export default aboutContent;

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

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

アプリケーションが既に存在する場合は、Intlayer コンパイラと抽出コマンドを組み合わせて、1 秒で何千ものコンポーネントを変換できます。

ステップ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);// 指定されたURLをロケールに応じてローカライズする関数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)} />;};

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);// 指定されたURLをロケールに応じてローカライズする関数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 フックを使用できます。

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

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：ロケールスイッチャーコンポーネントを作成する

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

app/components/locale-switcher.tsx

コードをコピー

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

import type { FC } from "react";import {  getHTMLTextDir,  getLocaleName,  getLocalizedUrl,  getPathWithoutLocale,  Locales,} 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 } = 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)}`}            reloadDocument // 新しいロケールを適用するためにページを再読み込み            to={getLocalizedUrl(pathWithoutLocale, localeItem)}          >            <span>              {/* ロケール - 例: FR */}              {localeItem}            </span>            <span>              {/* 自身のロケールでの言語名 - 例: Français */}              {getLocaleName(localeItem, locale)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* 現在のロケールでの言語名 - 例: 現在のロケールがLocales.SPANISHの場合のFrancés */}              {getLocaleName(localeItem)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* 英語での言語名 - 例: French */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>          </Link>        </li>      ))}    </ol>  );};

import type { FC } from "react";import {  getHTMLTextDir,  getLocaleName,  getLocalizedUrl,  getPathWithoutLocale,  Locales,} 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 } = 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)}`}            reloadDocument // 新しいロケールを適用するためにページを再読み込み            to={getLocalizedUrl(pathWithoutLocale, localeItem)}          >            <span>              {/* ロケール - 例: FR */}              {localeItem}            </span>            <span>              {/* 自身のロケールでの言語名 - 例: Français */}              {getLocaleName(localeItem, locale)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* 現在のロケールでの言語名 - 例: 現在のロケールがLocales.SPANISHの場合のFrancés */}              {getLocaleName(localeItem)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* 英語での言語名 - 例: French */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>          </Link>        </li>      ))}    </ol>  );};

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

ステップ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]);};

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

このフックは、ステップ5で示したレイアウトコンポーネント（root.tsx）で既に使用されています。

(オプション) ステップ 1 : コンポーネントのコンテンツを抽出する

既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。

セットアップするには、intlayer.config.ts ファイルに compiler セクションを追加します。

intlayer.config.ts

コードをコピー

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

import { type IntlayerConfig } from "intlayer";

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

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

    /**
     * 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
     */
    saveComponents: false,

    /**
     * 辞書キーの接頭辞
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

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

bash

コードをコピー

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

npx intlayer extract

npx intlayer extract

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

vite.config.ts

コードをコピー

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

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // コンパイラプラグインを追加します ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // コンパイラプラグインを追加します ],});

bash

コードをコピー

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

npm run build # または npm run dev

npm run build # または npm run dev

Configure TypeScript

Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.

Ensure your TypeScript configuration includes the autogenerated types:

tsconfig.json

コードをコピー

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

{  // ... your existing configurations  include: [    // ... your existing includes    ".intlayer/**/*.ts", // Include the auto-generated types  ],}

{  // ... your existing configurations  include: [    // ... your existing includes    ".intlayer/**/*.ts", // Include the auto-generated types  ],}

Git Configuration

It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.

To do this, you can add the following instructions to your .gitignore file:

.gitignore

コードをコピー

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

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

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

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:

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.

Go Further

To go further, you can implement the visual editor or externalize your content using the CMS.

Documentation References

ステップ10: ミドルウェアを追加する（オプション）

intlayerProxy を本番環境で使用するには、vite-intlayer パッケージを devDependencies から dependencies に切り替える必要があることに注意してください。

vite.config.ts

コードをコピー

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

import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    reactRouter(),    intlayer(),  ],});

import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    reactRouter(),    intlayer(),  ],});

TypeScriptの設定

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

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

tsconfig.json

コードをコピー

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

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

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

Gitの設定

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

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

.gitignore

コードをコピー

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

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

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

VS Code 拡張機能

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

VS Code Marketplaceからインストール

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

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

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

さらに進む

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

ドキュメント参照

React Router v7

Compiler

バージョン履歴

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

目次

Intlayerとは？

ファイルシステムベースのルートを使用したReact Router v7アプリケーションでIntlayerを設定するためのステップバイステップガイド

ステップ1: 依存パッケージのインストール

ステップ 2: プロジェクトの設定

ステップ3: Vite設定にIntlayerを統合する

ステップ4: React Router v7のファイルシステムルートを設定する

ステップ5: ファイルシステム規則でルートファイルを作成する

ファイル構造

レイアウトコンポーネント

インデックスページ

アバウトページ

ステップ 6: コンテンツを宣言する

ステップ7: ロケール対応コンポーネントの作成

ステップ8：ロケールスイッチャーコンポーネントを作成する

ステップ10: HTML属性の管理を追加（オプション）

(オプション) ステップ 1 : コンポーネントのコンテンツを抽出する

Configure TypeScript

Git Configuration

VS Code Extension

Go Further

Documentation References

ステップ10: ミドルウェアを追加する（オプション）

TypeScriptの設定

Gitの設定

VS Code 拡張機能

さらに進む

ドキュメント参照

バージョン履歴

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

目次

Intlayerとは？

ファイルシステムベースのルートを使用したReact Router v7アプリケーションでIntlayerを設定するためのステップバイステップガイド

ステップ1: 依存パッケージのインストール

ステップ 2: プロジェクトの設定

ステップ3: Vite設定にIntlayerを統合する

ステップ4: React Router v7のファイルシステムルートを設定する

ステップ5: ファイルシステム規則でルートファイルを作成する

ファイル構造

レイアウトコンポーネント

インデックスページ

アバウトページ

ステップ 6: コンテンツを宣言する

ステップ7: ロケール対応コンポーネントの作成

ステップ8：ロケールスイッチャーコンポーネントを作成する

ステップ10: HTML属性の管理を追加（オプション）

(オプション) ステップ 1 : コンポーネントのコンテンツを抽出する

Configure TypeScript

Git Configuration

VS Code Extension

Go Further

Documentation References

ステップ10: ミドルウェアを追加する（オプション）

TypeScriptの設定

Gitの設定

VS Code 拡張機能

さらに進む

ドキュメント参照