@intlayer/docs 9.3.0 → 9.3.2

package/docs/ja/interest_of_intlayer.md

@@ -188,7 +188,7 @@ export const ComponentExample = () => {
 このアプローチにより、以下のことが可能になります：
 
 1. **開発スピードの向上**
-   - `.content.{{ts|mjs|cjs|json}}`ファイルはVSCode拡張機能を使用して作成できます
+   - `.content.{ts|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml}`ファイルはVSCode拡張機能を使用して作成できます
    - IDEのAI補完ツール（GitHub Copilotなど）がコンテンツの宣言を支援し、コピー＆ペーストを削減します
 
 2. **コードベースのクリーンアップ**
@@ -212,27 +212,27 @@ export const ComponentExample = () => {
 
 ## Intlayerの追加機能
 
-| 機能                                                                                                                      | 説明                                                                                                                                                                                                                                                                                                                                                                                 |
-| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **クロスフレームワークサポート**<br><br>Intlayerは、Next.js、React、Vite、Vue.js、Nuxt、Preact、Expressなど、すべての主要なフレームワークやライブラリと互換性があります。                                                                                                                                                                                                            |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true)       | **JavaScriptによるコンテンツ管理**<br><br>JavaScriptの柔軟性を活かして、コンテンツを効率的に定義および管理します。<br><br> - [コンテンツ宣言](https://intlayer.org/doc/concept/content)                                                                                                                                                                                              |
-| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700">  | **コンパイラ**<br><br>Intlayerコンパイラは、コンポーネントからコンテンツを自動的に抽出し、辞書ファイルを生成します。<br><br> - [コンパイラ](https://intlayer.org/doc/compiler)                                                                                                                                                                                                       |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **ロケールごとのコンテンツ宣言ファイル**<br><br>自動生成の前にコンテンツを一度宣言するだけで、開発速度を向上させます。<br><br> - [ロケールごとのコンテンツ宣言ファイル](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                            |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **型安全な環境**<br><br>TypeScriptを活用して、コンテンツ定義とコードにエラーがないことを保証し、IDEの自動補完も享受できます。<br><br> - [TypeScript設定](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                                                   |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **シンプルなセットアップ**<br><br>最小限の設定で迅速に稼働させることができます。国際化、ルーティング、AI、ビルド、コンテンツ処理の設定を簡単に調整できます。<br><br> - [Next.js統合の探索](https://intlayer.org/doc/environment/nextjs)                                                                                                                                              |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **シンプルなコンテンツ取得**<br><br>コンテンツの各部分で`t`関数を呼び出す必要はありません。単一のフックを使用して、すべてのコンテンツを直接取得できます。<br><br> - [React統合](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                               |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **一貫したサーバーコンポーネントの実装**<br><br>Next.jsサーバーコンポーネントに最適で、クライアントコンポーネントとサーバーコンポーネントの両方で同じ実装を使用でき、各サーバーコンポーネントで`t`関数を渡す必要はありません。<br><br> - [サーバーコンポーネント](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                   |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **整理されたコードベース**<br><br>コードベースを整理された状態に保ちます：同じフォルダ内に1コンポーネント＝1辞書。それぞれのコンポーネントの近くに翻訳を配置することで、メンテナンス性と明瞭性が向上します。<br><br> - [Intlayerの仕組み](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                       |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **強化されたルーティング**<br><br>アプリルーティングの完全なサポート。Next.js、React、Vite、Vue.jsなどの複雑なアプリケーション構造にシームレスに適応します。<br><br> - [Next.js統合の探索](https://intlayer.org/doc/environment/nextjs)                                                                                                                                              |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Markdownサポート**<br><br>プライバシーポリシーやドキュメントなどの多言語コンテンツのために、ローカルファイルやリモートのMarkdownをインポートして解釈します。コード内でMarkdownメタデータを解釈し、アクセス可能にします。<br><br> - [コンテンツファイル](https://intlayer.org/doc/concept/content/file)                                                                             |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **無料のビジュアルエディタとCMS**<br><br>コンテンツライター向けに無料のビジュアルエディタとCMSが利用可能で、ローカリゼーションプラットフォームの必要性を排除します。Gitを使用してコンテンツを同期させるか、CMSで部分的または完全に外部管理します。<br><br> - [Intlayerエディタ](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms) |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Tree-shakableコンテンツ**<br><br>最終バンドルのサイズを削減するTree-shakableコンテンツ。コンポーネントごとにコンテンツを読み込み、未使用のコンテンツをバンドルから除外します。アプリの読み込み効率を高めるための遅延読み込み（lazy loading）をサポートします。<br><br> - [アプリビルドの最適化](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)        |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **静的レンダリング**<br><br>静的レンダリングをブロックしません。<br><br> - [Next.js統合](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **AI支援の翻訳**<br><br>独自のAIプロバイダー/APIキーを使用し、Intlayerの高度なAI翻訳ツールを使用してワンクリックでウェブサイトを231言語に翻訳します。<br><br> - [CI/CD統合](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [自動入力](https://intlayer.org/doc/concept/auto-fill)                                        |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **MCPサーバー統合**<br><br>IDE自動化のためのMCP（Model Context Protocol）サーバーを提供し、開発環境内で直接シームレスなコンテンツ管理とi18nワークフローを可能にします。<br><br> - [MCPサーバー](https://github.com/aymericzip/intlayer/blob/main/docs/ja/mcp_server.md)                                                                                                              |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **VSCode拡張機能**<br><br>Intlayerは、コンテンツや翻訳の管理、辞書の作成、コンテンツの翻訳などを支援するVSCode拡張機能を提供します。<br><br> - [VSCode拡張機能](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                          |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **相互運用性**<br><br>react-i18next、next-i18next、next-intl、およびreact-intlとの相互運用を可能にします。<br><br> - [Intlayerとreact-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayerとnext-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayerとnext-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)                |
-| 翻訳漏れのテスト（CLI/CI）                                                                                                | ✅ CLI: npx intlayer content test（CIフレンドリーな監査）                                                                                                                                                                                                                                                                                                                            |
+| 機能                                                                                                                      | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **クロスフレームワークサポート**<br><br>Intlayerは、Next.js、React、Vite、Vue.js、Nuxt、Preact、Expressなど、すべての主要なフレームワークやライブラリと互換性があります。                                                                                                                                                                                                                                                                        |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true)       | **JavaScriptによるコンテンツ管理**<br><br>JavaScriptの柔軟性を活かして、コンテンツを効率的に定義および管理します。<br><br> - [コンテンツ宣言](https://intlayer.org/doc/concept/content)                                                                                                                                                                                                                                                          |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700">  | **コンパイラ**<br><br>Intlayerコンパイラは、コンポーネントからコンテンツを自動的に抽出し、辞書ファイルを生成します。<br><br> - [コンパイラ](https://intlayer.org/doc/compiler)                                                                                                                                                                                                                                                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **ロケールごとのコンテンツ宣言ファイル**<br><br>自動生成の前にコンテンツを一度宣言するだけで、開発速度を向上させます。<br><br> - [ロケールごとのコンテンツ宣言ファイル](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                                                                        |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **型安全な環境**<br><br>TypeScriptを活用して、コンテンツ定義とコードにエラーがないことを保証し、IDEの自動補完も享受できます。<br><br> - [TypeScript設定](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                                                                                                               |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **シンプルなセットアップ**<br><br>最小限の設定で迅速に稼働させることができます。国際化、ルーティング、AI、ビルド、コンテンツ処理の設定を簡単に調整できます。<br><br> - [Next.js統合の探索](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                          |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **シンプルなコンテンツ取得**<br><br>コンテンツの各部分で`t`関数を呼び出す必要はありません。単一のフックを使用して、すべてのコンテンツを直接取得できます。<br><br> - [React統合](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                                                           |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **一貫したサーバーコンポーネントの実装**<br><br>Next.jsサーバーコンポーネントに最適で、クライアントコンポーネントとサーバーコンポーネントの両方で同じ実装を使用でき、各サーバーコンポーネントで`t`関数を渡す必要はありません。<br><br> - [サーバーコンポーネント](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                                                               |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **整理されたコードベース**<br><br>コードベースを整理された状態に保ちます：同じフォルダ内に1コンポーネント＝1辞書。それぞれのコンポーネントの近くに翻訳を配置することで、メンテナンス性と明瞭性が向上します。<br><br> - [Intlayerの仕組み](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                                                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **強化されたルーティング**<br><br>アプリルーティングの完全なサポート。Next.js、React、Vite、Vue.jsなどの複雑なアプリケーション構造にシームレスに適応します。<br><br> - [Next.js統合の探索](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                          |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Markdownサポート**<br><br>プライバシーポリシーやドキュメントなどの多言語コンテンツのために、ローカルファイルやリモートのMarkdownをインポートして解釈します。コード内でMarkdownメタデータを解釈し、アクセス可能にします。<br><br> - [コンテンツファイル](https://intlayer.org/doc/concept/content/file)                                                                                                                                         |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **無料のビジュアルエディタとCMS**<br><br>コンテンツライター向けに無料のビジュアルエディタとCMSが利用可能で、ローカリゼーションプラットフォームの必要性を排除します。Gitを使用してコンテンツを同期させるか、CMSで部分的または完全に外部管理します。<br><br> - [Intlayerエディタ](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms)                                                             |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Tree-shakableコンテンツ**<br><br>最終バンドルのサイズを削減するTree-shakableコンテンツ。コンポーネントごとにコンテンツを読み込み、未使用のコンテンツをバンドルから除外します。アプリの読み込み効率を高めるための遅延読み込み（lazy loading）をサポートします。<br><br> - [アプリビルドの最適化](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **静的レンダリング**<br><br>静的レンダリングをブロックしません。<br><br> - [Next.js統合](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                                            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **AI支援の翻訳**<br><br>独自のAIプロバイダー/APIキーを使用し、Intlayerの高度なAI翻訳ツールを使用してワンクリックでウェブサイトを231言語に翻訳します。<br><br> - [CI/CD統合](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [自動入力](https://intlayer.org/doc/concept/auto-fill)                                                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **MCPサーバー統合**<br><br>IDE自動化のためのMCP（Model Context Protocol）サーバーを提供し、開発環境内で直接シームレスなコンテンツ管理とi18nワークフローを可能にします。<br><br> - [MCPサーバー](https://github.com/aymericzip/intlayer/blob/main/docs/ja/mcp_server.md)                                                                                                                                                                          |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **VSCode拡張機能**<br><br>Intlayerは、コンテンツや翻訳の管理、辞書の作成、コンテンツの翻訳などを支援するVSCode拡張機能を提供します。<br><br> - [VSCode拡張機能](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                                                                                      |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **相互運用性**<br><br>react-i18next、next-i18next、next-intl、およびreact-intlとの相互運用を可能にします。<br><br> - [Intlayerとreact-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayerとnext-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayerとnext-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) <br> - [Intlayer の互換アダプター](https://intlayer.org/doc/compatibility) |
+| 翻訳漏れのテスト（CLI/CI）                                                                                                | ✅ CLI: npx intlayer content test（CIフレンドリーな監査）                                                                                                                                                                                                                                                                                                                                                                                        |
 
 ## Intlayerと他のソリューションの比較
 
@@ -271,3 +271,5 @@ GitHubスター数は、プロジェクトの知名度、コミュニティか
 `intlayer`は、`react-intl`、`react-i18next`、`next-intl`、`next-i18next`、`vue-i18n`の名前空間の管理にも役立ちます。
 
 `intlayer`を使用すると、お気に入りのi18nライブラリの形式でコンテンツを宣言でき、intlayerは任意の場所に名前空間を生成します（例：`/messages/{{locale}}/{{namespace}}.json`）。
+
+現在の i18n ライブラリの API を使い続けたい場合、`intlayer` は **互換アダプター（compat adapters）** も提供しています。これは `react-i18next`、`next-intl`、`react-intl`、`vue-i18n` などとまったく同じ API を公開しつつ、内容は Intlayer の辞書から提供されるパッケージです。これにより、コードを書き直すことなく段階的に移行できます。[互換アダプターのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md)をご覧ください。

package/docs/ja/intlayer_with_react_router_v7.md

@@ -141,152 +141,7 @@ This comprehensive guide provides everything you need to integrate Intlayer with
 
 <Steps>
 
-<Step number={11} title="ミドルウェアを追加する（オプション）">
-
-`intlayerProxy` を使用して、アプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインは、URL に基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最も適切なロケールを判断します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
-
-> `intlayerProxy` を本番環境で使用するには、`vite-intlayer` パッケージを `devDependencies` から `dependencies` に切り替える必要があることに注意してください。
-
-```typescript {3,7} fileName="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({
-      proxy: {
-        ignore: (req) => req.url?.startsWith("/api"),
-      },
-    }),
-  ],
-});
-```
-
-</Step>
-
-<Step number={12} title="コンポーネントのコンテンツを抽出する" isOptional={true}>
-
-既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
-
-このプロセスを容易にするために、Intlayerは、コンポーネントを変換しコンテンツを抽出するための [コンパイラ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compiler.md) / [エクストラクタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/extract.md) を提案しています。
-
-セットアップするには、`intlayer.config.ts` ファイルに `compiler` セクションを追加します。
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... 他の構成
-  compiler: {
-    /**
-     * コンパイラを有効にするかどうかを指定します。
-     */
-    enabled: true,
-
-    /**
-     * 出力ファイルのパスを定義します。
-     */
-    output: ({ fileName, extension }) => `./${fileName}${extension}`,
-
-    /**
-     * 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
-     */
-    saveComponents: false,
-
-    /**
-     * 辞書キーの接頭辞
-     */
-    dictionaryKeyPrefix: "",
-  },
-};
-
-export default config;
-```
-
-<Tabs>
- <Tab value='抽出コマンド'>
-
-コンポーネントを変換してコンテンツを抽出するためにエクストラクタを実行します
-
-```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="npm"
-npm install @intlayer/babel --save-dev
-```
-
-```bash packageManager="pnpm"
-pnpm add @intlayer/babel --save-dev
-```
-
-```bash packageManager="yarn"
-yarn add @intlayer/babel --save-dev
-```
-
-```bash packageManager="bun"
-bun add @intlayer/babel --dev
-```
-
-```js fileName="babel.config.js"
-const {
-  intlayerExtractBabelPlugin,
-  getExtractPluginOptions,
-} = require("@intlayer/babel");
-
-module.exports = {
-  presets: ["next/babel"],
-  plugins: [
-    // コンポーネントから辞書へコンテンツを抽出する
-    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
-  ],
-};
-```
-
-```bash packageManager="npm"
-npm run build # または npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # または pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # または yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Or bun run dev
-```
-
- </Tab>
-</Tabs>
-
----
-
-</Step>
-
-</Steps>
+<Step number={5} title="ルートレイアウトの作成">
 
 #### Root Layout
 

package/docs/ja/intlayer_with_tanstack+solid.md

@@ -237,19 +237,21 @@ import {
   HeadContent,
   Scripts,
   createRootRouteWithContext,
+  getRouteApi,
 } from "@tanstack/solid-router";
 import { HydrationScript } from "solid-js/web";
 import { Suspense, type ParentComponent } from "solid-js";
 import { IntlayerProvider } from "solid-intlayer";
 import { defaultLocale, getHTMLTextDir } from "intlayer";
-import { Route as LocaleRoute } from "./{-$locale}/route";
+
+const localeRoute = getRouteApi("/{-$locale}");
 
 export const Route = createRootRouteWithContext()({
   shellComponent: RootComponent,
 });
 
 const RootComponent: ParentComponent = (props) => {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params()?.locale ?? defaultLocale;
 
   return (
@@ -534,7 +536,7 @@ export default LocaleSwitcher;
 
 ```tsx fileName="src/routes/__root.tsx"
 const RootComponent: ParentComponent = (props) => {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params()?.locale ?? defaultLocale;
 
   return (

package/docs/ja/intlayer_with_tanstack.md

@@ -257,13 +257,15 @@ export default config;
 ```tsx fileName="src/routes/__root.tsx"
 import {
   createRootRouteWithContext,
+  getRouteApi,
   HeadContent,
   Scripts,
 } from "@tanstack/react-router";
 import { defaultLocale, getHTMLTextDir } from "intlayer";
 import { type ReactNode } from "react";
 import { IntlayerProvider } from "react-intlayer";
-import { Route as LocaleRoute } from "./{-$locale}/route";
+
+const localeRoute = getRouteApi("/{-$locale}");
 
 export const Route = createRootRouteWithContext<{}>()({
   head: () => ({
@@ -285,7 +287,7 @@ export const Route = createRootRouteWithContext<{}>()({
 });
 
 function RootDocument({ children }: { children: ReactNode }) {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params?.locale ?? defaultLocale;
 
   return (
@@ -659,7 +661,7 @@ export const LocaleSwitcher: FC = () => {
 
 ```tsx fileName="src/routes/__root.tsx"
 function RootDocument({ children }: { children: ReactNode }) {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params?.locale ?? defaultLocale;
 
   return (

package/docs/ja/intlayer_with_vite+react.md

@@ -75,7 +75,7 @@ Intlayer は単なる i18n ソリューションではなく、**自己ホスト
 
 <Tabs defaultTab="video">
   <Tab label="ビデオ" value="video">
-  
+
 <iframe title="ViteとReactに最適なi18nソリューション？Intlayerを発見" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
 
   </Tab>
@@ -105,6 +105,10 @@ Intlayer は単なる i18n ソリューションではなく、**自己ホスト
 
 GitHubの[Application Template](https://github.com/aymericzip/intlayer-vite-react-template)を参照してください。
 
+<Steps>
+
+<Step number={9} title="HTMLの言語属性と方向属性を切り替える" isOptional={true}>
+
 #### フックの実装
 
 HTML属性を管理するためのカスタムフックを作成します。このフックはロケールの変更を監視し、それに応じて属性を更新します: