@intlayer/docs 9.0.0-canary.3 → 9.0.0-canary.5

package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md

@@ -65,14 +65,6 @@ Next.js向けの3つのi18nオプション、next-i18next、next-intl、Intlayer
 
 ## 並列機能比較（Next.jsに特化）
 
-| 機能 | `next-intlayer` (Intlayer) | `next-intl` | `next-i18next` |
-
-> バッジは自動的に更新されます。スナップショットは時間とともに変化します。
-
----
-
-## 並列機能比較（Next.jsに特化）
-
 | 機能                                                         | `next-intlayer` (Intlayer)                                                                                                     | `next-intl`                                                                                                          | `next-i18next`                                                                                                       |
 | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
 | **コンポーネント近くの翻訳**                                 | ✅ はい、各コンポーネントにコンテンツが配置されています                                                                        | ❌ いいえ                                                                                                            | ❌ いいえ                                                                                                            |
@@ -212,24 +204,6 @@ Next.jsは国際化されたルーティング（例：ロケールセグメン
 
 ---
 
-## 翻訳欠落の取り扱い
-
-**next-intl**
-
-- **実行時のフォールバック**に依存（例：キーやデフォルトロケールを表示）。ビルドは失敗しません。
-
-**next-i18next**
-
-- **実行時のフォールバック**に依存（例：キーやデフォルトロケールを表示）。ビルドは失敗しません。
-
-**intlayer**
-
-- **ビルド時検出**により、ロケールやキーの欠落に対して**警告/エラー**を出します。
-
-**なぜ重要か:** ビルド時に欠落を検出することで、本番環境での「謎の文字列」発生を防ぎ、厳格なリリースゲートに適合します。
-
----
-
 ## ルーティング、ミドルウェア & URL戦略
 
 <Columns>
@@ -1183,6 +1157,127 @@ export default robots;
 
 ---
 
+### ロケール ルーティング用ミドルウェア
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+ロケール検出とルーティングを処理するミドルウェアを追加します:
+
+```ts fileName="src/middleware.ts"
+import { NextResponse, type NextRequest } from "next/server";
+import { defaultLocale, locales } from "@/i18n.config";
+
+const PUBLIC_FILE = /\.[^/]+$/; // 拡張子を持つファイルを除外
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  if (
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/api") ||
+    pathname.startsWith("/static") ||
+    PUBLIC_FILE.test(pathname)
+  ) {
+    return;
+  }
+
+  const hasLocale = locales.some(
+    (l) => pathname === "/" + l || pathname.startsWith("/" + l + "/")
+  );
+  if (!hasLocale) {
+    const locale = defaultLocale;
+    const url = request.nextUrl.clone();
+    url.pathname = "/" + locale + (pathname === "/" ? "" : pathname);
+    return NextResponse.redirect(url);
+  }
+}
+
+export const config = {
+  matcher: [
+    // これらで始まるパスとファイル拡張子を持つファイルを除いたすべてのパスにマッチ
+    "/((?!api|_next|static|.*\\..*).*)",
+  ],
+};
+```
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+ロケール検出とルーティングを処理するミドルウェアを追加します:
+
+```ts fileName="src/middleware.ts"
+import createMiddleware from "next-intl/middleware";
+import { locales, defaultLocale } from "@/i18n";
+
+export default createMiddleware({
+  locales: [...locales],
+  defaultLocale,
+  localeDetection: true,
+});
+
+export const config = {
+  // API、Next内部、静的アセットをスキップ
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
+};
+```
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+Intlayerは`next-intlayer`パッケージの設定を通じて、組み込みのミドルウェア処理を提供します。
+
+```ts fileName="src/middleware.ts"
+import { intlayerProxy } from "next-intlayer/proxy";
+
+export const middleware = intlayerProxy();
+
+// このミドルウェアをappディレクトリ内のファイルにのみ適用
+export const config = {
+  matcher: "/((?!api|_next|static|.*\\..*).*)",
+};
+```
+
+ミドルウェアのセットアップは`intlayer.config.ts`ファイルで一元管理されます。
+
+  </Tab>
+</Tabs>
+
+### セットアップチェックリストとベストプラクティス
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+- `src/app/[locale]/layout.tsx` のルート `<html>` に `lang` と `dir` が設定されていることを確認してください。
+- `src/locales/<locale>/` の下に翻訳を名前空間に分割してください（例：`common.json`、`about.json`）。
+- クライアントコンポーネントで `useTranslation('<ns>')` を使用して必要な名前空間のみをロードし、`I18nProvider` を同じ名前空間でスコープしてください。
+- 可能な限りページを静的に保つ：ページで `export const dynamic = 'force-static'` をエクスポートし、`dynamicParams = false` を設定して `generateStaticParams` を実装してください。
+- クライアント境界の下にネストされた同期サーバーコンポーネントを使用して、既に計算された文字列または `t` 関数と `locale` を渡してください。
+- SEO については、メタデータで `alternates.languages` を設定し、`sitemap.ts` でローカライズされた URL をリストアップし、`robots.ts` で重複したローカライズされたルートを禁止してください。
+- ロケール対応のフォーマッタ（例：`Intl.NumberFormat(locale)`）を優先し、React < 19 を使用している場合はクライアントでメモ化してください。
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+- **html の `lang` と `dir` を設定する**：`src/app/[locale]/layout.tsx` で `getLocaleDirection(locale)` を使用して `dir` を計算し、`<html lang={locale} dir={dir}>` を設定してください。
+- **メッセージを名前空間で分割する**：ロケールと名前空間ごとに JSON を整理してください（例：`common.json`、`about.json`）。
+- **クライアントペイロードを最小化する**：ページで、必要な名前空間のみを `NextIntlClientProvider` に送信してください（例：`pick(messages, ['common', 'about'])`）。
+- **静的ページを優先する**：`export const dynamic = 'force-static'` をエクスポートし、すべての `locales` に対して静的パラメータを生成してください。
+- **同期サーバーコンポーネント**：非同期呼び出しまたは非シリアル化可能な関数ではなく、事前計算された文字列（翻訳されたラベル、フォーマットされた数字）を渡すことでサーバーコンポーネントを同期に保ってください。
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+- **モジュラーコンテンツ**：`.content.{ts|js|json}` ファイルを使用してコンテンツ辞書をコンポーネントと共存させてください。
+- **タイプセーフティ**：TypeScript 統合を活用してコンパイル時のコンテンツ検証を行ってください。
+- **ビルドタイム最適化**：Intlayer のビルドツールを使用して自動的なツリーシェイキングとバンドル最適化を行ってください。
+- **統合ツール**：組み込みのルーティング、SEO ヘルパー、ビジュアルエディタサポートを活用してください。
+
+  </Tab>
+</Tabs>
+
+---
+
 ## そして勝者は…
 
 簡単ではありません。各オプションにはトレードオフがあります。私の見解は以下の通りです：

package/blog/ja/rag_powered_documentation_assistant.md

@@ -313,3 +313,16 @@ RAGは、LLMを実用的にする最もシンプルで強力な方法の一つ
 </Step>
 
 </Steps>
+## 結論
+
+RAGは、LLMを実用的にするための最もシンプルで強力な方法の1つです。**検索 + 生成**を組み合わせることで、静的なドキュメントを**スマートアシスタント**に変換し、同時に継続的な製品インサイトの流れを得ることができます。
+
+このプロジェクトを通じて、RAGは単なる技術的なトリックではないことが分かりました。それはドキュメントを以下のものに変換する方法です：
+
+- インタラクティブなサポートシステム
+- フィードバックチャネル
+- 製品戦略ツール
+
+👉 [デモを試す](https://intlayer.org/doc/why) 👉 [GitHubでコードテンプレートを確認](https://github.com/aymericzip/smart_doc_RAG)
+
+RAGを試していると思ったら、どのように使用しているのか聞きたいです。

package/blog/ja/react-i18next_vs_react-intl_vs_intlayer.md

@@ -146,6 +146,12 @@ author: aymericzip
 
 ---
 
+## GitHub STARs
+
+GitHub スターはプロジェクトの人気度、コミュニティからの信頼、長期的な関連性の強い指標です。技術的な品質の直接的な測定ではありませんが、多くの開発者がプロジェクトを有用であると判断し、その進捗をフォローし、採用する可能性があることを反映しています。プロジェクトの価値を見積もるために、スターは代替案間での牽引力を比較し、エコシステムの成長に関する洞察を提供するのに役立ちます。
+
+[![Star History Chart](https://api.star-history.com/chart?repos=formatjs/formatjs%2Ci18next/react-i18next%2Caymericzip/intlayer&type=date&legend=top-left)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&aymericzip/intlayer)
+
 ## 結論
 
 3つのライブラリはすべてReactのローカライズを効果的に行います。差別化のポイントは、安全でスケーラブルなセットアップを実現するためにどれだけの**インフラストラクチャ**を構築する必要があるかです。

package/blog/ja/vue-i18n_vs_intlayer.md

@@ -259,6 +259,14 @@ const { greeting } = useIntlayer("component-example");
 
 ---
 
+## GitHub スター
+
+GitHub のスターは、プロジェクトの人気度、コミュニティの信頼、および長期的な関連性の強力な指標です。技術的品質の直接的な尺度ではありませんが、多くの開発者がプロジェクトを有用であると認識し、その進行状況をフォローし、採用する可能性があることを反映しています。プロジェクトの価値を見積もるために、スターは代替案間の牽引力を比較し、エコシステムの成長に関する洞察を提供するのに役立ちます。
+
+[![Star History Chart](https://api.star-history.com/svg?repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+---
+
 ## 結論
 
 **vue-i18n** と **Intlayer** はどちらも Vue アプリのローカライズに優れています。違いは、堅牢でスケーラブルなセットアップを実現するために、**どれだけ自分で構築する必要があるか**にあります：

package/blog/ko/intlayer_with_i18next.md

@@ -34,6 +34,10 @@ author: aymericzip
 
 <iframe title="Intlayer를 사용하여 i18next JSON 번역 자동화하는 방법" 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/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+## 목차
+
+<TOC/>
+
 ## Intlayer란 무엇인가요?
 
 **Intlayer**는 전통적인 i18n 솔루션의 한계를 극복하기 위해 설계된 혁신적이고 오픈 소스인 국제화 라이브러리입니다. JavaScript 애플리케이션에서 콘텐츠 관리를 위한 현대적인 접근 방식을 제공합니다.
@@ -59,28 +63,46 @@ Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내
 
 ## Intlayer를 i18next와 함께 설정하는 단계별 가이드
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 필요한 패키지를 설치하세요:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **패키지 설명:**
@@ -88,7 +110,9 @@ bun x intlayer init
 - **intlayer**: 국제화 관리, 콘텐츠 선언 및 빌드를 위한 핵심 라이브러리
 - **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 i18next 호환 JSON 형식으로 내보내는 플러그인
 
-### 2단계: JSON을 래핑하기 위한 Intlayer 플러그인 구현
+</Step>
+
+<Step number={2} title="JSON을 래핑하기 위한 Intlayer 플러그인 구현">
 
 지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만듭니다:
 
@@ -124,7 +148,9 @@ CLI를 사용하여 JSON 번역을 변경하거나 CMS를 통해 변경하면, I
 
 `syncJSON` 플러그인에 대한 자세한 내용을 보려면 [syncJSON 플러그인 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)를 참조하세요.
 
-### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
+</Step>
+
+<Step number={3} title="컴포넌트별 JSON 번역 구현" isOptional={true}>
 
 기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 로컬라이즈된 JSON을 컴포넌트별로 관리할 수도 있습니다.
 
@@ -167,6 +193,10 @@ export default config;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Git 설정
 
 자동 생성된 Intlayer 파일은 무시하는 것이 권장됩니다:

package/blog/ko/intlayer_with_next-i18next.md

@@ -34,17 +34,6 @@ author: aymericzip
 
 <TOC/>
 
-## next-i18next란 무엇인가?
-
-**next-i18next**는 Next.js 애플리케이션을 위한 가장 인기 있는 국제화(i18n) 프레임워크 중 하나입니다. 강력한 **i18next** 생태계 위에 구축되어, Next.js 프로젝트에서 번역, 현지화, 언어 전환을 관리하는 포괄적인 솔루션을 제공합니다.
-
-하지만 next-i18next에는 몇 가지 어려움이 있습니다:
-
-- **복잡한 설정**: next-i18next를 설정하려면 여러 구성 파일과 서버 측 및 클라이언트 측 i18n 인스턴스의 신중한 설정이 필요합니다.
-- **분산된 번역 파일**: 번역 파일이 일반적으로 컴포넌트와 별도의 디렉토리에 저장되어 일관성을 유지하기 어렵습니다.
-- **수동 네임스페이스 관리**: 개발자가 네임스페이스를 수동으로 관리하고 번역 리소스가 제대로 로드되도록 해야 합니다.
-- **제한된 타입 안전성**: TypeScript 지원은 추가 구성이 필요하며 번역에 대한 자동 타입 생성을 제공하지 않습니다.
-
 ## Intlayer란 무엇인가요?
 
 **Intlayer**는 전통적인 i18n 솔루션의 단점을 해결하기 위해 설계된 혁신적이고 오픈 소스인 국제화 라이브러리입니다. Next.js 애플리케이션에서 콘텐츠 관리를 위한 현대적인 접근 방식을 제공합니다.
@@ -67,28 +56,46 @@ Intlayer가 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내
 
 ## next-i18next와 함께 Intlayer 설정 단계별 가이드
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치하세요:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **패키지 설명:**
@@ -96,7 +103,9 @@ bun x intlayer init
 - **intlayer**: 콘텐츠 선언 및 관리를 위한 핵심 라이브러리
 - **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 i18next JSON 형식과 동기화하는 플러그인
 
-### 2단계: JSON을 래핑하기 위한 Intlayer 플러그인 구현
+</Step>
+
+<Step number={2} title="JSON을 래핑하기 위한 Intlayer 플러그인 구현">
 
 지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만듭니다:
 
@@ -134,7 +143,9 @@ CLI를 사용하여 JSON을 번역하거나 CMS를 사용하여 변경 사항이
 
 ---
 
-### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
+</Step>
+
+<Step number={3} title="컴포넌트별 JSON 번역 구현" isOptional={true}>
 
 기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 지역화된 JSON을 컴포넌트별로 관리할 수도 있습니다.
 
@@ -177,6 +188,10 @@ export default config;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Git 구성
 
 생성된 파일을 버전 관리에서 제외하세요:

package/blog/ko/intlayer_with_next-intl.md

@@ -29,6 +29,10 @@ author: aymericzip
 
 <iframe title="Intlayer를 사용하여 next-intl JSON 번역 자동화하는 방법" 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/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+# 목차
+
+<TOC/>
+
 ## Intlayer란 무엇인가요?
 
 **Intlayer**는 전통적인 i18n 솔루션의 한계를 극복하기 위해 설계된 혁신적이고 오픈 소스인 국제화 라이브러리입니다. Next.js 애플리케이션에서 콘텐츠 관리를 위한 현대적인 접근 방식을 제공합니다.
@@ -53,28 +57,46 @@ Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내
 
 ## next-intl과 함께 Intlayer 설정 단계별 가이드
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 필요한 패키지를 설치하세요:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **패키지 설명:**
@@ -82,7 +104,9 @@ bun x intlayer init
 - **intlayer**: 국제화 관리, 콘텐츠 선언 및 빌드를 위한 핵심 라이브러리
 - **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 next-intl 호환 JSON 형식으로 내보내는 플러그인
 
-### 2단계: JSON을 래핑하기 위한 Intlayer 플러그인 구현
+</Step>
+
+<Step number={2} title="JSON을 래핑하기 위한 Intlayer 플러그인 구현">
 
 지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만듭니다:
 
@@ -120,7 +144,9 @@ CLI를 사용하여 JSON을 번역하거나 CMS를 통해 변경 사항이 이
 
 `syncJSON` 플러그인에 대한 자세한 내용은 [syncJSON 플러그인 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)를 참조하세요.
 
-### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
+</Step>
+
+<Step number={3} title="컴포넌트별 JSON 번역 구현" isOptional={true}>
 
 기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 JSON을 컴포넌트별로 관리하는 기능을 구현할 수도 있습니다.
 
@@ -162,6 +188,10 @@ export default config;
 
 이 설정은 `src` 디렉토리 내에서 `{key}.i18n.json` 패턴과 일치하는 모든 JSON 파일을 로드하여 Intlayer 사전으로 불러옵니다.
 
+</Step>
+
+</Steps>
+
 ## Git 구성
 
 자동 생성된 Intlayer 파일은 무시하는 것이 권장됩니다:

package/blog/ko/intlayer_with_react-i18next.md

@@ -57,28 +57,46 @@ Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내
 
 ## react-i18next와 함께 Intlayer 설정 단계별 가이드
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 필요한 패키지를 설치하세요:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **패키지 설명:**
@@ -86,7 +104,9 @@ bun x intlayer init
 - **intlayer**: 국제화 관리, 콘텐츠 선언 및 빌드를 위한 핵심 라이브러리
 - **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 react-i18next 호환 JSON 형식으로 내보내는 플러그인
 
-### 2단계: JSON을 감싸기 위한 Intlayer 플러그인 구현
+</Step>
+
+<Step number={2} title="JSON을 감싸기 위한 Intlayer 플러그인 구현">
 
 지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만듭니다:
 
@@ -123,7 +143,9 @@ CLI를 사용하여 JSON을 번역하거나 CMS를 통해 변경이 이루어지
 
 `syncJSON` 플러그인에 대한 자세한 내용은 [syncJSON 플러그인 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)를 참조하세요.
 
-### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
+</Step>
+
+<Step number={3} title="컴포넌트별 JSON 번역 구현" isOptional={true}>
 
 기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 로컬라이즈된 JSON을 컴포넌트별로 관리할 수도 있습니다.
 
@@ -164,6 +186,10 @@ export default config;
 
 이 설정은 `src` 디렉토리 내에서 `{key}.i18n.json` 패턴과 일치하는 모든 JSON 파일을 로드하여 Intlayer 사전으로 불러옵니다.
 
+</Step>
+
+</Steps>
+
 ## Git 설정
 
 자동 생성되는 Intlayer 파일은 무시하는 것이 권장됩니다:

package/blog/ko/intlayer_with_react-intl.md

@@ -55,28 +55,46 @@ Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내
 
 ## react-intl과 함께 Intlayer를 설정하는 단계별 가이드
 
-### 1단계: 의존성 설치
+<Steps>
+
+<Step number={1} title="의존성 설치">
 
 필요한 패키지를 설치하세요:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 플래그는 선택 사항입니다. AI 에이전트인 경우 `intlayer-cli init`를 사용하세요.
+
+> 이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
+
 ```bash packageManager="npm"
 npm install intlayer @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **패키지 설명:**
@@ -84,7 +102,9 @@ bun x intlayer init
 - **intlayer**: 국제화 관리, 콘텐츠 선언 및 빌드를 위한 핵심 라이브러리
 - **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 react-intl 호환 JSON 형식으로 내보내는 플러그인
 
-### 2단계: JSON을 래핑하기 위한 Intlayer 플러그인 구현
+</Step>
+
+<Step number={2} title="JSON을 래핑하기 위한 Intlayer 플러그인 구현">
 
 지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만듭니다:
 
@@ -121,7 +141,9 @@ CLI를 사용해 JSON을 번역하거나 CMS를 통해 변경이 이루어지면
 
 `syncJSON` 플러그인에 대한 자세한 내용을 보려면 [syncJSON 플러그인 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)를 참조하세요.
 
-### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
+</Step>
+
+<Step number={3} title="컴포넌트별 JSON 번역 구현" isOptional={true}>
 
 기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 지역화된 JSON을 컴포넌트별로 관리할 수도 있습니다.
 
@@ -163,6 +185,10 @@ export default config;
 
 이 설정은 `src` 디렉토리 내에서 `{key}.i18n.json` 패턴과 일치하는 모든 JSON 파일을 로드하여 Intlayer 사전으로 불러옵니다.
 
+</Step>
+
+</Steps>
+
 ## Git 설정
 
 자동 생성되는 Intlayer 파일은 무시하는 것이 권장됩니다: