@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/ja/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
-title: StorybookでIntlayerをセットアップする方法
-description: IntlayerとStorybookを使用して、デザインシステムを多言語化する方法を学びます - コンテンツ宣言のコンパイル、ロケールスイッチャーの追加、および任意の言語でのコンポーネントのプレビュー。
+updatedAt: 2026-05-31
+title: "Storybook i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）Storybookアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -31,16 +31,37 @@ history:
 
 <TOC/>
 
-## Intlayerとは？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer**は、現代的なウェブアプリケーションでの多言語サポートを簡素化するために設計された、革新的でオープンソースな国際化（i18n）ライブラリです。**コンポーネントレベル**で動作し、各コンポーネントが自らのコンテンツ宣言を所有するため、翻訳を使用するコードと同じ場所に配置できます。
+「storybook-react-i18next」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayerを使用すると、以下のことが可能になります：
+**ストーリーブックの全内容を網羅**
 
-- **宣言的な翻訳管理**: コンポーネントごとのコンテンツファイルを使用します。
-- **完全なTypeScriptサポート**: 自動生成された型とIDEのオートコンプリート。
-- **ランタイムでのロケール切り替え**: ページのリロードなし。
-- **自動翻訳**: 組み込みのAIプロバイダー統合。
+Intlayer は、**多言語ストーリー デコレーター**、**ロケール切り替え**、およびデザイン システム全体で国際化 (i18n) を拡張するために必要なすべての機能を提供することにより、Storybook と完全に連携するように最適化されています。
+
+**バンドルサイズ**
+
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
+
+**保守性**
+
+アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
+
+**AI エージェント**
+
+コンテンツを同じ場所に配置すると、大規模言語モデル (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)** などのツール スイートも付属しています。および **[エージェント スキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
+
+**オートメーション**
+
+AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
+
+**パフォーマンス**
+
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
+
+**非開発によるスケーリング**
+
+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)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
 ---
 
@@ -59,7 +80,9 @@ Storybookは、UIコンポーネントを分離して開発およびドキュメ
 <Tabs>
 <Tab value="Vite Setup">
 
-### ステップ 1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +112,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### ステップ 2: Intlayer設定の作成
+</Step>
+
+<Step number={2} title="Intlayer設定の作成">
 
 プロジェクトのルート（またはデザインシステムパッケージ内）に `intlayer.config.ts` を作成します：
 
@@ -118,7 +143,9 @@ export default config;
 
 ---
 
-### ステップ 3: StorybookにViteプラグインを追加する
+</Step>
+
+<Step number={3} title="StorybookにViteプラグインを追加する">
 
 Storybookの `viteFinal` フックを使用して、内部のVite設定を拡張できます。そこで `intlayer()` プラグインをインポートして追加します：
 
@@ -159,7 +186,9 @@ export default config;
 
 ---
 
-### ステップ 4: `IntlayerProvider` デコレーターとロケールツールバーの追加
+</Step>
+
+<Step number={4} title="`IntlayerProvider` デコレーターとロケールツールバーの追加">
 
 Storybookの `preview` ファイルは、すべてのストーリーを `IntlayerProvider` でラップし、ツールバーにロケールスイッチャーを表示するのに最適な場所です：
 
@@ -216,7 +245,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### ステップ 1: 依存関係のインストール
+</Step>
+
+<Step number={1} title="依存関係のインストール">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +271,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### ステップ 2: Intlayer設定の作成
+</Step>
+
+<Step number={2} title="Intlayer設定の作成">
 
 プロジェクトのルートに `intlayer.config.ts` を作成します：
 
@@ -262,7 +295,9 @@ export default config;
 
 ---
 
-### ステップ 3: StorybookのWebpackを設定する
+</Step>
+
+<Step number={3} title="StorybookのWebpackを設定する">
 
 WebpackベースのStorybookセットアップ（例: `@storybook/react-webpack5`）の場合、`webpackFinal` を介してwebpack設定を拡張し、Intlayerエイリアスとローダーを追加します：
 
@@ -289,7 +324,9 @@ export default config;
 
 ---
 
-### ステップ 4: `IntlayerProvider` デコレーターとロケールツールバーの追加
+</Step>
+
+<Step number={4} title="`IntlayerProvider` デコレーターとロケールツールバーの追加">
 
 Viteセットアップと同様に、デコレーターとグローバルロケール型を `.storybook/preview.tsx` に追加します：
 
@@ -335,6 +372,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## コンテンツの宣言
 
 各コンポーネントの隣に `*.content.ts` ファイルを作成します。Intlayerはコンパイル中に自動的にこれを検出します。

package/docs/ja/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - SvelteKitアプリの翻訳方法 2026
-description: SvelteKitのウェブサイトを多言語対応にする方法を紹介します。Server-Side Rendering（SSR）を使って国際化（i18n）および翻訳を行うためのドキュメントに従ってください。
+updatedAt: 2026-05-31
+title: "SvelteKit i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）SvelteKitアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -59,16 +59,37 @@ history:
 
 <TOC/>
 
-## Intlayerとは何ですか？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer**は、モダンなウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。**SvelteKit**のサーバーサイドレンダリング（SSR）機能とシームレスに連携します。
+「svelte-i18n」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayerを使うことで、以下が可能になります：
+**SvelteKit を完全にカバー**
 
-- **コンポーネントレベルで宣言的な辞書を使い、翻訳を簡単に管理**できます。
-- **メタデータ、ルート、コンテンツを動的にローカライズ**できます。
-- **自動生成される型情報でTypeScriptのサポートを保証**します。
-- **SvelteKitのSSRを活用してSEOに優しい国際化を実現**します。
+Intlayer は、**多言語ルーティング**、**SSR サポート**、およびスケーリング国際化 (i18n) に必要なすべての機能を提供することにより、SvelteKit と完全に連携するように最適化されています。
+
+**バンドルサイズ**
+
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
+
+**保守性**
+
+アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
+
+**AI エージェント**
+
+コンテンツを同じ場所に配置すると、大規模言語モデル (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)** などのツール スイートも付属しています。および **[エージェント スキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
+
+**オートメーション**
+
+AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
+
+**パフォーマンス**
+
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
+
+**非開発によるスケーリング**
+
+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)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
 ---
 
@@ -116,7 +137,9 @@ Intlayerを使うことで、以下が可能になります：
 └── vite.config.ts
 ```
 
-### (オプション) ステップ 1 : コンポーネントのコンテンツを抽出する
+<Steps>
+
+<Step number={1} title="コンポーネントのコンテンツを抽出する" isOptional={true}>
 
 既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
 
@@ -228,6 +251,9 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
 
 ### さらに進む
 

package/docs/ja/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - 2026年にSolid.jsを使用してTanstack Startアプリを翻訳する方法
-description: IntlayerとSolid.jsを使用して、Tanstack Startアプリケーションに国際化（i18n）を追加する方法を学びます。この包括的なガイドに従って、ロケール対応ルーティングを備えた多言語アプリを作成してください。
+updatedAt: 2026-05-31
+title: "TanStack Start + Solid i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）TanStack Start + Solidアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -38,17 +38,37 @@ history:
 
 このガイドでは、Solid.jsを使用したTanstack Startプロジェクトにおいて、Intlayerを統合してシームレスな国際化、ロケール対応ルーティング、TypeScriptサポート、および現代的な開発手法を実現する方法を説明します。
 
-## Intlayerとは？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer**は、現代的なウェブアプリケーションにおける多言語サポートを簡素化するために設計された、革新的でオープンソースの国際化（i18n）ライブラリです。
+「react-i18next」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayerを使用すると、以下のことが可能になります：
+**TanStack Start を完全にカバー**
 
-- コンポーネントレベルで宣言的な辞書を使用して、**翻訳を簡単に管理**できます。
-- メタデータ、ルート、コンテンツを**動的にローカライズ**できます。
-- 自動生成された型により**TypeScriptサポートを確保**し、オートコンプリートとエラー検出を向上させます。
-- 動的なロケール検出や切り替えなどの**高度な機能の恩恵**を受けられます。
-- Tanstack Startのファイルベースルーティングシステムを使用して、**ロケール対応ルーティングを有効化**できます。
+Intlayer は、**多言語ルーティング**、**サイトマップ**、および国際化の拡張 (i18n) に必要なすべての機能を提供することにより、TanStack Start および Solid と完全に連携するように最適化されています。
+
+**バンドルサイズ**
+
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
+
+**保守性**
+
+アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
+
+**AI エージェント**
+
+コンテンツを同じ場所に配置すると、大規模言語モデル (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)** などのツール スイートも付属しています。および **[エージェント スキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
+
+**オートメーション**
+
+AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
+
+**パフォーマンス**
+
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
+
+**非開発によるスケーリング**
+
+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)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
 ---
 
@@ -86,11 +106,15 @@ Intlayerを使用すると、以下のことが可能になります：
 
 GitHubで[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-tanstack-start-solid-template)を確認してください。
 
-### ステップ 1: プロジェクト作成
+<Steps>
+
+<Step number={1} title="プロジェクト作成">
 
 まず、TanStack Startウェブサイトの[新しいプロジェクトを開始](https://tanstack.com/start/latest/docs/framework/solid/quick-start)ガイドに従って、新しいTanStack Startプロジェクトを作成します。
 
-### ステップ 2: Intlayerパッケージのインストール
+</Step>
+
+<Step number={2} title="Intlayerパッケージのインストール">
 
 お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
 
@@ -128,7 +152,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayerを[Viteバンドラー](https://vite.dev/guide/why.html#why-bundle-for-production)と統合するためのViteプラグイン、およびユーザーの優先ロケールの検出、Cookie管理、URLリダイレクトを処理するためのミドルウェアが含まれています。
 
-### ステップ 3: プロジェクトの構成
+</Step>
+
+<Step number={3} title="プロジェクトの構成">
 
 アプリケーションの言語を構成するための構成ファイルを作成します：
 
@@ -149,7 +175,9 @@ export default config;
 
 > この構成ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクト、Cookie名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、[構成ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-### ステップ 4: Vite構成にIntlayerを統合する
+</Step>
+
+<Step number={4} title="Vite構成にIntlayerを統合する">
 
 Vite構成にintlayerプラグインを追加します：
 
@@ -177,7 +205,9 @@ export default defineConfig({
 
 > `intlayer()` Viteプラグインは、IntlayerをViteと統合するために使用されます。コンテンツ宣言ファイルの構築を確実にし、開発モードでそれらを監視します。Viteアプリケーション内でIntlayer環境変数を定義します。さらに、パフォーマンスを最適化するためのエイリアスを提供します。
 
-### ステップ 5: ルートレイアウトの作成
+</Step>
+
+<Step number={5} title="ルートレイアウトの作成">
 
 現在選択されているロケールを検出するために `useParams` を使用し、`html` タグに `lang` および `dir` 属性を設定することで、国際化をサポートするようにルートレイアウトを構成します。
 
@@ -218,7 +248,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### ステップ 6: ロケールレイアウトの作成 (任意)
+</Step>
+
+<Step number={6} title="ロケールレイアウトの作成">
 
 ロケールプレフィックスを処理し、検証を実行するレイアウトを作成します。このレイアウトにより、有効なロケールのみが処理されるようになります。
 
@@ -253,7 +285,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > `'prefix-all'` モードの場合、代わりにスロットを `$locale` に切り替えることをお勧めします。
 > `'no-prefix'` または `'search-params'` モードの場合、スロットを完全に削除できます。
 
-### ステップ 7: コンテンツの宣言
+</Step>
+
+<Step number={7} title="コンテンツの宣言">
 
 翻訳を保存するためのコンテンツ宣言を作成および管理します：
 
@@ -299,7 +333,9 @@ export default appContent;
 
 > 詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。
 
-### ステップ 8: ロケール対応のコンポーネントとフックを利用する
+</Step>
+
+<Step number={8} title="ロケール対応のコンポーネントとフックを利用する">
 
 ロケール対応のナビゲーションのために `LocalizedLink` コンポーネントを作成します：
 
@@ -378,7 +414,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### ステップ 9: ページでIntlayerを活用する
+</Step>
+
+<Step number={9} title="ページでIntlayerを活用する">
 
 アプリケーション全体でコンテンツ辞書にアクセスします：
 
@@ -421,7 +459,9 @@ function RouteComponent() {
 >
 > `useIntlayer` フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/solid-intlayer/useIntlayer.md)を参照してください。
 
-### ステップ 10: ロケール切り替えコンポーネントの作成
+</Step>
+
+<Step number={10} title="ロケール切り替えコンポーネントの作成">
 
 ユーザーが言語を変更できるようにするコンポーネントを作成します：
 
@@ -465,7 +505,9 @@ export default LocaleSwitcher;
 >
 > `useLocale` フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/solid-intlayer/useLocale.md)を参照してください。
 
-### ステップ 11: HTML属性の管理
+</Step>
+
+<Step number={11} title="HTML属性の管理">
 
 ステップ 5 で見たように、ルートコンポーネントで `useParams` を使用して `html` タグの `lang` および `dir` 属性を管理できます。これにより、サーバーとクライアントで正しい属性が設定されるようになります。
 
@@ -484,7 +526,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### ステップ 12: ミドルウェアの追加 (任意)
+</Step>
+
+<Step number={12} title="ミドルウェアの追加">
 
 `intlayerProxy` を使用して、アプリケーションにサーバーサイドのルーティングを追加することもできます。このプラグインはURLに基づいて現在のロケールを自動的に検出し、適切なロケールCookieを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザ言語設定に基づいて最も適切なロケールを決定します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
 
@@ -515,7 +559,9 @@ export default defineConfig({
 
 ---
 
-### ステップ 12: メタデータの国際化 (任意)
+</Step>
+
+<Step number={12} title="メタデータの国際化">
 
 ロケール対応のメタデータのために、`head` ローダー内で `getIntlayer` 関数を使用してコンテンツ辞書にアクセスすることもできます：
 
@@ -562,7 +608,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### ステップ 13: サーバーアクションでロケールを取得する (任意)
+</Step>
+
+<Step number={13} title="サーバーアクションでロケールを取得する">
 
 サーバーアクションやAPIエンドポイント内から現在のロケールにアクセスしたい場合があります。
 これを行うには、`intlayer` から `getLocale` ヘルパーを使用します。
@@ -599,7 +647,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### ステップ 14: 404ページを管理する (任意)
+</Step>
+
+<Step number={14} title="404ページを管理する">
 
 ユーザーが存在しないページにアクセスしたときに、カスタム 404 ページを表示できます。ロケールプレフィックスは、404 ページがトリガーされる方法に影響を与える可能性があります。
 
@@ -673,7 +723,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (任意) ステップ 15: コンポーネントのコンテンツを抽出する
+</Step>
+
+<Step number={15} title="コンポーネントのコンテンツを抽出する" isOptional={true}>
 
 既存のコードベースがある場合、数千ものファイルを変換するのは時間がかかる可能性があります。
 
@@ -786,7 +838,9 @@ bun run build # または bun run dev
 
 ---
 
-### ステップ 16: サイトマップの生成 (オプション)
+</Step>
+
+<Step number={16} title="サイトマップの生成">
 
 Intlayer には、アプリケーションのサイトマップを簡単に作成できるサイトマップ ジェネレーターが組み込まれています。ローカライズされたルートを処理し、検索エンジンに必要なメタデータを追加します。
 
@@ -861,7 +915,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### ステップ 17: TypeScriptの構成 (任意)
+</Step>
+
+<Step number={17} title="TypeScriptの構成">
 
 Intlayerは、TypeScriptの利点を活用し、コードベースをより強固にするために、モジュール拡張（module augmentation）を使用します。
 
@@ -879,6 +935,10 @@ TypeScript構成に自動生成された型が含まれていることを確認
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Git構成
 
 Intlayerによって生成されたファイルを無視することをお勧めします。これにより、それらをGitリポジトリにコミットすることを避けることができます。