@intlayer/docs 6.1.4 → 6.1.6-canary.0

package/docs/ja/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: React と Next.js でコンポーネントを多言語対応（i18n）にする方法
+description: Intlayer を使って多言語対応の React または Next.js コンポーネントを作成するために、ローカライズされたコンテンツの宣言と取得方法を学びます。
+keywords:
+  - i18n
+  - コンポーネント
+  - react
+  - 多言語対応
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Intlayer でコンポーネントを多言語対応（i18n）にする方法
+
+このガイドでは、2つの一般的なセットアップで UI コンポーネントを多言語対応にするための最小限の手順を示します：
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+まずコンテンツを宣言し、その後コンポーネント内で取得します。
+
+## 1) コンテンツを宣言する（React と Next.js 共通）
+
+コンポーネントの近くにコンテンツ宣言ファイルを作成します。これにより、翻訳が使用される場所に近くなり、型安全性も確保されます。
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+設定ファイルとして JSON を使いたい場合もサポートされています。
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "多言語対応のReactコンポーネント",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) コンテンツの取得
+
+### ケースA — Reactアプリ（Vite/SPA）
+
+デフォルトの方法：キーで取得するために `useIntlayer` を使用します。これによりコンポーネントはシンプルかつ型安全に保たれます。
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+サーバーサイドレンダリングやプロバイダー外での使用：`react-intlayer/server` を使用し、必要に応じて明示的に `locale` を渡します。
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+代替案：呼び出し元で構造をまとめておきたい場合は、`useDictionary` を使って宣言済みのオブジェクト全体を読み取ることができます。
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### ケースB — Next.js（App Router）
+
+データの安全性とパフォーマンスのためにサーバーコンポーネントを優先してください。サーバーファイルでは `next-intlayer/server` から `useIntlayer` を使用し、クライアントコンポーネントでは `next-intlayer` から `useIntlayer` を使用します。
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+ヒント: ページのメタデータやSEOのために、`getIntlayer` を使用してコンテンツを取得し、`getMultilingualUrls` を使って多言語URLを生成することもできます。
+
+## なぜIntlayerのコンポーネントアプローチが最適なのか
+
+- **コロケーション**: コンテンツの宣言がコンポーネントの近くに存在するため、ズレが減り、デザインシステム全体での再利用が向上します。
+- **型安全性**: キーや構造が強く型付けされており、翻訳の欠落は実行時ではなくビルド時に検出されます。
+- **サーバーファースト**: サーバーコンポーネントでネイティブに動作し、セキュリティとパフォーマンスを向上させます。クライアントフックは引き続き使いやすいままです。
+- **ツリーシェイキング**: コンポーネントで使用されるコンテンツのみがバンドルされるため、大規模アプリでもペイロードを小さく保てます。
+- **DX（開発者体験）＆ツール**: 組み込みのミドルウェア、SEOヘルパー、オプションのビジュアルエディター／AI翻訳が日々の作業を効率化します。
+
+Next.jsに特化した比較とパターンのまとめはこちらをご覧ください: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## 関連ガイドと参考資料
+
+- Reactセットアップ（Vite）: https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStackスタート: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Next.js セットアップ: https://intlayer.org/doc/environment/nextjs
+- なぜ Intlayer を選ぶのか vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+これらのページには、エンドツーエンドのセットアップ、プロバイダー、ルーティング、および SEO ヘルパーが含まれています。

package/docs/ja/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: 公式 VS Code 拡張機能
-description: VS Code で Intlayer 拡張機能を使用して開発ワークフローを強化する方法を学びます。ローカライズされたコンテンツ間を素早くナビゲートし、辞書を効率的に管理できます。
+description: VS Code で Intlayer 拡張機能を使用して開発ワークフローを強化する方法を学びます。ローカライズされたコンテンツ間を素早く移動し、辞書を効率的に管理できます。
 keywords:
   - VS Code 拡張機能
   - Intlayer
@@ -23,161 +23,100 @@ slugs:
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) は、プロジェクト内のローカライズされたコンテンツを扱う際の開発者体験を向上させるために設計された、**Intlayer** の公式 Visual Studio Code 拡張機能です。
 
-![Intlayer VS Code 拡張機能](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Intlayer VS Code 拡張機能](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 拡張機能リンク: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## 機能
 
-### インスタントナビゲーション
+![辞書を埋める](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**定義へ移動サポート** – `useIntlayer` キー上で `⌘ + クリック`（Mac）または `Ctrl + クリック`（Windows/Linux）を使用して、対応するコンテンツファイルを即座に開きます。  
-**シームレスな統合** – **react-intlayer** および **next-intlayer** プロジェクトとスムーズに連携します。  
-**多言語サポート** – 複数の言語にわたるローカライズされたコンテンツをサポートします。  
-**VS Code 統合** – VS Code のナビゲーションおよびコマンドパレットとスムーズに統合されます。
-
-### 辞書管理コマンド
-
-VS Code から直接コンテンツ辞書を管理します：
-
-- **辞書のビルド** – プロジェクト構造に基づいてコンテンツファイルを生成します。
-- **辞書のプッシュ** – 最新の辞書コンテンツをリポジトリにアップロードします。
-- **辞書のプル** – リポジトリから最新の辞書コンテンツをローカル環境に同期します。
+- **インスタントナビゲーション** – `useIntlayer` キーをクリックすると、正しいコンテンツファイルに素早くジャンプします。
 - **辞書の埋め込み** – プロジェクトのコンテンツで辞書を埋めます。
-- **辞書のテスト** – 欠落または不完全な翻訳を特定します。
-
-### コンテンツ宣言ジェネレーター
-
-異なるフォーマットで構造化された辞書ファイルを簡単に生成します：
-
-現在コンポーネントを作業している場合、そのコンポーネント用の `.content.{ts,tsx,js,jsx,mjs,cjs,json}` ファイルを生成します。
-
-コンポーネントの例：
-
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
-
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-TypeScript形式で生成されたファイル：
 
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
+![コマンド一覧](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
+- **Intlayerコマンドへの簡単アクセス** – コンテンツ辞書のビルド、プッシュ、プル、埋め込み、テストを簡単に行えます。
 
-export default componentContent;
-```
+![コンテンツファイル作成](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-利用可能なフォーマット：
+- **コンテンツ宣言ジェネレーター** – さまざまな形式（`.ts`、`.esm`、`.cjs`、`.json`）で辞書コンテンツファイルを作成します。
 
-- **TypeScript (`.ts`)**
-- **ESモジュール (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
+![辞書のテスト](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-### Intlayerタブ（アクティビティバー）
+- **辞書のテスト** – 翻訳漏れがないか辞書をテストします。
 
-VS CodeのアクティビティバーにあるIntlayerアイコンをクリックしてIntlayerタブを開きます。タブには2つのビューがあります：
+![辞書の再構築](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-- **検索**：辞書とその内容を素早くフィルタリングできるライブ検索バー。入力すると結果が即座に更新されます。
-- **辞書**：環境やプロジェクト、辞書キー、エントリを含むファイルのツリービュー。以下の操作が可能です：
-  - ファイルをクリックしてエディタで開く。
-  - ツールバーを使って以下のアクションを実行：ビルド、プル、プッシュ、フィル、リフレッシュ、テスト、辞書ファイルの作成。
-  - コンテキストメニューでアイテム固有のアクションを実行：
-    - 辞書上で：プルまたはプッシュ
-    - ファイル上で：辞書のフィル
-  - エディタを切り替えると、そのファイルが辞書に属している場合はツリーが該当ファイルを表示します。
+- **辞書を最新の状態に保つ** – プロジェクトの最新コンテンツで辞書を常に最新の状態に保ちます。
 
-## インストール
+![Intlayer タブ（アクティビティバー）](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-**Intlayer**はVS Codeマーケットプレイスから直接インストールできます。
-
-1. **VS Code**を開きます。
-2. **拡張機能マーケットプレイス**に移動します。
-3. **「Intlayer」**を検索します。
-4. **インストール**をクリックします。
+- **Intlayer タブ（アクティビティバー）** – 専用のサイドタブからツールバーやコンテキストアクション（ビルド、プル、プッシュ、フィル、リフレッシュ、テスト、ファイル作成）を使って辞書を閲覧・検索できます。
 
 ## 使い方
 
 ### クイックナビゲーション
 
-1. **react-intlayer**を使用しているプロジェクトを開きます。
-2. `useIntlayer()`の呼び出しを見つけます。例えば：
+1. **react-intlayer** を使用しているプロジェクトを開きます。
+2. 次のような `useIntlayer()` の呼び出しを見つけます。
 
    ```tsx
    const content = useIntlayer("app");
    ```
 
-3. キー（例: `"app"`）を**Commandクリック**（macOSの場合は`⌘+クリック`）、または**Ctrlクリック**（Windows/Linuxの場合）します。
-4. VS Codeが自動的に対応する辞書ファイル（例: `src/app.content.ts`）を開きます。
-
-### コンテンツ辞書の管理
+3. キー（例: `"app"`）を **Command-click**（macOSでは `⌘+Click`）、または **Ctrl+Click**（Windows/Linuxの場合）します。
+4. VS Code は対応する辞書ファイル（例: `src/app.content.ts`）を自動的に開きます。
 
-### Intlayerタブ（アクティビティバー）
+### Intlayer タブ（アクティビティバー）
 
 サイドタブを使って辞書を閲覧・管理します：
 
-- アクティビティバーのIntlayerアイコンを開きます。
-- **検索** では、辞書とエントリをリアルタイムでフィルタリングするために入力します。
-- **辞書** では、環境、辞書、ファイルを閲覧できます。ツールバーを使って、ビルド、プル、プッシュ、フィル、リフレッシュ、テスト、辞書ファイルの作成を行います。右クリックでコンテキストアクション（辞書のプル/プッシュ、ファイルのフィル）を利用できます。現在のエディタファイルは該当する場合、自動的にツリーで表示されます。
+- アクティビティバーの Intlayer アイコンを開きます。
+- **検索** でリアルタイムに辞書やエントリをフィルタリングします。
+- **辞書** では環境、辞書、ファイルを閲覧します。ツールバーからはビルド、プル、プッシュ、フィル、リフレッシュ、テスト、辞書ファイルの作成が可能です。右クリックでコンテキストアクション（辞書のプル/プッシュ、ファイルのフィル）を利用できます。現在のエディタファイルは該当する場合、ツリー内で自動的に表示されます。
 
-#### 辞書のビルド
+### コマンドへのアクセス
 
-すべての辞書コンテンツファイルを生成するには：
+コマンドは **コマンドパレット** からアクセスできます。
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-**Build Dictionaries** を検索してコマンドを実行します。
-
-#### 辞書のプッシュ
-
-最新の辞書コンテンツをアップロードするには：
-
-1. **コマンドパレット** を開きます。
-2. **Push Dictionaries** を検索します。
-3. プッシュする辞書を選択して確認します。
-
-#### 辞書のプル
+- **辞書をビルド**
+- **辞書をプッシュ**
+- **辞書をプル**
+- **辞書を埋める**
+- **辞書をテスト**
+- **辞書ファイルを作成**
 
-- 最新の辞書コンテンツを同期します：
+### 環境変数の読み込み
 
-1. **コマンドパレット**を開きます。
-2. **Pull Dictionaries** を検索します。
-3. プルする辞書を選択します。
+Intlayer は、AI APIキーや Intlayer クライアントIDおよびシークレットを環境変数に保存することを推奨します。
 
-#### 辞書の内容を埋める
+拡張機能は、ワークスペースから環境変数を読み込み、適切なコンテキストで Intlayer コマンドを実行できます。
 
-プロジェクトの内容で辞書を埋めます：
+- **読み込み順（優先度順）**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **非破壊的**: 既存の `process.env` の値は上書きされません。
+- **スコープ**: ファイルは設定されたベースディレクトリ（デフォルトはワークスペースのルート）から解決されます。
 
-1. **コマンドパレット**を開きます。
-2. **Fill Dictionaries** を検索します。
-3. コマンドを実行して辞書を埋めます。
+#### アクティブ環境の選択
 
-#### 辞書のテスト
+- **コマンドパレット**: パレットを開き、`Intlayer: Select Environment` を実行して環境（例：`development`、`staging`、`production`）を選択します。拡張機能は上記の優先リストで最初に見つかったファイルを読み込み、「Loaded env from .env.<env>.local」のような通知を表示します。
+- **設定**: `設定 → 拡張機能 → Intlayer` に移動し、以下を設定します：
+  - **Environment**: `.env.<env>*` ファイルを解決するために使用される環境名。
+  - （オプション）**Env File**: 明示的な `.env` ファイルへのパス。指定された場合、推測されたリストより優先されます。
 
-辞書を検証し、翻訳漏れを見つけます：
+#### モノレポおよびカスタムディレクトリ
 
-1. **コマンドパレット**を開きます。
-2. **Test Dictionaries** を検索します。
-3. 報告された問題を確認し、必要に応じて修正します。
+ワークスペースのルート外に `.env` ファイルがある場合は、`設定 → 拡張機能 → Intlayer` で **ベースディレクトリ** を設定してください。ローダーはそのディレクトリを基準に `.env` ファイルを探します。
 
 ## ドキュメント履歴
 
-| バージョン | 日付       | 変更内容     |
-| ---------- | ---------- | ------------ |
-| 5.5.10     | 2025-06-29 | 履歴の初期化 |
+| バージョン | 日付       | 変更内容                               |
+| ---------- | ---------- | -------------------------------------- |
+| 6.1.5      | 2025-09-30 | デモGIFを追加                          |
+| 6.1.0      | 2025-09-24 | 環境選択セクションを追加               |
+| 6.0.0      | 2025-09-22 | Intlayerタブ / Fill & Testコマンド追加 |
+| 5.5.10     | 2025-06-29 | 履歴を初期化                           |

package/docs/ko/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: React 및 Next.js에서 컴포넌트를 다국어(i18n)로 만들기
+description: Intlayer를 사용하여 다국어 React 또는 Next.js 컴포넌트를 만들기 위해 현지화된 콘텐츠를 선언하고 가져오는 방법을 배우세요.
+keywords:
+  - i18n
+  - 컴포넌트
+  - react
+  - 다국어
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Intlayer로 컴포넌트를 다국어(i18n)로 만드는 방법
+
+이 가이드는 두 가지 일반적인 환경에서 UI 컴포넌트를 다국어로 만드는 최소 단계를 보여줍니다:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+먼저 콘텐츠를 선언한 후 컴포넌트에서 이를 가져옵니다.
+
+## 1) 콘텐츠 선언하기 (React 및 Next.js 공통)
+
+컴포넌트 근처에 콘텐츠 선언 파일을 만드세요. 이렇게 하면 번역이 사용되는 위치와 가까워지고 타입 안전성을 보장할 수 있습니다.
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+구성 파일을 선호하는 경우 JSON도 지원됩니다.
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "다국어 React 컴포넌트",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) 콘텐츠를 가져오기
+
+### 경우 A — React 앱 (Vite/SPA)
+
+기본 접근법: 키로 검색하기 위해 `useIntlayer`를 사용합니다. 이렇게 하면 컴포넌트가 간결하고 타입이 지정됩니다.
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+서버 사이드 렌더링 또는 프로바이더 외부에서: 필요할 때 명시적인 `locale`을 전달하며 `react-intlayer/server`를 사용하세요.
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+대안: 호출 위치에서 구조를 함께 배치하는 것을 선호한다면 `useDictionary`를 사용하여 전체 선언된 객체를 읽을 수 있습니다.
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### 사례 B — Next.js (앱 라우터)
+
+데이터 안전성과 성능을 위해 서버 컴포넌트를 선호하세요. 서버 파일에서는 `next-intlayer/server`에서 `useIntlayer`를 사용하고, 클라이언트 컴포넌트에서는 `next-intlayer`에서 `useIntlayer`를 사용하세요.
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+팁: 페이지 메타데이터 및 SEO를 위해 `getIntlayer`를 사용하여 콘텐츠를 가져오고 `getMultilingualUrls`를 통해 다국어 URL을 생성할 수도 있습니다.
+
+## 왜 Intlayer의 컴포넌트 접근법이 최선인가
+
+- **콜로케이션(Collocation)**: 콘텐츠 선언이 컴포넌트 근처에 위치하여 분산을 줄이고 디자인 시스템 전반에서 재사용성을 향상시킵니다.
+- **타입 안전성(Type safety)**: 키와 구조가 강력하게 타입 지정되어 있으며, 누락된 번역은 런타임이 아닌 빌드 타임에 감지됩니다.
+- **서버 우선(Server-first)**: 보안성과 성능 향상을 위해 서버 컴포넌트에서 네이티브로 작동하며, 클라이언트 훅은 여전히 사용하기 편리합니다.
+- **트리 쉐이킹(Tree-shaking)**: 컴포넌트에서 사용하는 콘텐츠만 번들에 포함되어 대규모 앱에서도 페이로드를 작게 유지합니다.
+- **개발자 경험(DX) 및 도구**: 내장 미들웨어, SEO 도우미, 선택적 비주얼 에디터/AI 번역 기능이 일상 작업을 간소화합니다.
+
+Next.js 중심 비교 및 패턴은 다음 링크에서 확인하세요: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## 관련 가이드 및 참고 자료
+
+- React 설정 (Vite): https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStack 시작: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Next.js 설정: https://intlayer.org/doc/environment/nextjs
+- Intlayer vs. next-intl vs. next-i18next 비교: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+이 페이지들은 엔드 투 엔드 설정, 프로바이더, 라우팅, SEO 도우미를 포함합니다.