@intlayer/docs 5.8.1 → 6.0.0-canary.0

package/docs/ja/intlayer_with_tanstack.md

@@ -1,457 +1,621 @@
 ---
-createdAt: 2025-08-11
-updatedAt: 2025-08-11
-title: TanStack Start（React）でのIntlayerの使い始め
-description: Intlayerを使ってTanStack Startアプリにi18nを追加する-コンポーネントレベルの辞書、ローカライズされたURL、SEOに適したメタデータ。
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Tanstack StartでのIntlayerによる国際化（i18n）入門
+description: Intlayerを使用してTanstack Startアプリケーションに国際化（i18n）を追加する方法を学びます。ロケール対応ルーティングで多言語対応アプリを作成するための包括的なガイドです。
 keywords:
   - 国際化
   - ドキュメント
   - Intlayer
-  - TanStack Start
-  - TanStack Router
+  - Tanstack Start
   - React
   - i18n
-  - JavaScript
+  - TypeScript
+  - ロケールルーティング
 slugs:
   - doc
   - environment
+  - vite-and-react
   - tanstack-start
+applicationTemplate: https://github.com/AydinTheFirst/tanstack-start-intlayer
+author: AydinTheFirst
 ---
 
-# IntlayerとTanStack Start（React）で始める国際化（i18n）
+# IntlayerとTanstack Startによる国際化（i18n）入門
+
+このガイドでは、Tanstack Startプロジェクトにおいて、ロケール対応ルーティング、TypeScriptサポート、最新の開発手法を活用しながら、**Intlayer**を統合してシームレスな国際化を実現する方法を示します。
 
 ## Intlayerとは？
 
-**Intlayer**はReactアプリ向けのオープンソースのi18nツールキットです。以下を提供します：
+**Intlayer**は、最新のウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。
 
-- **TypeScriptの安全性を備えたコンポーネントローカル辞書**。
-- **動的なメタデータとルート**（SEO対応）。
-- **ランタイムでのロケール切り替え**（ロケール検出・保持のためのヘルパー付き）。
-- **Viteプラグイン**（ビルド時の変換と開発者体験向上のため）。
+Intlayerを使うことで、以下が可能になります：
 
-このガイドでは、**TanStack Start**プロジェクト（内部でViteを使用し、ルーティング/SSRにTanStack Routerを使っている）にIntlayerを組み込む方法を説明します。
+- **コンポーネントレベルで宣言的な辞書を使い、翻訳を簡単に管理**できます。
+- **メタデータ、ルート、コンテンツを動的にローカライズ**できます。
+- **自動生成される型によりTypeScriptサポートを確保し、オートコンプリートやエラー検出を向上**させます。
+- **動的なロケール検出や切り替えなどの高度な機能**を活用できます。
+- **Tanstack Startのファイルベースのルーティングシステムを使ってロケール対応ルーティングを有効化**します。
 
 ---
 
-## ステップ1：依存関係のインストール
+## Tanstack StartアプリケーションでIntlayerをセットアップするステップバイステップガイド
 
-```bash
-# npm
-npm i intlayer react-intlayer
-npm i -D vite-intlayer
+### ステップ1：プロジェクトの作成
 
-# pnpm
-pnpm add intlayer react-intlayer
-pnpm add -D vite-intlayer
+TanStack Startの公式サイトにある[新しいプロジェクトの開始](https://tanstack.com/start/latest/docs/framework/react/quick-start)ガイドに従って、新しいTanStack Startプロジェクトを作成します。
+
+### ステップ2：Intlayerパッケージのインストール
 
-# yarn
-yarn add intlayer react-intlayer
-yarn add -D vite-intlayer
+お好みのパッケージマネージャーを使って必要なパッケージをインストールします：
+
+```bash packageManager="npm"
+npm install intlayer react-intlayer
+npm install vite-intlayer --save-dev
 ```
 
-- **intlayer**：コア（設定、辞書、CLI/変換）。
-- **react-intlayer**：React用の`<IntlayerProvider>`とフック。
-- **vite-intlayer**：Viteプラグイン、加えてロケール検出/リダイレクト用のオプションミドルウェア（開発環境とSSR/プレビューで動作。プロダクションSSRでは`dependencies`に移動）。
+```bash packageManager="pnpm"
+pnpm add intlayer react-intlayer
+pnpm add vite-intlayer --save-dev
+```
 
----
+- **intlayer**
+
+コアパッケージであり、設定管理、翻訳、[コンテンツ宣言](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/get_started.md)、トランスパイル、および[CLIコマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_cli.md)のための国際化ツールを提供します。
+
+- **react-intlayer**  
+  IntlayerをReactアプリケーションと統合するパッケージです。Reactの国際化のためのコンテキストプロバイダーやフックを提供します。
 
-## ステップ2：Intlayerの設定
+- **vite-intlayer**  
+  Intlayerを[Viteバンドラー](https://vite.dev/guide/why.html#why-bundle-for-production)と統合するためのViteプラグインを含み、ユーザーの優先ロケール検出、クッキー管理、URLリダイレクト処理のためのミドルウェアも提供します。
 
-プロジェクトのルートに `intlayer.config.ts` を作成します：
+### ステップ3: プロジェクトの設定
 
-```ts fileName="intlayer.config.ts"
-import { Locales, type IntlayerConfig } from "intlayer";
+アプリケーションの言語を設定するための設定ファイルを作成します：
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+import { Locales } from "intlayer";
 
 const config: IntlayerConfig = {
   internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
+    defaultLocale: Locales.ENGLISH, // デフォルトのロケール
+    locales: [
+      Locales.ENGLISH, // 英語
+      Locales.FRENCH, // フランス語
+      Locales.SPANISH, // スペイン語
+      // 他のロケールを追加
+    ],
   },
-  // contentDir、contentFileExtensions、middlewareオプションなども調整可能です。
 };
 
 export default config;
 ```
 
-CommonJS/ESMのバリアントは、`cjs`/`mjs`を好む場合でも元のドキュメントと同じです。
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    defaultLocale: Locales.ENGLISH, // デフォルトのロケール
+    locales: [
+      Locales.ENGLISH, // 英語
+      Locales.FRENCH, // フランス語
+      Locales.SPANISH, // スペイン語
+      // 他のロケール
+    ],
+  },
+};
 
-> 完全な設定リファレンスは、Intlayerの設定ドキュメントをご覧ください。
+export default config;
+```
 
----
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
 
-## ステップ3：Viteプラグイン（およびオプションのミドルウェア）を追加
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    defaultLocale: Locales.ENGLISH,
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // 他のロケール
+    ],
+  },
+};
+
+module.exports = config;
+```
 
-**TanStack StartはViteを使用しているため**、`vite.config.ts` にIntlayerのプラグインを追加します：
+> この設定ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-```ts fileName="vite.config.ts"
+### ステップ4: Vite設定にIntlayerを統合する
+
+設定にintlayerプラグインを追加します：
+
+```typescript fileName="vite.config.ts" codeFormat="typescript"
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayerMiddlewarePlugin, intlayerPlugin } from "vite-intlayer";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
-    react(),
+    reactRouter(),
+    tsconfigPaths(),
     intlayerPlugin(),
-    // ロケール検出、クッキー、リダイレクトのためにオプションだが推奨：
-    intLayerMiddlewarePlugin(),
+    intlayerMiddlewarePlugin(),
   ],
 });
 ```
 
-> SSRをデプロイする場合は、`vite-intlayer`を`dependencies`に移動して、ミドルウェアが本番環境で動作するようにしてください。
+> `intlayerPlugin()` Viteプラグインは、IntlayerをViteに統合するために使用されます。これにより、コンテンツ宣言ファイルのビルドが保証され、開発モードでの監視が行われます。また、Viteアプリケーション内でIntlayerの環境変数を定義します。さらに、パフォーマンス最適化のためのエイリアスも提供します。
 
----
+### ステップ5: レイアウトコンポーネントの作成
+
+ルートレイアウトとロケール固有のレイアウトを設定します。
+
+#### ルートレイアウト
 
-## ステップ4：コンテンツを宣言する
+```tsx fileName="src/routes/{-$locale}/route.tsx" codeFormat="typescript"
+// src/routes/{-$locale}/route.tsx
+import { createFileRoute, Navigate, Outlet } from "@tanstack/react-router";
+import { configuration } from "intlayer";
+import { IntlayerProvider, useLocale } from "react-intlayer";
+
+import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes";
+
+export const Route = createFileRoute("/{-$locale}")({
+  component: LayoutComponent,
+});
+
+function LayoutComponent() {
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+```
 
-辞書ファイルは`./src`以下の任意の場所に配置します（デフォルトは`contentDir`）。例：
+### ステップ6: コンテンツを宣言する
 
-```tsx fileName="src/app.content.tsx"
-import { t, type Dictionary } from "intlayer";
-import type { ReactNode } from "react";
+翻訳を保存するためのコンテンツ宣言を作成および管理します:
+
+```tsx fileName="src/contents/page.content.ts" contentDeclarationFormat="typescript"
+import type { Dictionary } from "intlayer";
+
+import { t } from "intlayer";
 
 const appContent = {
-  key: "app",
   content: {
-    viteLogo: t({
-      ja: "Vite ロゴ",
-      en: "Vite logo",
-      fr: "Logo Vite",
-      es: "Logo Vite",
-    }),
-    reactLogo: t({
-      ja: "React ロゴ",
-      en: "React logo",
-      fr: "Logo React",
-      es: "Logo React",
-    }),
+    links: {
+      about: t({
+        en: "About",
+        es: "Acerca de",
+        fr: "À propos",
+      }),
+      home: t({
+        en: "ホーム",
+        es: "Inicio",
+        fr: "Accueil",
+      }),
+    },
+    meta: {
+      description: t({
+        en: "これは Intlayer と TanStack Router を使用した例です",
+        es: "Este es un ejemplo de uso de Intlayer con TanStack Router",
+        fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router",
+      }),
+    },
     title: t({
-      ja: "TanStack Start + React",
-      en: "TanStack Start + React",
-      fr: "TanStack Start + React",
-      es: "TanStack Start + React",
-    }),
-    count: t({
-      ja: "カウントは ",
-      en: "count is ",
-      fr: "le compte est ",
-      es: "el recuento es ",
-    }),
-    edit: t<ReactNode>({
-      ja: (
-        <>
-          <code>src/routes/index.tsx</code> を編集して保存し、HMRをテストします
-        </>
-      ),
-      en: (
-        <>
-          Edit <code>src/routes/index.tsx</code> and save to test HMR
-        </>
-      ),
-      fr: (
-        <>
-          Éditez <code>src/routes/index.tsx</code> et enregistrez pour tester
-          HMR
-        </>
-      ),
-      es: (
-        <>
-          Edita <code>src/routes/index.tsx</code> y guarda para probar HMR
-        </>
-      ),
-    }),
-    readTheDocs: t({
-      en: "Click the logos to learn more",
-      fr: "Cliquez sur les logos pour en savoir plus",
-      es: "Haz clic en los logotipos para saber más",
-      ja: "ロゴをクリックして詳細を学ぶ",
+      en: "Intlayer + TanStack Router へようこそ",
+      es: "Bienvenido a Intlayer + TanStack Router",
+      fr: "Bienvenue à Intlayer + TanStack Router",
     }),
   },
+  key: "app",
 } satisfies Dictionary;
 
 export default appContent;
 ```
 
-JSON/ESM/CJS バリアントは、元のドキュメントと同様に動作します。
+> コンテンツ宣言は、アプリケーション内のどこにでも定義できますが、`contentDir` ディレクトリ（デフォルトは `./app`）に含まれている必要があります。また、コンテンツ宣言ファイルの拡張子（デフォルトは `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`）に一致している必要があります。
 
-> TSX コンテンツですか？セットアップで必要な場合は `import React from "react"` を忘れないでください。
+> 詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/get_started.md)を参照してください。
 
----
+### ステップ7: ロケール対応コンポーネントとフックを作成する
 
-## ステップ 5: TanStack Start を Intlayer でラップする
+ロケール対応のナビゲーション用に `LocalizedLink` コンポーネントを作成します：
 
-TanStack Start では、**ルートルート** がプロバイダーを設定する適切な場所です。
+```tsx fileName="src/components/localized-link.tsx" codeFormat="typescript"
+// src/components/localized-link.tsx
+// eslint-disable-next-line no-restricted-imports
+import { Link, type LinkProps } from "@tanstack/react-router";
+import { getLocalizedUrl } from "intlayer";
+import { useLocale } from "react-intlayer";
 
-```tsx fileName="src/routes/__root.tsx"
-import {
-  Outlet,
-  createRootRoute,
-  Link as RouterLink,
-} from "@tanstack/react-router";
-import { IntlayerProvider, useIntlayer } from "react-intlayer";
-
-function AppShell() {
-  // トップレベルで辞書を使用する例：
-  const content = useIntlayer("app");
+type LocalizedLinkProps = {
+  to: string;
+} & Omit<LinkProps, "to">;
 
-  return (
-    <div>
-      <nav className="flex gap-3 p-3">
-        <RouterLink to="/">ホーム</RouterLink>
-        <RouterLink to="/about">アバウト</RouterLink>
-      </nav>
-      <main className="p-6">
-        <h1>{content.title}</h1>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
+export function LocalizedLink(props: LocalizedLinkProps) {
+  const { locale } = useLocale();
 
-export const Route = createRootRoute({
-  component: () => (
-    <IntlayerProvider>
-      <AppShell />
-    </IntlayerProvider>
-  ),
-});
-```
+  const isExternal = (to: string) => {
+    return /^(https?:)?\/\//.test(to);
+  };
 
-次に、ページでコンテンツを使用します：
+  const to = isExternal(props.to)
+    ? props.to
+    : getLocalizedUrl(props.to, locale);
 
-```tsx fileName="src/routes/index.tsx"
-import { createFileRoute } from "@tanstack/react-router";
-import { useIntlayer } from "react-intlayer";
-import reactLogo from "../assets/react.svg";
-
-export const Route = createFileRoute("/")({
-  component: () => {
-    const content = useIntlayer("app");
-    return (
-      <>
-        <button>{content.count}0</button>
-        <p>{content.edit}</p>
-        <img
-          src={reactLogo}
-          alt={content.reactLogo.value}
-          width={48}
-          height={48}
-        />
-        <p className="opacity-70">{content.readTheDocs}</p>
-      </>
-    );
-  },
-});
+  return <Link {...props} to={to as LinkProps["to"]} />;
+}
 ```
 
-> 文字列属性（`alt`、`title`、`aria-label`など）には `.value` が必要です：
->
-> ```jsx
-> <img alt={c.reactLogo.value} />
-> ```
+プログラム的なナビゲーションのために `useLocalizedNavigate` フックを作成します:
 
----
+```tsx fileName="src/hooks/useLocalizedNavigate.tsx" codeFormat="typescript"
+// src/hooks/useLocalizedNavigate.tsx
+// eslint-disable-next-line no-restricted-imports
+import { NavigateOptions, useNavigate } from "@tanstack/react-router";
+import { getLocalizedUrl } from "intlayer";
+import { useLocale } from "react-intlayer";
 
-## （オプション）ステップ6：ロケール切り替え（クライアント）
+type LocalizedNavigateOptions = {
+  to: string;
+} & Omit<NavigateOptions, "to">;
 
-```tsx fileName="src/components/LocaleSwitcher.tsx"
-import { Locales } from "intlayer";
-import { useLocale } from "react-intlayer";
+export const useLocalizedNavigate = () => {
+  const navigate = useNavigate();
+  const { locale } = useLocale();
 
-export function LocaleSwitcher() {
-  const { setLocale } = useLocale();
-  return (
-    <div className="flex gap-2">
-      <button onClick={() => setLocale(Locales.ENGLISH)}>English</button>
-      <button onClick={() => setLocale(Locales.FRENCH)}>Français</button>
-      <button onClick={() => setLocale(Locales.SPANISH)}>Español</button>
-    </div>
-  );
-}
+  const isExternal = (to: string) => {
+    return /^(https?:)?\/\//.test(to);
+  };
+
+  const localizedNavigate = (options: LocalizedNavigateOptions) => {
+    const to = isExternal(options.to)
+      ? options.to
+      : getLocalizedUrl(options.to, locale);
+
+    navigate({ ...options, to: to as NavigateOptions["to"] });
+  };
+
+  return localizedNavigate;
+};
 ```
 
----
+### ステップ8: ページでIntlayerを活用する
 
-## （オプション）ステップ7：ローカライズされたルーティング（SEOに優しいURL）
+アプリケーション全体でコンテンツ辞書にアクセスします:
 
-TanStack Startには**2つの優れたパターン**があります。どちらかを選んでください。
+#### ルートリダイレクトページ
 
-動的セグメントフォルダ `src/routes/$locale/` を作成し、URLを `/:locale/...` にします。`$locale` レイアウト内で `params.locale` を検証し、`<IntlayerProvider locale=...>` を設定し、`<Outlet />` をレンダリングします。この方法はシンプルですが、残りのルートは `$locale` の下にマウントされ、デフォルトのロケールにプレフィックスを付けたくない場合は、プレフィックスなしの別のツリーが必要になります。
+```tsx fileName="src/routes/page.tsx" codeFormat="typescript"
+// src/routes/page.tsx
+import { useLocale } from "react-intlayer";
+import { Navigate } from "react-router";
 
----
+export default function Page() {
+  const { locale } = useLocale();
 
-## （オプション）ステップ8：ロケール切り替え時にURLを更新する
+  return <Navigate replace to={locale} />;
+}
+```
 
-パターンA（ベースパス）では、ロケールを切り替えると**異なるベースパスへナビゲートする**ことを意味します：
+#### ローカライズされたホームページ
 
-```tsx fileName="src/components/LocaleSwitcherNavigate.tsx"
-import { useRouter } from "@tanstack/react-router";
-import { Locales, getLocalizedUrl } from "intlayer";
-import { useLocale } from "react-intlayer";
+```tsx fileName="src/routes/{-$locale}/index.tsx" codeFormat="typescript"
+import { createFileRoute } from "@tanstack/react-router";
+import { getIntlayer } from "intlayer";
+import { useIntlayer } from "react-intlayer";
 
-export function LocaleSwitcherNavigate() {
-  const router = useRouter();
-  const { locale, setLocale } = useLocale();
-
-  const change = async (next: Locales) => {
-    if (next === locale) return;
-    const nextPath = getLocalizedUrl(
-      window.location.pathname + window.location.search,
-      next
-    );
-    await router.navigate({ to: nextPath }); // 履歴を保持
-    setLocale(next);
-  };
+import LocaleSwitcher from "@/components/locale-switcher";
+import { LocalizedLink } from "@/components/localized-link";
+import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  head: ({ params }) => {
+    const { locale } = params;
+    const metaContent = getIntlayer("app", locale);
+
+    return {
+      meta: [
+        { title: metaContent.title },
+        { content: metaContent.meta.description, name: "description" },
+      ],
+    };
+  },
+});
+
+function RouteComponent() {
+  const content = useIntlayer("app");
+  const navigate = useLocalizedNavigate();
 
   return (
-    <div className="flex gap-2">
-      <button onClick={() => change(Locales.ENGLISH)}>English</button>
-      <button onClick={() => change(Locales.FRENCH)}>Français</button>
-      <button onClick={() => change(Locales.SPANISH)}>Español</button>
+    <div className="grid place-items-center h-screen">
+      <div className="flex flex-col gap-4 items-center text-center">
+        {content.title}
+        <LocaleSwitcher />
+        <div className="flex gap-4">
+          <a href="/">インデックス</a>
+          <LocalizedLink to="/">{content.links.home}</LocalizedLink>
+          <LocalizedLink to="/about">{content.links.about}</LocalizedLink>
+        </div>
+        <div className="flex gap-4">
+          <button onClick={() => navigate({ to: "/" })}>
+            {content.links.home}
+          </button>
+          <button onClick={() => navigate({ to: "/about" })}>
+            {content.links.about}
+          </button>
+        </div>
+      </div>
     </div>
   );
 }
 ```
 
----
+> `useIntlayer` フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useIntlayer.md)を参照してください。
 
-## （任意）ステップ9: `<html lang>` と `dir` の設定（TanStack Start Document）
+### ステップ9: ロケールスイッチャーコンポーネントの作成
 
-TanStack Start はカスタマイズ可能な **Document**（ルートHTMLシェル）を提供します。アクセシビリティやSEOのために `lang` と `dir` を設定しましょう：
+ユーザーが言語を切り替えられるコンポーネントを作成します:
 
-```tsx fileName="src/routes/__root.tsx" {4,15}
-import { Outlet, createRootRoute } from "@tanstack/react-router";
-import { IntlayerProvider } from "react-intlayer";
-import { getHTMLTextDir } from "intlayer";
+```tsx fileName="src/components/locale-switcher.tsx" codeFormat="typescript"
+import { useLocation } from "@tanstack/react-router";
+import {
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+  Locales,
+} from "intlayer";
+import { useIntlayer, useLocale } from "react-intlayer";
+
+export default function LocaleSwitcher() {
+  const { pathname, searchStr } = useLocation();
+  const content = useIntlayer("locale-switcher");
+
+  const { availableLocales, locale, setLocale } = useLocale({
+    onLocaleChange: (newLocale) => {
+      const pathWithLocale = getLocalizedUrl(pathname + searchStr, newLocale);
+      location.replace(pathWithLocale);
+    },
+  });
 
-function Document({
-  locale,
-  children,
-}: {
-  locale: string;
-  children: React.ReactNode;
-}) {
   return (
-    <html lang={locale} dir={getHTMLTextDir(locale)}>
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        {/* ... */}
-      </head>
-      <body>{children}</body>
-    </html>
+    <select
+      aria-label={content.label.toString()}
+      onChange={(e) => setLocale(e.target.value)}
+      value={locale}
+    >
+      {availableLocales.map((localeItem) => (
+        <option
+          dir={getHTMLTextDir(localeItem)}
+          key={localeItem}
+          lang={localeItem}
+          value={localeItem}
+        >
+          {/* 例: Français (フランス語) */}
+          {getLocaleName(localeItem, locale)} (
+          {getLocaleName(localeItem, Locales.ENGLISH)})
+        </option>
+      ))}
+    </select>
   );
 }
-
-export const Route = createRootRoute({
-  component: () => (
-    <IntlayerProvider>
-      {/* サーバーでロケールを計算する場合はDocumentに渡してください。そうでなければクライアント側でハイドレーション後に修正されます */}
-      <Document locale={document?.documentElement?.lang || "en"}>
-        <Outlet />
-      </Document>
-    </IntlayerProvider>
-  ),
-});
 ```
 
-クライアント側での修正のために、小さなフックを保持することもできます:
+> `useLocale` フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md)を参照してください。
+
+### ステップ10: HTML属性の管理を追加（オプション）
 
-```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx"
+HTMLのlangおよびdir属性を管理するフックを作成します：
+
+```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
+// src/hooks/useI18nHTMLAttributes.tsx
+import { getHTMLTextDir } from "intlayer";
 import { useEffect } from "react";
 import { useLocale } from "react-intlayer";
-import { getHTMLTextDir } from "intlayer";
 
 export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
+
   useEffect(() => {
-    document.documentElement.lang = locale;
-    document.documentElement.dir = getHTMLTextDir(locale);
+    document.documentElement.lang = locale; // HTMLのlang属性を設定
+    document.documentElement.dir = getHTMLTextDir(locale); // HTMLのdir属性を設定
   }, [locale]);
 };
 ```
 
----
+次に、ルートコンポーネントでこれを使用します：
 
-## （オプション）ステップ10：ローカライズされたLinkコンポーネント
+```tsx fileName="src/routes/{-$locale}/index.tsx" codeFormat="typescript"
+import { createFileRoute, Navigate, Outlet } from "@tanstack/react-router";
+import { configuration } from "intlayer";
+import { IntlayerProvider, useLocale } from "react-intlayer";
 
-TanStack Routerは`<Link/>`を提供していますが、内部URLに自動でプレフィックスを付けるプレーンな`<a>`タグが必要な場合：
+import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes"; // フックをインポート
 
-```tsx fileName="src/components/Link.tsx"
-import { getLocalizedUrl } from "intlayer";
-import {
-  forwardRef,
-  type AnchorHTMLAttributes,
-  type DetailedHTMLProps,
-} from "react";
-import { useLocale } from "react-intlayer";
+export const Route = createFileRoute("/{-$locale}")({
+  component: LayoutComponent,
+});
 
-export interface LinkProps
-  extends DetailedHTMLProps<
-    AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
-  > {}
-
-const isExternal = (href?: string) => /^https?:\/\//.test(href ?? "");
-
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ href, children, ...props }, ref) => {
-    const { locale } = useLocale();
-    const hrefI18n =
-      href && !isExternal(href) ? getLocalizedUrl(href, locale) : href;
-    return (
-      <a href={hrefI18n} ref={ref} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
-Link.displayName = "Link";
+function LayoutComponent() {
+  useI18nHTMLAttributes(); // この行を追加
+
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
 ```
 
-> パターンA（basepath）を使用している場合、TanStackの`<Link to="/about" />`はすでに`basepath`を介して`/fr/about`に解決されるため、カスタムリンクはオプションです。
+### ステップ11: アプリケーションのビルドと実行
 
----
+コンテンツ辞書をビルドし、アプリケーションを実行します：
 
-## TypeScript
+```bash packageManager="npm"
+# Intlayerの辞書をビルド
+npm run intlayer:build
 
-Intlayerの生成された型を含めてください：
+# 開発サーバーを起動
+npm run dev
+```
+
+```bash packageManager="pnpm"
+# Intlayerの辞書をビルド
+pnpm intlayer:build
+
+# 開発サーバーを起動
+pnpm dev
+```
+
+```bash packageManager="yarn"
+# Intlayerの辞書をビルド
+yarn intlayer:build
+
+# 開発サーバーを起動
+yarn dev
+```
+
+### ステップ12: TypeScriptの設定（任意）
+
+Intlayerはモジュール拡張を使用してTypeScriptの利点を活かし、コードベースをより強固にします。
+
+TypeScriptの設定に自動生成された型が含まれていることを確認してください：
 
 ```json5 fileName="tsconfig.json"
 {
-  "include": ["src", ".intlayer/**/*.ts"],
+  compilerOptions: {
+    // ... 既存のTypeScript設定
+  },
+  include: [
+    // ... 既存のインクルード
+    ".intlayer/**/*.ts", // 自動生成された型を含める
+  ],
 }
 ```
 
----
+### Git設定
 
-## Git
+Intlayerによって生成されたファイルは無視することを推奨します。これにより、Gitリポジトリへのコミットを避けることができます。
 
-Intlayerの生成されたアーティファクトを無視してください：
+これを行うには、`.gitignore`ファイルに以下の指示を追加してください：
 
-```gitignore
+```plaintext fileName=".gitignore"
+# Intlayerによって生成されたファイルを無視する
 .intlayer
 ```
 
 ---
 
-## VS Code 拡張機能
+### ステップ13: リダイレクトの作成（オプション）
+
+```typescript fileName="src/routes/{-$locale}/rotue.tsx" codeFormat="typescript"
+function LayoutComponent() {
+  useI18nHTMLAttributes();
+
+  const { locale } = Route.useParams();
+  const { locale: selectedLocale } = useLocale();
+  const { defaultLocale } = configuration.internationalization;
+  const { prefixDefault } = configuration.middleware;
+
+  // prefixDefault が true の場合、URL にロケールが存在しないときはデフォルトロケールへリダイレクトする
+  if (selectedLocale === defaultLocale && !locale && prefixDefault) {
+    return <Navigate replace to={defaultLocale} />;
+  }
 
-- **Intlayer VS Code 拡張機能** → オートコンプリート、エラー表示、インラインプレビュー、クイックアクション。
-  マーケットプレイス: `intlayer.intlayer-vs-code-extension`
+  // URL のロケールが選択されたロケールと一致しない場合は選択されたロケールへリダイレクトする
+  if (selectedLocale !== defaultLocale && !locale) {
+    return <Navigate replace to={selectedLocale} />;
+  }
+
+  return (
+  <IntlayerProvider locale={locale}>
+    <Outlet />
+  </IntlayerProvider>
+);
+}
+```
+
+## 本番環境へのデプロイ
+
+アプリケーションをデプロイする際は、以下の手順を行ってください：
+
+1. **アプリケーションをビルドする：**
+
+   ```bash
+   npm run build
+   ```
+
+2. **Intlayerの辞書をビルドする：**
+
+   ```bash
+   npm run intlayer:build
+   ```
+
+3. **本番環境でミドルウェアを使用する場合は、`vite-intlayer`を依存関係に移動する：**
+   ```bash
+   npm install vite-intlayer --save
+   ```
+
+これでアプリケーションは以下をサポートします：
+
+- **URL構造**: `/en`, `/en/about`, `/tr`, `/tr/about`
+- **ブラウザの設定に基づく自動ロケール検出**
+- **Tanstack Startによるロケール対応ルーティング**
+- **自動生成された型定義によるTypeScriptサポート**
+- **適切なロケール処理を行うサーバーサイドレンダリング**
+
+## VS Code拡張機能
+
+Intlayerでの開発体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールできます。
+
+[VS Codeマーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+この拡張機能は以下を提供します：
+
+- 翻訳キーの**オートコンプリート**。
+- 翻訳が不足している場合の**リアルタイムエラー検出**。
+- 翻訳されたコンテンツの**インラインプレビュー**。
+- 翻訳の作成や更新を簡単に行うための**クイックアクション**。
+
+拡張機能の使い方の詳細については、[Intlayer VS Code拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。
 
 ---
 
 ## さらに進む
 
-- ビジュアルエディター
-- CMSモード
-- エッジでのロケール検出 / アダプター
+さらに進めるには、[ビジュアルエディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を実装するか、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)を使用してコンテンツを外部化することができます。
 
 ---
 
+## ドキュメント参照
+
+- [Intlayer ドキュメント](https://intlayer.org)
+- [Tanstack Start ドキュメント](https://reactrouter.com/)
+- [useIntlayer フック](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useIntlayer.md)
+- [useLocale フック](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md)
+- [コンテンツ宣言](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/get_started.md)
+- [設定](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)
+
+この包括的なガイドは、IntlayerをTanstack Startと統合し、ロケール対応のルーティングとTypeScriptサポートを備えた完全な国際化アプリケーションを構築するために必要なすべてを提供します。
+
 ## ドキュメント履歴
 
-| バージョン | 日付       | 変更内容                    |
-| ---------- | ---------- | --------------------------- |
-| 1.0.0      | 2025-08-11 | TanStack Start の適応を追加 |
+| バージョン | 日付       | 変更内容                 |
+| ---------- | ---------- | ------------------------ |
+| 5.8.1      | 2025-09-09 | Tanstack Start向けに追加 |