@intlayer/docs 9.4.0-canary.0 → 9.4.1

package/docs/ja/packages/intlayer/getIntlayerAsync.md

@@ -0,0 +1,141 @@
+---
+createdAt: 2026-08-23
+updatedAt: 2026-08-23
+title: getIntlayerAsync Function Documentation | intlayer
+description: getIntlayer パッケージの getIntlayerAsync 関数の使用方法を確認する
+keywords:
+  - getIntlayerAsync
+  - dictionary
+  - dynamic import
+  - metadata
+  - bundle optimization
+  - Intlayer
+  - intlayer
+  - Internationalization
+  - Documentation
+  - JavaScript
+  - TypeScript
+slugs:
+  - doc
+  - packages
+  - intlayer
+  - getIntlayerAsync
+history:
+  - version: 9.4.0
+    date: 2026-08-23
+    changes: "Initial documentation"
+author: aymericzip
+---
+
+# ドキュメント: `intlayer` の `getIntlayerAsync` 関数
+
+## 説明
+
+`getIntlayerAsync` 関数は辞書をキーで選択し、与えられたロケールに対してそのコンテンツを解決します。**そのロケールのみを読み込みます**。
+
+これは [`getIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getIntlayer.md) の非同期対応であり、ルート `head` / メタデータビルダー、ローダー、サーバー関数など、レンダリング外で辞書が読み込まれる場所を対象としています。
+
+`getIntlayer` がすべてのロケールを保持するマージされた辞書を取得する場合、[ビルドプラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/bundle_optimization.md)（`@intlayer/babel`、`@intlayer/swc`）はこの呼び出しを `getDictionaryAsync(loaderMap, key, locale)` に書き換え、`.intlayer/dynamic_dictionaries/` のロケール別チャンクを指すようにします。したがって、バンドルには実際にリクエストされたロケールのみが含まれます。
+
+これらのプラグインがない場合（最適化されていないビルド）、呼び出しは同期辞書レジストリを通じて解決されます。ロケール別に分割されていない同じコンテンツです。
+
+**主な機能：**
+
+- `getIntlayer` と同じ型付きキー、セレクター、および返されたコンテンツ
+- 最適化されたビルドで要求されたロケールチャンクのみを読み込む
+- 同じチャンクへの並行呼び出しは単一の読み込みを共有
+- `async` メタデータビルダー、ローダー、サーバー関数での使用が安全
+
+---
+
+## 関数シグネチャ
+
+```typescript
+getIntlayerAsync(
+  key: DictionaryKeys,                        // 必須
+  localeOrSelector?: LocalesValues | DictionarySelector, // オプション
+  plugins?: Plugins[]                         // オプション
+): Promise<DeepTransformContent<...>>
+```
+
+---
+
+## パラメータ
+
+- `key: DictionaryKeys`
+  - **説明**: コンテンツファイルで宣言されたとおりの辞書キー。
+  - **型**: `DictionaryKeys` — すべての宣言された辞書キーの Union。
+  - **必須**: Yes
+
+- `localeOrSelector: LocalesValues | DictionarySelector`
+  - **説明**: コンテンツを解釈するロケール、または[動的辞書](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/index.md)のセレクタオブジェクト。
+    - `'fr'` — ロケール
+    - `{ item: 2 }` — [collection](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/collections.md)アイテム（すべてのアイテムを配列として取得するには`item`を省略）
+    - `{ variant: 'black-friday' }` — 名前付き[variant](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/variants.md)（`default`を使用するには省略）
+    - `{ variant: { id: 'prod_abc', userId: '123' } }` — 構造化された variant
+    - 任意のセレクタがロケールを持つ可能性: `{ item: 2, locale: 'fr' }`
+  - **型**: `LocalesValues | DictionarySelector`
+  - **必須**: No (オプション) — 設定された `defaultLocale` がデフォルト。
+
+- `plugins: Plugins[]`
+  - **説明**: 基本インタープリタプラグインを置き換えるカスタムノード トランスフォーマー。高度な使用のみ。
+  - **型**: `Plugins[]`
+  - **必須**: No (オプション)
+
+### Returns
+
+- **Type**: `Promise<Content>` — 辞書の解釈されたコンテンツに解決する promise。型は宣言から取得されます。
+
+---
+
+## 使用例
+
+### 基本的な使用法
+
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
+import { getIntlayerAsync } from "intlayer";
+
+const { title } = await getIntlayerAsync("app", "fr"); // "Bonjour"
+```
+
+---
+
+## `getIntlayer` vs `getIntlayerAsync`
+
+|                    | [`getIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getIntlayer.md) | `getIntlayerAsync`                                |
+| ------------------ | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| Returns            | コンテンツ                                                                                                      | コンテンツのPromise                               |
+| Dictionary loaded  | マージされたディクショナリ（すべてのロケール）                                                                  | リクエストされたロケールのチャンクのみ            |
+| Best suited for    | レンダリング、同期コードパス                                                                                    | メタデータ、ローダー、サーバー関数                |
+| Requires a plugin? | No                                                                                                              | No — per-locale splitはビルドプラグインが必要です |
+
+両方とも同じ引数を受け入れ、同じコンテンツを返します。一方から他方に切り替えることで変わるのは、**いつ**と**どの程度**のロードが行われるかだけです。
+
+---
+
+## 関連する関数
+
+- [`getIntlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getIntlayer.md): マージされた辞書を読む同期的な同等物。
+- [`getDictionaryAsync`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getDictionaryAsync.md): ビルドプラグインがこの呼び出しを書き換える低レベルの関数。
+- [`getLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getLocale.md): 受信リクエストのロケールを検出します。
+
+---
+
+## TypeScript
+
+```typescript
+function getIntlayerAsync<
+  const T extends DictionaryKeys,
+  const A extends LocalesValues | DictionarySelector = DeclaredLocales,
+>(
+  key: T,
+  localeOrSelector?: A,
+  plugins?: Plugins[]
+): Promise<
+  DeepTransformContent<
+    DictionaryRegistryResult<T, A>,
+    IInterpreterPluginState,
+    ExtractSelectorLocale<A>
+  >
+>;
+```

package/docs/ja/packages/intlayer/getLocalizedPath.md

@@ -31,6 +31,8 @@ author: aymericzip
 
 `getLocalizedPath` 関数は、canonical path（内部アプリケーションパス）を提供された locale とリライトルールに基づいてローカライズされたパスに解決します。言語ごとに異なる SEO に適した URL を生成する際に特に有用です。
 
+[`getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getLocalizedUrl.md)の相対的なカウンターパートです — 相対入力の場合、両者は同じ値を返します。`getLocalizedUrl`とは異なり、絶対URLを返すことはありません：`domains`設定は無視されるため、独自のドメインから提供されるロケールでもパスが生成されます。絶対入力は受け入れられますが、そのオリジンは削除され、パス、クエリ文字列、ハッシュのみが保持されます。
+
 **主な機能:**
 
 - `[param]` 構文を使用した動的ルートパラメータをサポートします。
@@ -60,11 +62,6 @@ getLocalizedPath(
   - **型**: `string`
   - **必須**: はい
 
-- `locale: Locales`
-  - **説明**: パスをローカライズする対象のロケール。
-  - **型**: `Locales`
-  - **必須**: はい
-
 ### 任意パラメータ
 
 - `rewriteRules?: RoutingConfig['rewrite']`
@@ -72,6 +69,15 @@ getLocalizedPath(
   - **型**: `RoutingConfig['rewrite']`
   - **デフォルト**: `configuration.routing.rewrite`
 
+- `options?: object`
+  - **説明**: ルーティングのオーバーライド。すべてのエントリはプロジェクトの設定にデフォルト設定されます。
+  - **型**: `object`
+
+  - `options.locales?: Locales[]` — サポートされているロケール。**デフォルト**: `configuration.internationalization.locales`
+  - `options.defaultLocale?: Locales` — デフォルトロケール。**デフォルト**: `configuration.internationalization.defaultLocale`
+  - `options.mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params'` — パス内でロケールがどのように表示されるか。**デフォルト**: `configuration.routing.mode`
+  - `options.rewrite?: RoutingConfig['rewrite']` — カスタム rewrite ルール。**デフォルト**: `configuration.routing.rewrite`
+
 ---
 
 ## 戻り値
@@ -79,6 +85,28 @@ getLocalizedPath(
 - **型**: `string`
 - **説明**: 指定したロケール向けのローカライズされたパス。
 
+型は設定で宣言された書き直しルールから絞り込まれるため、エディタはベアな `string` ではなく、解決されたパスを表示します:
+
+```typescript codeFormat="typescript"
+// 設定: モード 'prefix-no-default', defaultLocale 'en',
+//      { '/about': { fr: '/a-propos' }, '/product/[id]': { fr: '/produit/[id]' } }
+const about = getLocalizedPath("/about", Locales.FRENCH);
+//    ^? '/fr/a-propos'
+const product = getLocalizedPath("/product/123", Locales.FRENCH);
+//    ^? '/fr/produit/123'
+const contact = getLocalizedPath("/contact", Locales.FRENCH);
+//    ^? '/fr/contact'  (書き換えルールに一致しません。プレフィックスのみが適用されます)
+const home = getLocalizedPath("/", Locales.FRENCH);
+//    ^? '/fr'
+```
+
+同じ絞り込みが [`getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getLocalizedUrl.md) に流れ込み、ロケールをプレフィックスする前に書き換えルールを適用します。
+
+2つのケースは `string` に拡大されたままです。これらはコンパイル時に解決できないためです：
+
+- 文字列リテラルではないパス（例：変数から構築されたパス）;
+- マルチセグメントまたはオプショナルパラメータを使用するルールにマッチするパス（`[...slug]`、`[[...slug]]`、`:param?`）。
+
 ---
 
 ## 使用例
@@ -126,8 +154,6 @@ getLocalizedPath("/contact", Locales.FRENCH, manualRules);
 // Output: "/contactez-nous"
 ```
 
----
-
 ### ロケールの省略
 
 ロケールが指定されていない場合、パスは設定されたデフォルトロケール用にローカライズされます：

package/docs/ja/packages/intlayer/getLocalizedUrl.md

@@ -31,6 +31,14 @@ author: aymericzip
 
 `getLocalizedUrl` 関数は、指定されたロケールを与えられた URL の前に付加することでローカライズされた URL を生成します。絶対 URL と相対 URL の両方を処理し、設定に基づいて正しいロケールのプレフィックスが適用されることを保証します。
 
+**主な機能:**
+
+- 必須パラメータは `url` と `currentLocale` の2つのみ
+- `locales`、`defaultLocale`、`mode` を含むオプションの `options` オブジェクト
+- プロジェクトの国際化設定をデフォルトとして使用
+- シンプルなケースでは最小限のパラメータで使用でき、複雑なシナリオでは完全にカスタマイズ可能
+- 複数のルーティングモードをサポート: `prefix-no-default`、`prefix-all`、`no-prefix`、`search-params`
+
 ---
 
 ## 関数署名
@@ -135,36 +143,6 @@ getLocalizedUrl(
 // 出力: デフォルト（英語）ロケールの場合 "/about"
 ```
 
-```javascript codeFormat="esm"
-import { getLocalizedUrl, Locales } from "intlayer";
-
-getLocalizedUrl(
-  "/about",
-  Locales.FRENCH,
-  [Locales.ENGLISH, Locales.FRENCH],
-  Locales.ENGLISH,
-  false
-);
-
-// 出力: フランス語ロケールの場合 "/fr/about"
-// 出力: デフォルト（英語）ロケールの場合 "/about"
-```
-
-```javascript codeFormat="commonjs"
-const { getLocalizedUrl, Locales } = require("intlayer");
-
-getLocalizedUrl(
-  "/about",
-  Locales.FRENCH,
-  [Locales.ENGLISH, Locales.FRENCH],
-  Locales.ENGLISH,
-  false
-);
-
-// 出力: フランス語ロケールの場合 "/fr/about"
-// 出力: デフォルト（英語）ロケールの場合 "/about"
-```
-
 ### 部分的な設定のオーバーライド
 
 オプションパラメータの一部のみを指定することもできます。指定しないパラメータについては、関数はプロジェクト設定を使用します:
@@ -241,6 +219,12 @@ getLocalizedUrl(
 - **サポートされていないロケール:**
   - `locales` にリストされていないロケールには、関数はプレフィックスを適用しません。
 
+- **ルーティングモード:**
+  - `'prefix-no-default'`: デフォルトロケールにはプレフィックスがなく、他のロケールにはある (例: `/about`, `/fr/about`)
+  - `'prefix-all'`: すべてのロケールにプレフィックスがある (例: `/en/about`, `/fr/about`)
+  - `'no-prefix'`: URLにロケールプレフィックスがない (ロケールは他の場所で処理される)
+  - `'search-params'`: ロケールはクエリパラメータで指定される (例: `/about?locale=fr`)
+
 ---
 
 ## アプリケーションでの使用方法

package/docs/ja/packages/intlayer/getMultilingualUrls.md

@@ -31,6 +31,14 @@ author: aymericzip
 
 `getMultilingualUrls` 関数は、指定された URL に各サポートされているロケールをプレフィックスとして付加することで、多言語対応の URL マッピングを生成します。絶対 URL と相対 URL の両方に対応しており、提供された設定またはデフォルトに基づいて適切なロケールプレフィックスを適用します。
 
+**主な機能:**
+
+- 必須パラメータは `url` のみ
+- `locales`、`defaultLocale`、`mode` を含むオプションの `options` オブジェクト
+- プロジェクトの国際化設定をデフォルトとして使用
+- 複数のルーティングモードをサポート: `prefix-no-default`、`prefix-all`、`no-prefix`、`search-params`
+- すべてのロケールをキーとし、対応するURLを値とするマッピングオブジェクトを返す
+
 ---
 
 ## 関数シグネチャ
@@ -139,8 +147,6 @@ getMultilingualUrls(
 // }
 ```
 
----
-
 ### 異なるルーティングモード
 
 ```typescript
@@ -206,6 +212,12 @@ getMultilingualUrls("/dashboard", {
 - **サポートされていないロケール:**
   - URL生成には、`locales` 配列に指定されたロケールのみが考慮されます。
 
+- **ルーティングモード:**
+  - `'prefix-no-default'`: デフォルトロケールはプレフィックスなし、その他はあり (例: `/dashboard`, `/fr/dashboard`)
+  - `'prefix-all'`: すべてのロケールがプレフィックス付き (例: `/en/dashboard`, `/fr/dashboard`)
+  - `'no-prefix'`: URLにロケールプレフィックスなし (すべてのロケールが同じURLを返す)
+  - `'search-params'`: クエリパラメータでロケールを指定 (例: `/dashboard?locale=fr`)
+
 ---
 
 ## アプリケーションでの使用方法
@@ -228,56 +240,8 @@ export default config;
 
 上記の設定により、アプリケーションは `ENGLISH`、`FRENCH`、`SPANISH` をサポート言語として認識し、`ENGLISH` をフォールバック言語として使用します。
 
-この設定を使用すると、`getMultilingualUrls` 関数はアプリケーションのサポートロケールに基づいて多言語URLマッピングを動的に生成できます。
-
-```typescript
-getMultilingualUrls(
-  "/dashboard",
-  [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-  Locales.ENGLISH
-);
-// 出力例:
-// {
-//   en: "/dashboard",
-//   fr: "/fr/dashboard",
-//   es: "/es/dashboard"
-// }
-
-getMultilingualUrls(
-  "https://example.com/dashboard",
-  [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-  Locales.ENGLISH,
-  true
-);
-// 出力例:
-// {
-//   en: "https://example.com/en/dashboard",
-
-module.exports = config;
-```
-
-上記の設定により、アプリケーションは `ENGLISH`、`FRENCH`、および `SPANISH` をサポート言語として認識し、`ENGLISH` をフォールバック言語として使用します。
-
-この設定を使用すると、`getMultilingualUrls` 関数はアプリケーションのサポートされているロケールに基づいて、多言語のURLマッピングを動的に生成できます。
-
-```typescript
-getMultilingualUrls(
-  "/dashboard",
-  [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-  Locales.ENGLISH
-);
-// 出力例:
-// {
-//   en: "/dashboard",
-//   fr: "/fr/dashboard",
-//   es: "/es/dashboard"
-// }
-```
-
 上記の設定により、アプリケーションは `ENGLISH`、`FRENCH`、`SPANISH` をサポート言語として認識し、`ENGLISH` をフォールバック言語として使用します。
 
-この設定を使用すると、`getMultilingualUrls` 関数はアプリケーションのサポートされているロケールに基づいて多言語URLマッピングを動的に生成できます：
-
 ```typescript
 getMultilingualUrls(
   "/dashboard",

package/docs/ja/packages/intlayer/getPrefix.md

@@ -77,8 +77,6 @@ type GetPrefixResult = {
     - **型**: `Locales`
     - **デフォルト**: [`プロジェクト設定`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md#middleware)
 
-  - `options.mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params'`
-
 - **説明**: ロケール処理のためのURLルーティングモード。指定しない場合は、プロジェクト設定で構成されたモードが使用されます。
 - **型**: `'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params'`
 - **デフォルト**: [`プロジェクト設定`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md#middleware)

package/docs/ja/packages/intlayer/getTranslation.md

@@ -31,6 +31,8 @@ author: aymericzip
 
 `getTranslationContent` 関数は、カスタマイズ可能な言語コンテンツのセットから特定のロケールに対応するコンテンツを取得します。指定されたロケールが見つからない場合は、プロジェクトで設定されたデフォルトのロケールのコンテンツを返します。
 
+翻訳の宣言方法の詳細については、[翻訳ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/translation.md)を参照してください。
+
 ## パラメーター
 
 - `languageContent: CustomizableLanguageContent<Content>`

package/docs/ja/packages/next-intlayer/t.md

@@ -159,6 +159,23 @@ const greeting = t(translations);
 
 #### 例:
 
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
+```tsx codeFormat={["typescript", "esm", "commonjs"]}
+import type { FC, ReactNode } from "react";
+import type { Locales } from "intlayer";
+import { IntlayerProvider } from "next-intlayer/server";
+
+const Page: FC<{ locale: Locales; children: ReactNode }> = ({
+  locale,
+  children,
+}) => <IntlayerProvider locale={locale}>{children}</IntlayerProvider>;
+```
+
+ </Tab>
+ <Tab label='Intlayer <9.4' value='<9.4'>
+
 ```tsx codeFormat={["typescript", "esm", "commonjs"]}
 import type { FC } from "react";
 import type { Locales } from "intlayer";
@@ -174,6 +191,9 @@ const Page: FC<{ locale: Locales }> = ({ locale }) => (
 );
 ```
 
+ </Tab>
+</Tabs>
+
 ---
 
 ## よくあるエラーとトラブルシューティング

package/docs/ja/packages/next-intlayer/useIntlayer.md

@@ -77,6 +77,34 @@ Next.js アプリケーションでクライアントサイドコンポーネン
 
 ## Next.jsでの使用例
 
+`useIntlayer` フックを Next.js ページ内に実装して、アプリケーションの現在のロケールに基づいて動的にローカライズされたコンテンツを読み込む方法を以下に示します:
+
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
+```tsx fileName="src/pages/[locale]/index.tsx" codeFormat={["typescript", "esm"]}
+import { ClientComponentExample } from "@components/ClientComponentExample";
+import { ServerComponentExample } from "@components/ServerComponentExample";
+import { type NextPageIntlayer } from "next-intlayer";
+import { useIntlayer } from "next-intlayer";
+import { IntlayerProvider } from "next-intlayer/server";
+
+const HomePage: NextPageIntlayer = async ({ params }) => {
+  const { locale } = await params;
+
+  // ホームページのコンテンツを取得
+  const content = useIntlayer("homepage", locale);
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <p>{content.introduction}</p>
+      <ClientComponentExample />
+      <ServerComponentExample />
+    </IntlayerProvider>
+  );
+};
+```
+
 以下は、Next.jsのページ内で`useIntlayer`フックを実装し、アプリケーションの現在のロケールに基づいてローカライズされたコンテンツを動的に読み込む方法です。
 
 ```tsx fileName="src/pages/[locale]/index.tsx" codeFormat={["typescript", "esm"]}
@@ -104,6 +132,9 @@ const HomePage: NextPageIntlayer = async ({ params }) => {
 };
 ```
 
+ </Tab>
+</Tabs>
+
 ```tsx fileName="src/components/ClientComponentExample.tsx" codeFormat={["typescript", "esm"]}
 "use-client";
 

package/docs/ja/packages/next-intlayer/useLocale.md

@@ -104,6 +104,8 @@ const LocaleSwitcher: FC = () => {
 
 ## 戻り値
 
+`useLocale` フックを呼び出すと、以下のプロパティを含むオブジェクトが返されます:
+
 - **`locale`**: React コンテキストで設定されている現在のロケール。
 - **`defaultLocale`**: 設定で定義された主要なロケール。
 - **`availableLocales`**: 設定で定義された利用可能なすべてのロケールのリスト。

package/docs/ja/packages/react-intlayer/useDictionary.md

@@ -30,8 +30,6 @@ author: aymericzip
 
 ## Reactでの使用例
 
-以下は、Reactコンポーネントで`useDictionary`フックを使用する例です：
-
 ```tsx fileName="./ComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useDictionary } from "react-intlayer";

package/docs/ja/packages/react-intlayer/useI18n.md

@@ -77,6 +77,34 @@ author: aymericzip
 
 Reactコンポーネント内で`useI18n`フックを使用する例：
 
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
+```tsx fileName="src/App.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { useI18n } from "react-intlayer/server";
+import { Locales } from "intlayer";
+
+const App: FC<{ locale: Locales }> = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <ServerComponentExample />
+    </>
+  );
+};
+```
+
+ </Tab>
+ <Tab label='Intlayer <9.4' value='<9.4'>
+
 ```tsx fileName="src/App.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { ClientComponentExample, ServerComponentExample } from "@components";
@@ -101,6 +129,9 @@ const App: FC<{ locale: Locales }> = ({ locale }) => {
 };
 ```
 
+</Tab>
+</Tabs>
+
 ```tsx fileName="src/components/ComponentExample.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
 import { useI18n } from "react-intlayer";

package/docs/ja/packages/react-intlayer/useIntlayer.md

@@ -31,48 +31,6 @@ author: aymericzip
 
 ## Reactでの使用例
 
-Reactコンポーネント内での`useIntlayer`フックの使用例：
-
-```tsx fileName="src/app.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { ClientComponentExample, ServerComponentExample } from "@components";
-import { IntlayerProvider } from "react-intlayer";
-import { useIntlayer, IntlayerServerProvider } from "react-intlayer/server";
-import { Locales } from "intlayer";
-
-const App: FC<{ locale: Locales }> = ({ locale }) => {
-  const content = useIntlayer("homepage", locale);
-
-  return (
-    <>
-      <p>{content.introduction}</p>
-      <IntlayerProvider locale={locale}>
-        <ClientComponentExample />
-      </IntlayerProvider>
-      <IntlayerServerProvider locale={locale}>
-        <ServerComponentExample />
-      </IntlayerServerProvider>
-    </>
-  );
-};
-```
-
-```tsx fileName="src/components/ComponentExample.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const ComponentExample: FC = () => {
-  const content = useIntlayer("component-example");
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-    </div>
-  );
-};
-```
-
 ```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
 import { useIntlayer } from "react-intlayer/server";
 

package/docs/ja/packages/vite-intlayer/intlayerPrune.md

@@ -28,6 +28,8 @@ author: aymericzip
 
 `intlayerPrune` Vite プラグインは、アプリケーションのバンドルから未使用の辞書をツリーシェイクおよびプルーニングするために使用します。これにより、必要な多言語コンテンツのみを含めることで、最終的なバンドルサイズを削減できます。
 
+> このプラグインは [`intlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/vite-intlayer/intlayer.md) を使用する際に、自動的に含まれ設定されます。プラグインスタックを自分で構成する場合にのみ、手動で登録する必要があります。
+
 ## 使用法
 
 ### `intlayer()` の一部として（推奨）

package/docs/ja/per_locale_file.md

@@ -77,6 +77,17 @@ const helloWorldContent = {
 module.exports = helloWorldContent;
 ```
 
+```json5 fileName="hello-world.ja.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "hello-world",
+  "locale": "ja", // 重要
+  "content": {
+    "multilingualContent": "私のコンポーネントのタイトル",
+  },
+}
+```
+
 ```json fileName="hello-world.content.ts" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -95,6 +106,8 @@ module.exports = helloWorldContent;
 
 > 推奨: このフォーマットは、Intlayerのビジュアルエディターを使用する場合や、コード内で直接翻訳を管理する場合に最適です。
 
+> 注: どちらの場合でも、コンテンツ宣言ファイルは Intlayer に認識されるために `*.content.{ts,tsx,js,jsx,mjs,cjs,json}` の命名パターンに従う必要があります。`.[locale]` サフィックスはオプションで、命名規則としてのみ使用されます。
+
 ### ロケールごとのファイルのグローバル設定
 
 `intlayer.config.ts` ファイルに以下を追加することで、ロケールごとのファイルのグローバル設定を構成できます。
@@ -146,17 +159,6 @@ const helloWorldContent = {
 export default helloWorldContent;
 ```
 
-```json5 fileName="hello-world.en.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "hello-world",
-  "locale": "en", // 重要
-  "content": {
-    "multilingualContent": "私のコンポーネントのタイトル",
-  },
-}
-```
-
 ```json5 fileName="hello-world.es.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",
@@ -170,8 +172,6 @@ export default helloWorldContent;
 
 > 重要: locale フィールドが定義されていることを確認してください。これは Intlayer にファイルがどの言語を表しているかを伝えます。
 
-> 注意: どちらの場合も、コンテンツ宣言ファイルは Intlayer に認識されるために `*.content.{ts,tsx,js,jsx,mjs,cjs,json}` という命名パターンに従う必要があります。`.[locale]` のサフィックスは任意で、命名規則としてのみ使用されます。
-
 ## フォーマットの混在
 
 同じコンテンツキーに対して、両方の宣言方法を組み合わせることができます。例えば：