このページとあなたの好きな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を使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
IntlayerでReact Router v7を翻訳する | 国際化（i18n）
このガイドでは、React Router v7プロジェクトにおいて、ロケール対応ルーティング、TypeScriptサポート、最新の開発手法を活用しながら、Intlayerを使ったシームレスな国際化の統合方法を説明します。
目次
代替手段ではなく Interlayer を使用する理由
「react-i18next」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
React Router を完全にカバー
Intlayer は、ロケール対応ルーティング、ロケール検出用のミドルウェア、およびスケーリング国際化 (i18n) に必要なすべての機能を提供することにより、React Router と完全に連携するように最適化されています。
バンドルサイズ
大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、バンドルとページのサイズを最大 50% 削減するのに役立ちます。
保守性
アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの メンテナンスが容易になります。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は完全に型指定されており、コンテンツの正確性を保証します。
AI エージェント
コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって 必要なコンテキストが削減されます。 Intlayer には、翻訳の欠落をテストする CLI、LSP、MCP などのツール スイートも付属しています。および エージェント スキル により、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:
- 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.
Documentation References
- Intlayer Documentation
- React Router v7 Documentation
- useIntlayer hook
- useLocale hook
- Content Declaration
- Configuration
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.
ルートレイアウトの作成
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)} />;};ローカライズされたルートにナビゲートしたい場合は、
useLocalizedNavigatehook を使用できます：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> );}ミドルウェアを追加
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
TypeScriptの設定
Intlayerはモジュール拡張を使用して、TypeScriptの利点を活かし、コードベースをより強固にします。
TypeScriptの設定に自動生成された型が含まれていることを確認してください。
コードをクリップボードにコピー
{ // ... 既存の設定 include: [ // ... 既存のinclude ".intlayer/**/*.ts", // 自動生成された型を含める ],}Gitの設定
Intlayerによって生成されたファイルは無視することを推奨します。これにより、Gitリポジトリへのコミットを避けることができます。
これを行うには、.gitignoreファイルに以下の指示を追加してください。
コードをクリップボードにコピー
# Intlayerによって生成されたファイルを無視する.intlayerVS Code 拡張機能
Intlayerでの開発体験を向上させるために、公式の Intlayer VS Code 拡張機能 をインストールできます。
この拡張機能は以下を提供します：
- 翻訳キーの 自動補完。
- 翻訳が不足している場合の リアルタイムエラー検出。
- 翻訳内容の インラインプレビュー。
- 翻訳を簡単に作成・更新できる クイックアクション。
拡張機能の使い方の詳細は、Intlayer VS Code 拡張機能のドキュメントを参照してください。
さらに進む
さらに進めるために、ビジュアルエディターを実装するか、CMSを使用してコンテンツを外部化することができます。
ドキュメント参照
この包括的なガイドは、IntlayerをReact Router v7と統合し、ロケール対応のルーティングとTypeScriptサポートを備えた完全に国際化されたアプリケーションを構築するために必要なすべてを提供します。