@intlayer/docs 9.5.5 → 9.5.7

package/docs/ja/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-19
+updatedAt: 2026-09-21
 title: "Astro i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）Astroアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
@@ -160,6 +160,29 @@ bun add intlayer astro-intlayer
 </Step>
 <Step number={2} title="プロジェクトの設定">
 
+### アーキテクチャ
+
+このアーキテクチャでは、`astro.config.ts` に登録された `intlayer()` 統合が辞書をビルドし、各リクエストのロケールを解決して `Astro.locals.intlayer` に公開するミドルウェアを追加します。ページは `src/pages/[...locale]/` レストセグメントの下に配置されるため、デフォルトロケールはプレフィックスなしで提供され、他のすべてのロケールには専用の URL が割り当てられます。`.astro` ファイルは `astro-intlayer` の `useIntlayer` / `useLocale` フックを使用してコンテンツを読み取り、コンテンツ宣言は `src/` 内のコンポーネントと一緒に配置されます。
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── LocaleSwitcher.astro      # Locale switcher component
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page (rest param also serves the default locale)
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() integration
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 設定
+
 アプリケーションの言語を設定するための設定ファイルを作成します：
 
 ```typescript fileName="intlayer.config.ts"
@@ -401,7 +424,7 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ```
 
 > **永続化に関する注意:**
-> クライアント側の `useLocale` から提供される `setLocale` は、ユーザーの言語設定を Cookie に保存します。これにより、Intlayer ミドルウェアは選択を記憶し、次回のアクセス時にユーザーを優先言語に自動的にリダイレクトできます。
+> クライアント側の `useLocale` による `setLocale` は、ユーザーの言語設定を cookie に保存します。これにより、Intlayer は選択を記憶し、今後のアクセス時にユーザーを希望する言語に自動的にリダイレクトできます。オンデマンドレンダリングされたページ（`output: 'server'` または `prerender = false` のアダプター）は HTML が送信される前に Intlayer ミドルウェアによってリダイレクトされ、静的ファイルとして提供される事前レンダリングされたページは、統合機能が各ページに注入する小さなスクリプトによってリダイレクトされます。両方を無効にするには `routing.enableProxy` を `false` に設定します。`astro dev` では、`routing.enableProxy` が `true` に設定されていない限り cookie はリダイレクト元として無視されるため、古い cookie が作業中のページをハイジャックすることはありません。
 >
 > **サーバー / クライアント間の相互互換性:**
 > `astro-intlayer` は、フロントマター内ではサーバーフック（`Astro.locals` の読み取り）に、`<script>` ブロックおよびアイランド内では `vanilla-intlayer` のクライアントフックに解決され、同じ名前とデータ構造を持ちます。`setLocale` と `onChange` はクライアント上でのみ動作します。クライアントストアを初期化するために、クライアント側で一度 `installIntlayer()` を呼び出してください。`astro-intlayer/client` はクライアントエントリを明示的に公開します。
@@ -428,10 +451,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -472,11 +495,12 @@ export const GET: APIRoute = ({ site }) => {
 
 お好みのフレームワークを使用してアプリケーションを構築し続けましょう。
 
-- Intlayer + React: [Intlayer with React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+react.md)
-- Intlayer + Vue: [Intlayer with Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+vue.md)
-- Intlayer + Svelte: [Intlayer with Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+svelte.md)
-- Intlayer + Solid: [Intlayer with Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+solid.md)
-- Intlayer + Preact: [Intlayer with Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+preact.md)
+- Intlayer + React: [Intlayer with React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_astro_react.md)
+- Intlayer + Vue: [Intlayer with Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_astro_vue.md)
+- Intlayer + Svelte: [Intlayer with Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_astro_svelte.md)
+- Intlayer + Solid: [Intlayer with Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_astro_solid.md)
+- Intlayer + Preact: [Intlayer with Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_astro_preact.md)
+- Intlayer + Lit: [Intlayer with Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_astro_lit.md)
 </Step>
 
 <Step number={15} title="Extract the content of your components" isOptional={true}>
@@ -546,21 +570,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+アプリケーションをビルドしてコンポーネントを変換し、コンテンツを抽出します。
 
 ```bash packageManager="npm"
 npm run build # Or npm run dev

package/docs/ja/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Astro + Lit i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）Astro + Litアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
@@ -20,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Astro ページでの astro-intlayer の useIntlayer / useLocale フックの使用"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"
@@ -151,7 +154,7 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   設定管理、翻訳、[コンテンツ宣言](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)、トランスパイル、および[CLIコマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/index.md)のための国際化ツールを提供するコアパッケージ。
 
 - **astro-intlayer**
-  Intlayerを[Viteバンドラー](https://vite.dev/guide/why.html#why-bundle-for-production)と統合するためのAstro統合プラグイン、およびユーザーの優先ロケールの検出、クッキーの管理、URLリダイレクトの処理を行うミドルウェアが含まれています。
+  Intlayer を [Vite バンドラー](https://vite.dev/guide/why.html#why-bundle-for-production) と統合する Astro 統合プラグイン、各リクエストのロケールを `Astro.locals.intlayer` に解決するミドルウェア、および `useIntlayer` / `useDictionary` / `useLocale` フックが含まれています。同じインポートパスが `.astro` フロントマターのサーバー実装と `<script>` ブロック内のクライアント実装（`vanilla-intlayer` ベース）に解決されます。
 
 - **lit**
   高速で軽量なウェブコンポーネントを構築するためのコアLitパッケージ。
@@ -165,6 +168,30 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 </Step>
 <Step number={2} title="プロジェクトの設定">
 
+### アーキテクチャ
+
+このアーキテクチャでは、`astro.config.ts` に登録された `intlayer()` 統合が辞書をビルドし、各リクエストのロケールを解決して `Astro.locals.intlayer` に公開するミドルウェアを追加します。ページは `src/pages/[...locale]/` レストセグメントの下に配置されるため、デフォルトロケールはプレフィックスなしで提供され、他のすべてのロケールには専用の URL が割り当てられます。`.astro` ファイルはサーバーレンダリング用に `astro-intlayer` の `useIntlayer` / `useLocale` フックを使用してコンテンツを読み取り、Lit アイランド (`src/components/lit/LitDemo.ts`) はサーバーで検出されたロケールを prop として受け取り、インタラクティブ部分のために `lit-intlayer` に渡します。コンテンツ宣言は `src/` 内のコンポーネントと一緒に配置されます。
+
+```bash
+.
+├── src
+│   ├── components
+│   │   └── lit
+│   │       ├── app.content.ts        # App content declaration
+│   │       └── LitDemo.ts            # Lit custom element (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the custom element
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and lit() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 設定
+
 アプリケーションの言語を設定するための設定ファイルを作成します：
 
 ```typescript fileName="intlayer.config.ts"
@@ -245,19 +272,21 @@ export default litDemoContent;
 </Step>
 <Step number={5} title="Astroでのコンテンツの使用">
 
-`intlayer`からエクスポートされたコアヘルパーを使用して、`.astro`ファイル内で直接辞書を消費できます。また、各ページにhreflangや正規リンクなどのSEOメタデータを追加する必要があります。Litカスタム要素はクライアントサイドの `<script>` を通じてインポートされ、bodyに配置されます。
+`astro-intlayer` がエクスポートするフックを使用して、`.astro` ファイルで辞書を利用します。これらは `react-intlayer` と同じシグネチャを共有しており、`useIntlayer("key")` は辞書の内容を返し、`useLocale()` は現在のロケールを引数なしで返します。
+
+ロケールは `astro-intlayer` ミドルウェアから取得されます。このミドルウェアは独自の `src/middleware.ts` の前に登録され、各リクエストについて URL プレフィックス、クライアントが保持するロケール（Cookie またはヘッダー）、`Accept-Language` の順に解決し、`Astro.locals.intlayer` に保存します。事前レンダリングされたページは訪問者ごとに一度だけレンダリングされるため、URL のみを使用します。
+
+Litカスタム要素はクライアントサイドの `<script>` を通じてインポートされ、bodyに配置されます。
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 
 export const getStaticPaths = () => {
@@ -266,8 +295,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { greeting } = getIntlayer("lit-demo", locale);
+// ミドルウェアによって解決されたロケール（例: /ja/about -> 'ja'）
+const { locale } = useLocale();
+
+// そのロケールの 'lit-demo' 辞書の内容
+const { greeting } = useIntlayer("lit-demo");
 ---
 
 <!doctype html>
@@ -326,6 +358,8 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` は、独自のミドルウェアやエンドポイントにも `locale`、`defaultLocale`、`availableLocales` を公開します。第2引数としてロケールまたはセレクターを渡すことで（`useIntlayer("app", "fr")`、`useIntlayer("faq", { item: 2 })`）、1回の呼び出しに対してリクエストロケールを上書きできます。
+
 > **ルーティング設定に関する注意:**
 > 使用するディレクトリ構造は、`intlayer.config.ts` の `middleware.routing` 設定によります：
 >
@@ -482,10 +516,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -589,21 +623,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+アプリケーションをビルドしてコンポーネントを変換し、コンテンツを抽出します。
 
 ```bash packageManager="npm"
 npm run build # Or npm run dev

package/docs/ja/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Astro + Preact i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）Astro + Preactアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Astro ページでの astro-intlayer の useIntlayer / useLocale フックの使用"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
   設定管理、翻訳、[コンテンツ宣言](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)、トランスパイル、および[CLIコマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/index.md)のための国際化ツールを提供するコアパッケージ。
 
 - **astro-intlayer**
-  Intlayerを[Viteバンドラー](https://vite.dev/guide/why.html#why-bundle-for-production)と統合するためのAstro統合プラグイン、およびユーザーの優先ロケールの検出、クッキーの管理、URLリダイレクトの処理を行うミドルウェアが含まれています。
+  Intlayer を [Vite バンドラー](https://vite.dev/guide/why.html#why-bundle-for-production) と統合する Astro 統合プラグイン、各リクエストのロケールを `Astro.locals.intlayer` に解決するミドルウェア、および `useIntlayer` / `useDictionary` / `useLocale` フックが含まれています。同じインポートパスが `.astro` フロントマターのサーバー実装と `<script>` ブロック内のクライアント実装（`vanilla-intlayer` ベース）に解決されます。
 
 - **preact**
   コアPreactパッケージ - Reactの高速で軽量な代替手段です。
@@ -164,6 +167,31 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 </Step>
 <Step number={2} title="プロジェクトの設定">
 
+### アーキテクチャ
+
+このアーキテクチャでは、`astro.config.ts` に登録された `intlayer()` 統合が辞書をビルドし、各リクエストのロケールを解決して `Astro.locals.intlayer` に公開するミドルウェアを追加します。ページは `src/pages/[...locale]/` レストセグメントの下に配置されるため、デフォルトロケールはプレフィックスなしで提供され、他のすべてのロケールには専用の URL が割り当てられます。`.astro` ファイルはサーバーレンダリング用に `astro-intlayer` の `useIntlayer` / `useLocale` フックを使用してコンテンツを読み取り、Preact アイランド (`src/components/preact/PreactIsland.tsx`) はサーバーで検出されたロケールを prop として受け取り、インタラクティブ部分のために `preact-intlayer` に渡します。コンテンツ宣言は `src/` 内のコンポーネントと一緒に配置されます。
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── preact
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── PreactIsland.tsx      # Preact island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and preact() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 設定
+
 アプリケーションの言語を設定するための設定ファイルを作成します：
 
 ```typescript fileName="intlayer.config.ts"
@@ -241,19 +269,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Astroでのコンテンツの使用">
 
-`intlayer`からエクスポートされたコアヘルパーを使用して、`.astro`ファイル内で直接辞書を消費できます。また、各ページにhreflangや正規リンクなどのSEOメタデータを追加し、クライアントサイドのインタラクティブなコンテンツのためにPreactアイランドを組み込む必要があります。
+`astro-intlayer` がエクスポートするフックを使用して、`.astro` ファイルで辞書を利用します。これらは `react-intlayer` と同じシグネチャを共有しており、`useIntlayer("key")` は辞書の内容を返し、`useLocale()` は現在のロケールを引数なしで返します。
+
+ロケールは `astro-intlayer` ミドルウェアから取得されます。このミドルウェアは独自の `src/middleware.ts` の前に登録され、各リクエストについて URL プレフィックス、クライアントが保持するロケール（Cookie またはヘッダー）、`Accept-Language` の順に解決し、`Astro.locals.intlayer` に保存します。事前レンダリングされたページは訪問者ごとに一度だけレンダリングされるため、URL のみを使用します。
+
+また、各ページにhreflangや正規リンクなどのSEOメタデータを追加し、クライアントサイドのインタラクティブなコンテンツのためにPreactアイランドを組み込む必要があります。
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import { PreactIsland } from "../../components/preact/PreactIsland";
 
@@ -263,8 +293,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// ミドルウェアによって解決されたロケール（例: /ja/about -> 'ja'）
+const { locale } = useLocale();
+
+// そのロケールの 'app' 辞書の内容
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -320,6 +353,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` は、独自のミドルウェアやエンドポイントにも `locale`、`defaultLocale`、`availableLocales` を公開します。第2引数としてロケールまたはセレクターを渡すことで（`useIntlayer("app", "fr")`、`useIntlayer("faq", { item: 2 })`）、1回の呼び出しに対してリクエストロケールを上書きできます。
+
 > **ルーティング設定に関する注意:**
 > 使用するディレクトリ構造は、`intlayer.config.ts` の `middleware.routing` 設定によります：
 >
@@ -436,10 +471,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -543,21 +578,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+アプリケーションをビルドしてコンポーネントを変換し、コンテンツを抽出します。
 
 ```bash packageManager="npm"
 npm run build # Or npm run dev

package/docs/ja/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Astro + React i18n - あなたのアプリを翻訳する完全ガイド"
 description: "i18nextはもう不要。2026年に多言語（i18n）Astro + Reactアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Astro ページでの astro-intlayer の useIntlayer / useLocale フックの使用"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"
@@ -153,7 +156,7 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
   設定管理、翻訳、[コンテンツ宣言](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)、トランスパイル、および[CLIコマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/index.md)のための国際化ツールを提供するコアパッケージ。
 
 - **astro-intlayer**
-  Intlayerを[Viteバンドラー](https://vite.dev/guide/why.html#why-bundle-for-production)と統合するためのAstro統合プラグイン、およびユーザーの優先ロケールの検出、クッキーの管理、URLリダイレクトの処理を行うミドルウェアが含まれています。
+  Intlayer を [Vite バンドラー](https://vite.dev/guide/why.html#why-bundle-for-production) と統合する Astro 統合プラグイン、各リクエストのロケールを `Astro.locals.intlayer` に解決するミドルウェア、および `useIntlayer` / `useDictionary` / `useLocale` フックが含まれています。同じインポートパスが `.astro` フロントマターのサーバー実装と `<script>` ブロック内のクライアント実装（`vanilla-intlayer` ベース）に解決されます。
 
 - **react**, **react-dom**
   ブラウザでReactコンポーネントをレンダリングするために必要なコアReactパッケージ。
@@ -167,6 +170,31 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
 </Step>
 <Step number={2} title="プロジェクトの設定">
 
+### アーキテクチャ
+
+このアーキテクチャでは、`astro.config.ts` に登録された `intlayer()` 統合が辞書をビルドし、各リクエストのロケールを解決して `Astro.locals.intlayer` に公開するミドルウェアを追加します。ページは `src/pages/[...locale]/` レストセグメントの下に配置されるため、デフォルトロケールはプレフィックスなしで提供され、他のすべてのロケールには専用の URL が割り当てられます。`.astro` ファイルはサーバーレンダリング用に `astro-intlayer` の `useIntlayer` / `useLocale` フックを使用してコンテンツを読み取り、React アイランド (`src/components/react/ReactIsland.tsx`) はサーバーで検出されたロケールを prop として受け取り、インタラクティブ部分のために `react-intlayer` に渡します。コンテンツ宣言は `src/` 内のコンポーネントと一緒に配置されます。
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── react
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── ReactIsland.tsx       # React island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and react() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### 設定
+
 アプリケーションの言語を設定するための設定ファイルを作成します：
 
 ```typescript fileName="intlayer.config.ts"
@@ -242,19 +270,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Astroでのコンテンツの使用">
 
-`intlayer`からエクスポートされたコアヘルパーを使用して、`.astro`ファイル内で直接辞書を消費できます。また、各ページにhreflangや正規リンクなどのSEOメタデータを追加し、クライアントサイドのインタラクティブなコンテンツのためにReactアイランドを組み込む必要があります。
+`astro-intlayer` がエクスポートするフックを使用して、`.astro` ファイルで辞書を利用します。これらは `react-intlayer` と同じシグネチャを共有しており、`useIntlayer("key")` は辞書の内容を返し、`useLocale()` は現在のロケールを引数なしで返します。
+
+ロケールは `astro-intlayer` ミドルウェアから取得されます。このミドルウェアは独自の `src/middleware.ts` の前に登録され、各リクエストについて URL プレフィックス、クライアントが保持するロケール（Cookie またはヘッダー）、`Accept-Language` の順に解決し、`Astro.locals.intlayer` に保存します。事前レンダリングされたページは訪問者ごとに一度だけレンダリングされるため、URL のみを使用します。
+
+また、各ページにhreflangや正規リンクなどのSEOメタデータを追加し、クライアントサイドのインタラクティブなコンテンツのためにReactアイランドを組み込む必要があります。
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import { ReactIsland } from "../../components/react/ReactIsland";
 
@@ -264,8 +294,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// ミドルウェアによって解決されたロケール（例: /ja/about -> 'ja'）
+const { locale } = useLocale();
+
+// そのロケールの 'app' 辞書の内容
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -321,6 +354,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` は、独自のミドルウェアやエンドポイントにも `locale`、`defaultLocale`、`availableLocales` を公開します。第2引数としてロケールまたはセレクターを渡すことで（`useIntlayer("app", "fr")`、`useIntlayer("faq", { item: 2 })`）、1回の呼び出しに対してリクエストロケールを上書きできます。
+
 > **ルーティング設定に関する注意:**
 > 使用するディレクトリ構造は、`intlayer.config.ts` の `middleware.routing` 設定によります：
 >
@@ -433,10 +468,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -540,21 +575,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+アプリケーションをビルドしてコンポーネントを変換し、コンテンツを抽出します。
 
 ```bash packageManager="npm"
 npm run build # Or npm run dev