@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/ja/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-06-23
+updatedAt: 2026-08-25
 title: "TanStack Start i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）TanStack Startアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
@@ -21,6 +21,9 @@ applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-templ
 applicationShowcase: https://intlayer-tanstack-start-template.vercel.app
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
+  - version: 9.4.0
+    date: 2026-08-25
+    changes: "ルートの head 関数におけるメタデータ辞書の静的解決・動的解決・キャッシュ付き動的解決を比較"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"
@@ -63,12 +66,16 @@ author: aymericzip
 
 「react-i18next」、「use-intl」、または「paraglide」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
+<AccordionGroup>
+
 **TanStack Start を完全にカバー**
 
 Intlayer は TanStack Start 用に完全に最適化されており、**多言語ルーティング**、**Cookie 管理**、**サイトマップ生成**、**動的コンテンツ読み込み**、および国際化 (i18n) の取り組みを拡張するために必要なすべての機能を提供します。
 
 **バンドルサイズ**
 
+<Accordion header="バンドルサイズ">
+
 大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
 
 **保守性**
@@ -77,20 +84,33 @@ Intlayer は TanStack Start 用に完全に最適化されており、**多言
 
 **AI エージェント**
 
+</Accordion>
+
+<Accordion header="AI Agent">
+
 コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
 
 **オートメーション**
 
+<Accordion header="自動化">
+
 AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
 
 **パフォーマンス**
 
+<Accordion header="パフォーマンス">
+
 大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
 
 **非開発によるスケーリング**
 
+<Accordion header="none-dev でのスケーリング">
+
 Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## TanStack StartアプリケーションでIntlayerをセットアップするためのステップバイステップガイド
@@ -304,14 +324,6 @@ function RootDocument({ children }: { children: ReactNode }) {
 }
 ```
 
-> コンテンツを `alt`、`title`、`href`、`aria-label` などの `string` 属性で使用したい場合は、関数の値を使用できます。例：
-
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
-
 </Step>
 
 <Step number={6} title="ロケールレイアウトの作成">
@@ -507,18 +519,14 @@ export const useLocalizedNavigate = () => {
 
 <Step number={9} title="ページでのIntlayerの利用">
 
+> コンポーネント内では既定で **`useIntlayer`** を使用してください。コンパイラがレンダリング対象のロケールへ解決してくれるため、これが推奨される方法です。`getIntlayer` / `getIntlayerAsync` は React ツリーの外側（ルートの `head`、ローダー、サーバー関数）でのみ使用します。
+
 アプリケーション全体でコンテンツ辞書にアクセスします：
 
 #### ローカライズされたホームページ
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createFileRoute } from "@tanstack/react-router";
-import {
-  getIntlayer,
-  defaultLocale,
-  localeMap,
-  getLocalizedUrl,
-} from "intlayer";
 import { useIntlayer } from "react-intlayer";
 
 import LocaleSwitcher from "@/components/locale-switcher";
@@ -527,38 +535,6 @@ import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";
 
 export const Route = createFileRoute("/{-$locale}/")({
   component: RouteComponent,
-  head: ({ params }) => {
-    const { locale } = params;
-    const path = "/"; // このルートのパス
-
-    const metaContent = getIntlayer("app", locale);
-
-    return {
-      links: [
-        // カノニカルリンク：現在のローカライズされたページを指します
-        { rel: "canonical", href: getLocalizedUrl(path, locale) },
-
-        // Hreflang：すべてのローカライズされたバージョンについてGoogleに伝えます
-        ...localeMap(({ locale: mapLocale }) => ({
-          rel: "alternate",
-          hrefLang: mapLocale,
-          href: getLocalizedUrl(path, mapLocale),
-        })),
-
-        // x-default：一致する言語がないユーザー向け
-        // デフォルトのフォールバックロケールを定義します（通常は主要言語）
-        {
-          rel: "alternate",
-          hrefLang: "x-default",
-          href: getLocalizedUrl(path, defaultLocale),
-        },
-      ],
-      meta: [
-        { title: metaContent.title },
-        { name: "description", content: metaContent.meta.description },
-      ],
-    };
-  },
 });
 
 function RouteComponent() {
@@ -588,13 +564,21 @@ function RouteComponent() {
 }
 ```
 
-> `useIntlayer`フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useIntlayer.md)を参照してください。
+> `alt`、`title`、`href`、`aria-label` などの `string` 属性でコンテンツを使用する場合、関数の値を次のように使用できます:
+>
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
+> `useIntlayer` hook の詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useIntlayer.md)を参照してください。
 
 </Step>
 
-<Step number={10} title="ロケールスイッチャーコンポーネントの作成">
+<Step number={9} title="ロケール切り替えコンポーネントを作成する">
 
-ユーザーが言語を変更できるようにするコンポーネントを作成します：
+ユーザーが言語を変更できるようにするコンポーネントを作成します:
 
 ```tsx fileName="src/components/locale-switcher.tsx"
 import { useLocation } from "@tanstack/react-router";
@@ -632,15 +616,15 @@ export const LocaleSwitcher: FC = () => {
               {localeEl}
             </span>
             <span>
-              {/* そのロケール自体での言語名 - 例: Français */}
+              {/* その言語自体でのロケール - 例: Français */}
               {getLocaleName(localeEl, locale)}
             </span>
             <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
-              {/* 現在のロケールでの言語名 - 例: Locales.SPANISH の場合 Francés */}
+              {/* 現在のロケールでの言語 - 例: Locales.SPANISH に設定された現在のロケールでの Francés */}
               {getLocaleName(localeEl)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* 英語での言語名 - 例: French */}
+              {/* 英語での言語 - 例: French */}
               {getLocaleName(localeEl, Locales.ENGLISH)}
             </span>
           </LocalizedLink>
@@ -651,15 +635,17 @@ export const LocaleSwitcher: FC = () => {
 };
 ```
 
-> `useLocale`フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md)を参照してください。
+> `useLocale` hook の詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md)を参照してください。
 
 </Step>
 
-<Step number={11} title="HTML属性の管理">
+<Step number={10} title="HTML 属性管理">
 
-ステップ 5 で見たように、ルートコンポーネントで `useParams` を使用して `html` タグの `lang` および `dir` 属性を管理できます。これにより、サーバーとクライアントで正しい属性が設定されるようになります。
+ステップ 5 で見たように、ルートコンポーネントで `useParams` を使用して `html` タグの `lang` と `dir` 属性を管理できます。これにより、サーバーとクライアントで正しい属性が設定されます。
 
 ```tsx fileName="src/routes/__root.tsx"
+const localeRoute = getRouteApi("/{-$locale}");
+
 function RootDocument({ children }: { children: ReactNode }) {
   const params = localeRoute.useParams();
   const locale = params?.locale ?? defaultLocale;
@@ -676,11 +662,13 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 </Step>
 
-<Step number={12} title="ミドルウェアの追加">
+<Step number={11} title="ミドルウェアを追加する">
+
+`intlayerProxy` を使用して、アプリケーションにサーバー側のルーティングを追加することもできます。このプラグインは URL に基づいて現在のロケールを自動的に検出し、適切なロケール cookie を設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザ言語設定に基づいて最も適切なロケールを決定します。ロケールが検出されない場合、デフォルトロケールにリダイレクトされます。
 
-`intlayerProxy`を使用して、アプリケーションにサーバーサイドのルーティングを追加することもできます。このプラグインは、URLに基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、ユーザーのブラウザの言語設定に基づいて最も適切なロケールを決定します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトされます。
+> 本番環境で `intlayerProxy` を使用するには、`vite-intlayer` パッケージを `devDependencies` から `dependencies` に切り替える必要があります。
 
-> `intlayerProxy`を本番環境で使用するには、`vite-intlayer`パッケージを`devDependencies`から`dependencies`に切り替える必要があることに注意してください。
+> Intlayer v9 以降では、`intlayerProxy()` は `intlayer()` プラグインに直接バンドルされ、`routing.enableProxy` オプション（デフォルトで `true`）を通じてデフォルトで有効になっています。以下に示すように、別途登録することは今や任意です: これは後方互換性と、プラグイン順序を制御する必要があるセットアップのために保持されています。オプトアウトするには `routing.enableProxy: false` を設定してください。[v9 リリースノート](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/releases/v9.md)を参照してください。
 
 ```typescript fileName="vite.config.ts"
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
@@ -712,36 +700,45 @@ export default defineConfig({
 
 </Step>
 
-<Step number={12} title="メタデータの国際化">
+<Step number={12} title="メタデータを国際化する">
 
-`getIntlayer`フックを使用して、アプリケーション全体でコンテンツ辞書にアクセスすることもできます：
+<Tabs>
+
+<Tab label="静的解決" value="static">
+
+`getIntlayer` は**マージされた**ディクショナリに対して同期的に解決します。これはすべての宣言されたロケールを保持しているものです。`head` は同期のままで何も待機しませんが、多言語ディクショナリ全体がブラウザに送信されるルートチャンクに含まれます。
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createFileRoute } from "@tanstack/react-router";
-import { getIntlayer } from "intlayer";
+import {
+  defaultLocale,
+  getIntlayer,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
 
 export const Route = createFileRoute("/{-$locale}/")({
   component: RouteComponent,
   head: ({ params }) => {
-    const { locale } = params;
-    const path = "/"; // The path for this route
+    const { locale = defaultLocale } = params;
+    const path = "/"; // このルートのパス
 
     const metaContent = getIntlayer("app", locale);
 
     return {
       links: [
-        // Canonical link: Points to the current localized page
+        // 正規リンク: 現在のローカライズされたページを指す
         { rel: "canonical", href: getLocalizedUrl(path, locale) },
 
-        // Hreflang: Tell Google about all localized versions
+        // Hreflang: すべてのローカライズされたバージョンについて Google に通知
         ...localeMap(({ locale: mapLocale }) => ({
           rel: "alternate",
           hrefLang: mapLocale,
           href: getLocalizedUrl(path, mapLocale),
         })),
 
-        // x-default: For users in unmatched languages
-        // Define the default fallback locale (usually your primary language)
+        // x-default: マッチしない言語のユーザー向け
+        // デフォルトのフォールバックロケールを定義（通常、プライマリ言語）
         {
           rel: "alternate",
           hrefLang: "x-default",
@@ -757,16 +754,153 @@ export const Route = createFileRoute("/{-$locale}/")({
 });
 ```
 
+小さなメタデータディクショナリ、少数のロケール、またはプロトタイピング中に最適です。
+
+</Tab>
+
+<Tab label="動的解決" value="dynamic">
+
+`getIntlayerAsync`（**v9.4** から利用可能）は `getIntlayer` のような動作をしますが、ビルドプラグインはマージされたディクショナリではなく、`.intlayer/dynamic_dictionaries/` のロケール別チャンクを指します。したがって、ページはそれがレンダリングするロケールのみを配信します。そのチャンクはオンデマンドで読み込まれるため、`head` は `async` になります:
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  defaultLocale,
+  getIntlayerAsync,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  head: async ({ params }) => {
+    const { locale = defaultLocale } = params;
+    const path = "/"; // このルートのパス
+
+    const metaContent = await getIntlayerAsync("app", locale);
+
+    return {
+      links: [
+        // 正規リンク: 現在のローカライズされたページを指す
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang: すべてのローカライズされたバージョンについて Google に通知
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default: マッチしない言語のユーザー向け
+        // デフォルトのフォールバックロケールを定義（通常、プライマリ言語）
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: metaContent.title },
+        { name: "description", content: metaContent.meta.description },
+      ],
+    };
+  },
+});
+```
+
+> `head` が複数のディクショナリを読む場合、`Promise.all` で解決してください: 各 `getIntlayerAsync` を独自の行で待機すると、リクエストが並行実行ではなく直列実行されます。
+
+トレードオフ: 動的インポートは `head` が実行されている間に、ドキュメントレンダリングの重大パス上で解決されます。コールドルートでは、これにより head を数ミリ秒遅延させ、**LCP** をわずかに低下させる可能性があります。
+
+</Tab>
+
+<Tab label="キャッシュされた動的解決" value="cached">
+
+ルート `loader` でディクショナリを解決し、`head` で `loaderData` から読み直してください。マッチされたルートのローダーは並行実行され、`staleTime: Infinity` は TanStack Router に結果が決してstaleにならないことを伝えるため、ロケール別チャンクは一度解決され、その後ルーターキャッシュから提供されるため、`head` は同期のままです。
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  defaultLocale,
+  getIntlayerAsync,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  // 他のマッチされたルートと並行実行され、head の重大パスから外れる
+  loader: async ({ params }) => {
+    const { locale = defaultLocale } = params;
+
+    return { metaContent: await getIntlayerAsync("app", locale) };
+  },
+  // 与えられたロケールに対してディクショナリは決して変わらない: チャンクを一度解決
+  staleTime: Infinity,
+  head: ({ params, loaderData }) => {
+    const { locale = defaultLocale } = params;
+    const path = "/"; // このルートのパス
+
+    return {
+      links: [
+        // 正規リンク: 現在のローカライズされたページを指す
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang: すべてのローカライズされたバージョンについて Google に通知
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default: マッチしない言語のユーザー向け
+        // デフォルトのフォールバックロケールを定義（通常、プライマリ言語）
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: loaderData?.metaContent.title },
+        {
+          name: "description",
+          content: loaderData?.metaContent.meta.description,
+        },
+      ],
+    };
+  },
+});
+```
+
+> `head` はローダーが確定する前に呼び出される可能性があるため、`loaderData` は `undefined` の可能性があるとして型付けされています。オプショナルチェーニングを保持するか、フォールバックタイトルを返してください。
+
+head の重大パスでその コストを支払うことなく、ロケール別チャンクを保持します。代金は開発者体験です: コンテンツは `loaderData` を通じてローダーから `head` に明示的にスレッド処理される必要があります。
+
+</Tab>
+
+</Tabs>
+
+### どの解決方法を選ぶべき？
+
+|                      | 静的解決              | 動的解決                   | キャッシュされた動的解決               |
+| -------------------- | --------------------- | -------------------------- | -------------------------------------- |
+| API                  | `getIntlayer`         | `getIntlayerAsync` (v9.4+) | `getIntlayerAsync` in `loader` (v9.4+) |
+| `head` signature     | synchronous           | `async`                    | synchronous, reads `loaderData`        |
+| Locales shipped      | every declared locale | requested locale only      | requested locale only                  |
+| Client navigations   | nothing to resolve    | re-entered on every match  | served from the router cache           |
+| Developer experience | simplest              | one `await`                | content threaded through `loaderData`  |
+
 ---
 
 </Step>
 
-<Step number={13} title="サーバーアクションでのロケールの取得">
+<Step number={13} title="サーバーアクションでロケールを取得する">
 
-サーバーアクションやAPIエンドポイント内から現在のロケールにアクセスしたい場合があります。
-Intlayerの `getLocale` ヘルパーを使用してこれを行うことができます。
+サーバーアクションまたはAPIエンドポイント内から現在のロケールにアクセスしたい場合があります。
+`intlayer` から `getLocale` ヘルパーを使用してこれを実行できます。
 
-以下は、TanStack Startのサーバー関数を使用した例です：
+TanStack Start のサーバー関数を使用した例を示します：
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createServerFn } from "@tanstack/react-start";
@@ -778,18 +912,18 @@ import { getCookie, getIntlayer, getLocale } from "intlayer";
 
 export const getLocaleServer = createServerFn().handler(async () => {
   const locale = await getLocale({
-    // リクエストからクッキーを取得する（デフォルト：'INTLAYER_LOCALE'）
+    // リクエストからクッキーを取得（デフォルト：'INTLAYER_LOCALE'）
     getCookie: (name) => {
       const cookieString = getRequestHeader("cookie");
 
       return getCookie(name, cookieString);
     },
-    // リクエストからヘッダーを取得する（デフォルト：'x-intlayer-locale'）
-    // Accept-Languageネゴシエーションを使用したフォールバック
+    // リクエストからヘッダーを取得（デフォルト：'x-intlayer-locale'）
+    // Accept-Language ネゴシエーションを使用したフォールバック
     getHeader: (name) => getRequestHeader(name),
   });
 
-  // getIntlayer()を使用してコンテンツを取得する
+  // getIntlayerAsync() を使用してコンテンツを取得
   const content = getIntlayer("app", locale);
 
   return { locale, content };
@@ -800,6 +934,151 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 </Step>
 
+<Step number={14} title="見つからないページを管理する">
+
+ユーザーが存在しないページにアクセスした場合、カスタム見つからないページを表示できます。ロケールプレフィックスは見つからないページがトリガーされる方法に影響を与える可能性があります。
+
+#### ローカライズされたホームページ
+
+> `string` 属性（`alt`、`title`、`href`、`aria-label` など）でコンテンツを使用したい場合は、関数の値を次のように使用できます：
+>
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
+> `useIntlayer`フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useIntlayer.md)を参照してください。
+
+</Step>
+
+```tsx fileName="src/components/locale-switcher.tsx"
+import { useLocation } from "@tanstack/react-router";
+import {
+  getHTMLTextDir,
+  getLocaleName,
+  getPathWithoutLocale,
+  getPrefix,
+  Locales,
+} from "intlayer";
+import type { FC } from "react";
+import { useLocale } from "react-intlayer";
+
+import { LocalizedLink, type To } from "./localized-link";
+
+export const LocaleSwitcher: FC = () => {
+  const { pathname } = useLocation();
+
+  const { availableLocales, locale, setLocale } = useLocale();
+
+  const pathWithoutLocale = getPathWithoutLocale(pathname);
+
+  return (
+    <ol>
+      {availableLocales.map((localeEl) => (
+        <li key={localeEl}>
+          <LocalizedLink
+            aria-current={localeEl === locale ? "page" : undefined}
+            onClick={() => setLocale(localeEl)}
+            params={{ locale: getPrefix(localeEl).localePrefix }}
+            to={pathWithoutLocale as To}
+          >
+            <span>
+              {/* ロケール - 例: FR */}
+              {localeEl}
+            </span>
+            <span>
+              {/* そのロケール自体での言語名 - 例: Français */}
+              {getLocaleName(localeEl, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
+              {/* 現在のロケールでの言語名 - 例: Locales.SPANISH の場合 Francés */}
+              {getLocaleName(localeEl)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* 英語での言語名 - 例: French */}
+              {getLocaleName(localeEl, Locales.ENGLISH)}
+            </span>
+          </LocalizedLink>
+        </li>
+      ))}
+    </ol>
+  );
+};
+```
+
+> `useLocale`フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md)を参照してください。
+
+</Step>
+
+<Step number={11} title="HTML属性の管理">
+
+return (
+<html dir={getHTMLTextDir(locale)} lang={locale}>
+{/* ... _/}
+</html>
+);
+} {/_ ... */}
+</html>
+);
+}
+
+export const Route = createFileRoute("/{-$locale}/")({
+component: RouteComponent,
+head: async ({ params }) => {
+const { locale = defaultLocale } = params;
+const path = "/"; // The path for this route
+
+    const metaContent = await getIntlayerAsync("app", locale);
+
+````
+
+> `head` はローダーの解決前に呼ばれることがあるため、`loaderData` は `undefined` の可能性がある型になります。オプショナルチェーンを残すか、フォールバックのタイトルを返してください。
+
+ロケール別チャンクの利点を保ちつつ、そのコストを `head` のクリティカルパスで支払わずに済みます。代償は DX です。コンテンツをローダーから `head` へ `loaderData` 経由で明示的に受け渡す必要があります。
+
+</Tab>
+
+</Tabs>
+
+### どの解決方法を選ぶべきか
+
+|                     | 静的解決                   | 動的解決                    | キャッシュ付き動的解決                    |
+| ------------------- | -------------------------- | --------------------------- | ----------------------------------------- |
+| API                 | `getIntlayer`              | `getIntlayerAsync`（v9.4+） | `loader` 内の `getIntlayerAsync`（v9.4+） |
+| `head` のシグネチャ | 同期                       | `async`                     | 同期、`loaderData` を読む                 |
+| 配信されるロケール  | 宣言されたすべてのロケール | 要求されたロケールのみ      | 要求されたロケールのみ                    |
+| クライアント遷移    | 解決するものなし           | マッチのたびに再実行        | ルーターのキャッシュから提供              |
+| DX                  | 最もシンプル               | `await` が 1 つ             | コンテンツを `loaderData` 経由で受け渡し  |
+
+---
+
+</Step>
+
+<Step number={13} title="サーバーアクションでのロケールの取得">
+
+サーバーアクションやAPIエンドポイント内から現在のロケールにアクセスしたい場合があります。
+Intlayerの `getLocale` ヘルパーを使用してこれを行うことができます。
+
+以下は、TanStack Startのサーバー関数を使用した例です：
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+      return getCookie(name, cookieString);
+    },
+    // リクエストからヘッダーを取得する（デフォルト：'x-intlayer-locale'）
+    // Accept-Languageネゴシエーションを使用したフォールバック
+    getHeader: (name) => getRequestHeader(name),
+  });
+
+  // getIntlayer()を使用してコンテンツを取得する
+  const content = getIntlayer("app", locale);
+
+````
+
+---
+
+</Step>
+
 <Step number={14} title="「見つかりませんでした」ページの管理">
 
 ユーザーが存在しないページにアクセスしたときにカスタムの404ページを表示できます。ロケール接頭辞は、404ページがトリガーされる方法に影響を与える可能性があります。
@@ -813,69 +1092,17 @@ TanStack Routerでは、ローカライズされたルートでの404ページ
 3. **キャッチオールルート**: ロケールセグメント内の一致しないパスをすべてキャプチャします
 
 ```tsx fileName="src/routes/{-$locale}/404.tsx"
-import { createFileRoute } from "@tanstack/react-router";
-
-// これにより、専用の /[locale]/404 ルートが作成されます
-// これは直接のルートとしても使用され、他のファイルでコンポーネントとしてインポートもされます
-export const Route = createFileRoute("/{-$locale}/404")({
-  component: NotFoundComponent,
-});
 
-// コンポーネントおよびキャッチオールルートで再利用できるように個別にエクスポートされます
-export function NotFoundComponent() {
-  return (
-    <div>
-      <h1>404</h1>
-    </div>
-  );
-}
 ```
 
 ```tsx fileName="src/routes/{-$locale}/route.tsx"
-import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
-import { validatePrefix } from "intlayer";
-import { NotFoundComponent } from "./404";
 
-export const Route = createFileRoute("/{-$locale}")({
-  // beforeLoadは、ルートがレンダリングされる前（サーバーとクライアントの両方）に実行されます
-  // ロケール接頭辞を検証するのに最適な場所です
-  beforeLoad: ({ params }) => {
-    const localeParam = params.locale;
-
-    // validatePrefixは、intlayer構成に従ってロケールが有効かどうかを確認します
-    const { isValid, localePrefix } = validatePrefix(localeParam);
-
-    if (!isValid) {
-      // 無効なロケール接頭辞 - 有効なロケール接頭辞を持つ404ページにリダイレクトします
-      throw redirect({
-        to: "/{-$locale}/404",
-        params: { locale: localePrefix },
-      });
-    }
-  },
-  component: Outlet,
-  // notFoundComponentは、子ルートが存在しないときに呼び出されます
-  // 例：/en/non-existent-page は /en レイアウト内でこれをトリガーします
-  notFoundComponent: NotFoundComponent,
-});
 ```
 
 ```tsx fileName="src/routes/{-$locale}/$.tsx"
-import { createFileRoute } from "@tanstack/react-router";
-
-import { NotFoundComponent } from "./404";
 
-// $（スプラット/キャッチオール）ルートは、他のルートと一致しないパスに一致します
-// 例：/en/some/deeply/nested/invalid/path
-// これにより、ロケール内の一致しないパスがすべて404ページを表示するようになります
-// これがないと、一致しない深いパスが空白ページまたはエラーを表示する可能性があります
-export const Route = createFileRoute("/{-$locale}/$")({
-  component: NotFoundComponent,
-});
 ```
 
----
-
 </Step>
 
 <Step number={15} title="コンポーネントのコンテンツを抽出する" isOptional={true}>
@@ -911,14 +1138,6 @@ const config: IntlayerConfig = {
      */
     saveComponents: false,
 
-    /**
-     * 辞書キーの接頭辞
-     */
-    dictionaryKeyPrefix: "",
-  },
-};
-
-export default config;
 ```
 
 <Tabs>
@@ -927,29 +1146,23 @@ export default config;
 コンポーネントを変換してコンテンツを抽出するためにエクストラクタを実行します
 
 ```bash packageManager="npm"
-npx intlayer extract
+
 ```
 
 ```bash packageManager="pnpm"
-pnpm intlayer extract
+
 ```
 
 ```bash packageManager="yarn"
-yarn intlayer extract
-```
 
-```bash packageManager="bun"
-bun x intlayer extract
 ```
 
- </Tab>
- <Tab value='Babelコンパイラ'>
-
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+```bash packageManager="bun"
 
-`vite.config.ts` を更新して `intlayerCompiler` プラグインを含めます：
+</Tab>
+</Tabs>
 
-```ts fileName="vite.config.ts"
+bun x intlayer extract
 import { intlayer, intlayerCompiler } from "vite-intlayer";
 import { defineConfig } from "vite";
 import { devtools } from "@tanstack/devtools-vite";
@@ -972,34 +1185,31 @@ export default defineConfig({
 });
 ```
 
- </Tab>
-</Tabs>
+```bash packageManager="npm"
+npm run build # または npm run dev
+```
 
-</Step>
+```bash packageManager="pnpm"
+pnpm run build # または pnpm run dev
+```
 
-<Step number={16} title="サイトマップの生成">
+```bash packageManager="yarn"
+yarn build # Or yarn dev
+```
 
-Intlayer には、アプリケーションのサイトマップを簡単に作成できるサイトマップ ジェネレーターが組み込まれています。ローカライズされたルートを処理し、検索エンジンに必要なメタデータを追加します。
+```bash packageManager="bun"
 
-> Intlayer によって生成されたサイトマップは、`xhtml:link` 名前空間 (Hreflang XML Extensions) をサポートしています。生の URL のみを表示するデフォルトのサイトマップ ジェネレーターとは異なり、Intlayer はページのすべての言語バージョン (例: `/about`、`/about?lang=fr`、`/about?lang=es`) 間に必要な双方向リンクを自動的に作成します。これにより、検索エンジンが正しい言語バージョンを正しい対象者に正しくインデックス付けして提供できるようになります。
+---
 
-これを使用するには、まず `vite.config.ts` を構成して、ローカライズされたルートのプリレンダリングを有効にし、デフォルトの TanStack Start サイトマップ生成を無効にする必要があります。
+1. **BLOCK 2 of 3** - 英語（en）のソース
+2. **BLOCK 2 of 3** - 日本語（ja）の現在の翻訳
 
-```typescript fileName="vite.config.ts"
+その後、監査を実施し、完全に更新された日本語ファイルを返します。---
+
+bun run build # またはbun run dev
 import { localeFlatMap } from "intlayer";
 // ... その他のインポート
 
-export const pathList = ["", "/about", "/404"];
-
-const localizedPages = localeFlatMap(({ urlPrefix }) =>
-  pathList.map((path) => ({
-    path: `${urlPrefix}${path}`,
-    prerender: {
-      enabled: true,
-    },
-  }))
-);
-
 export default defineConfig({
   plugins: [
     // ... その他のプラグイン
@@ -1021,13 +1231,9 @@ export default defineConfig({
 
 次に、`generateSitemap` 関数を使用する `src/routes/sitemap[.]xml.ts` ルートを作成します。
 
-```typescript fileName="src/routes/sitemap[.]xml.ts"
-import { createFileRoute } from "@tanstack/react-router";
-import { generateSitemap } from "intlayer";
+````typescript fileName="src/routes/sitemap[.]xml.ts"
 
-const SITE_URL = (
-  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
-).replace(/\/$/, "");
+---
 
 export const Route = createFileRoute("/sitemap.xml")({
   server: {
@@ -1048,19 +1254,6 @@ export const Route = createFileRoute("/sitemap.xml")({
     },
   },
 });
-```
-
----
-
-</Step>
-
-<Step number={17} title="TypeScriptの構成">
-
-Intlayerはモジュール拡張機能を利用して、TypeScriptの利点を活用し、コードベースを強化します。
-
-TypeScriptの構成に自動生成された型が含まれていることを確認してください：
-
-```json5 fileName="tsconfig.json"
 {
   // ... 既存の構成
   include: [
@@ -1068,55 +1261,48 @@ TypeScriptの構成に自動生成された型が含まれていることを確
     ".intlayer/**/*.ts", // 自動生成された型を含める
   ],
 }
-```
 
----
+### Git Configuration
 
-</Step>
-
-</Steps>
-
-### Git構成
+Intlayerによって生成されたファイルを無視することをお勧めします。これにより、Gitリポジトリにコミットするのを避けることができます。
 
-Intlayerによって生成されたファイルは無視することをお勧めします。これにより、Gitリポジトリにそれらをコミットすることを避けることができます。
-
-これを行うには、`.gitignore`ファイルに以下の指示を追加できます：
+これを行うには、`.gitignore`ファイルに以下の指示を追加できます:
 
 ```plaintext fileName=".gitignore"
-# Intlayerによって生成されたファイルを無視する
+# Intlayerによって生成されたファイルを無視
 .intlayer
-```
+````
 
 ---
 
-## VS Code拡張機能
+## VS Code Extension
 
-Intlayerでの開発体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールできます。
+Intlayer での開発体験を向上させるために、公式の **Intlayer VS Code Extension** をインストールできます。
 
-[VS Code Marketplaceからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[VS Code Marketplace からインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-この拡張機能は以下を提供します：
+この拡張機能は以下を提供します:
 
-- 翻訳キーの**オートコンプリート**。
-- 翻訳の欠落に対する**リアルタイムのエラー検出**。
-- 翻訳されたコンテンツの**インラインプレビュー**。
-- 翻訳を簡単に作成および更新するための**クイックアクション**。
+- **翻訳キーの自動補完**。
+- **欠落している翻訳のリアルタイムエラー検出**。
+- **翻訳されたコンテンツのインラインプレビュー**。
+- **翻訳を簡単に作成・更新するクイックアクション**。
 
-拡張機能の使用方法の詳細については、[Intlayer VS Code拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。
+拡張機能の使用方法の詳細については、[Intlayer VS Code Extension ドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。
 
 ---
 
 ## さらに進む
 
-さらに進むには、[ビジュアルエディター](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)を使用してコンテンツを外部化したりできます。
+さらに進むために、[ビジュアルエディター](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/content_file.md)
-- [構成](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)
+- [Intlayer ドキュメント](https://intlayer.org)
+- [Tanstack Start ドキュメント](https://reactrouter.com/)
+- [useIntlayer hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useIntlayer.md)
+- [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md)
+- [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)
+- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)