@intlayer/docs 9.5.5 → 9.5.7

package/docs/uk/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. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
@@ -160,6 +160,29 @@ bun add intlayer astro-intlayer
 </Step>
 <Step number={2} title="Налаштуйте свій проект">
 
+### Архітектура
+
+У цій архітектурі інтеграція `intlayer()`, зареєстрована в `astro.config.ts`, збирає ваші словники та додає middleware, який визначає локаль кожного запиту та надає її в `Astro.locals.intlayer`. Сторінки розміщуються під rest-сегментом `src/pages/[...locale]/`, завдяки чому локаль за замовчуванням обслуговується без префікса, а кожна інша локаль отримує власну виділену URL-адресу. Файли `.astro` читають вміст за допомогою хуків `useIntlayer` / `useLocale` з `astro-intlayer`, а оголошення вмісту розміщуються поруч із вашими компонентами в `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);
 ```
 
 > **Примітка щодо збереження стану:**
-> `setLocale` із клієнтського `useLocale` зберігає мовні вподобання користувача в cookie. Це дозволяє middleware Intlayer запам'ятовувати вибір і автоматично перенаправляти користувача на бажану мову під час наступних візитів.
+> `setLocale` із клієнтського `useLocale` зберігає мовні вподобання користувача в cookie. Це дозволяє Intlayer запам'ятовувати вибір і автоматично перенаправляти користувача на бажану мову під час наступних візитів: сторінки, що рендерилися на вимогу (адаптер з `output: 'server'` або `prerender = false`), перенаправляються middleware Intlayer до надсилання будь-якого HTML, тоді як попередньо згенеровані сторінки, що надаються як статичні файли, перенаправляються невеликим скриптом, який інтеграція вставляє в кожну сторінку. Встановіть `routing.enableProxy` в `false`, щоб вимкнути обидва механізми. В `astro dev` cookie ігнорується як джерело перенаправлення, якщо тільки `routing.enableProxy` не встановлено в `true`, тому застарілий cookie не зможе перехопити сторінки, над якими ви працюєте.
 >
 > **Взаємосумісність сервера та клієнта:**
 > `astro-intlayer` розпізнається як серверні хуки у фронтматтері (зчитуючи `Astro.locals`) та як клієнтські хуки `vanilla-intlayer` у блоках `<script>` та островах (islands), з тими самими іменами та структурою даних. `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 з React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+react.md)
-- Intlayer + Vue: [Intlayer з Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+vue.md)
-- Intlayer + Svelte: [Intlayer з Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+svelte.md)
-- Intlayer + Solid: [Intlayer з Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+solid.md)
-- Intlayer + Preact: [Intlayer з Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+preact.md)
+- Intlayer + React: [Intlayer з React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_react.md)
+- Intlayer + Vue: [Intlayer з Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_vue.md)
+- Intlayer + Svelte: [Intlayer з Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_svelte.md)
+- Intlayer + Solid: [Intlayer з Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_solid.md)
+- Intlayer + Preact: [Intlayer з Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_preact.md)
+- Intlayer + Lit: [Intlayer з Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_lit.md)
 </Step>
 
 <Step number={15} title="Витягніть вміст ваших компонентів" isOptional={true}>
@@ -542,21 +566,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Компілятор Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Оновіть свій `vite.config.ts`, щоб включити плагін `intlayerCompiler`:
-
-```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 # Або npm run dev

package/docs/uk/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-06-23
+updatedAt: 2026-09-21
 title: "Astro + Lit i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + Lit. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, 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: "Використання хуків useIntlayer / useLocale з astro-intlayer на сторінці Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Оновлення використання API useIntlayer у Solid для прямого доступу до властивостей"
@@ -151,7 +154,7 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   Основний пакет, що надає інструменти i18n для керування конфігурацією, перекладами, [декларацією вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md), транспіляцією та [командами CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/index.md).
 
 - **astro-intlayer**
-  Плагін інтеграції Astro для зв'язку Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production); він також включає middleware для визначення бажаної мови користувача, керування cookie та обробки перенаправлень URL.
+  Включає плагін інтеграції Astro для інтеграції Intlayer із [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), middleware, що розпізнає локаль кожного запиту в `Astro.locals.intlayer`, та хуки `useIntlayer` / `useDictionary` / `useLocale`. Той самий шлях імпорту розпізнається як серверна реалізація у фронтматтері `.astro` та як клієнтська (на базі `vanilla-intlayer`) у блоках `<script>`.
 
 - **lit**
   Основний пакет Lit для створення швидких і легких Web Components.
@@ -165,6 +168,30 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 </Step>
 <Step number={2} title="Налаштуйте свій проект">
 
+### Архітектура
+
+У цій архітектурі інтеграція `intlayer()`, зареєстрована в `astro.config.ts`, збирає ваші словники та додає middleware, який визначає локаль кожного запиту та надає її в `Astro.locals.intlayer`. Сторінки розміщуються під rest-сегментом `src/pages/[...locale]/`, завдяки чому локаль за замовчуванням обслуговується без префікса, а кожна інша локаль отримує власну виділену URL-адресу. Файли `.astro` читають вміст за допомогою хуків `useIntlayer` / `useLocale` з `astro-intlayer` для серверного рендерингу, а острів Lit (`src/components/lit/LitDemo.ts`) отримує визначену сервером локаль як проп і передає її в `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"
@@ -246,19 +273,21 @@ export default litDemoContent;
 </Step>
 <Step number={5} title="Використання вмісту в Astro">
 
-Ви можете використовувати словники безпосередньо у ваших `.astro` файлах, використовуючи основні допоміжні функції, експортовані з `intlayer`. Вам також слід додати метадані SEO (такі як hreflang та канонічні посилання) на кожній сторінці. Lit custom elements імпортуються за допомогою блоку `<script>` на стороні клієнта і розміщуються в body.
+Використовуйте ваші словники у файлах `.astro` за допомогою хуків, що експортуються `astro-intlayer`. Вони мають такі ж сигнатури, як і `react-intlayer`: `useIntlayer("key")` повертає вміст словника, а `useLocale()` поточну локаль, без необхідності передавати аргументи.
+
+Локаль надходить із middleware `astro-intlayer`, яке інтеграція реєструє перед вашим власним `src/middleware.ts`. Воно визначає її для кожного запиту, на основі префікса URL, потім збереженої клієнтом локалі (cookie або заголовок), потім `Accept-Language`, і зберігає в `Astro.locals.intlayer`. Попередньо відрендерені сторінки використовують лише URL, оскільки вони рендеряться один раз для кожного відвідувача.
+
+Lit custom elements імпортуються за допомогою блоку `<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 = () => {
@@ -267,8 +296,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { greeting } = getIntlayer("lit-demo", locale);
+// Локаль, визначена middleware (напр. /uk/about -> 'uk')
+const { locale } = useLocale();
+
+// Вміст словника 'lit-demo' для цієї локалі
+const { greeting } = useIntlayer("lit-demo");
 ---
 
 <!doctype html>
@@ -327,6 +359,8 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` також надає доступ до `locale`, `defaultLocale` та `availableLocales` у ваших власних middleware та ендпоінтах. Передайте локаль або селектор другим аргументом (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`), щоб перевизначити локаль запиту для одного виклику.
+
 > **Примітка щодо налаштування маршрутизації:**
 > Структура каталогів, яку ви використовуєте, залежить від параметра `middleware.routing` у `intlayer.config.ts`:
 >
@@ -483,10 +517,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" },
@@ -586,21 +620,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Компілятор Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Оновіть свій `vite.config.ts`, щоб включити плагін `intlayerCompiler`:
-
-```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 # Або npm run dev

package/docs/uk/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-06-23
+updatedAt: 2026-09-21
 title: "Astro + Preact i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + Preact. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, 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: "Використання хуків useIntlayer / useLocale з astro-intlayer на сторінці Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Оновлення використання API useIntlayer у Solid для прямого доступу до властивостей"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
   Основний пакет, що надає інструменти i18n для керування конфігурацією, перекладами, [декларацією вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md), транспіляцією та [командами CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/index.md).
 
 - **astro-intlayer**
-  Плагін інтеграції Astro для зв'язку Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production); він також включає middleware для визначення бажаної мови користувача, керування cookie та обробки перенаправлень URL.
+  Включає плагін інтеграції Astro для інтеграції Intlayer із [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), middleware, що розпізнає локаль кожного запиту в `Astro.locals.intlayer`, та хуки `useIntlayer` / `useDictionary` / `useLocale`. Той самий шлях імпорту розпізнається як серверна реалізація у фронтматтері `.astro` та як клієнтська (на базі `vanilla-intlayer`) у блоках `<script>`.
 
 - **preact**
   Основний пакет Preact - швидка і легка альтернатива React.
@@ -164,6 +167,31 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 </Step>
 <Step number={2} title="Налаштуйте свій проект">
 
+### Архітектура
+
+У цій архітектурі інтеграція `intlayer()`, зареєстрована в `astro.config.ts`, збирає ваші словники та додає middleware, який визначає локаль кожного запиту та надає її в `Astro.locals.intlayer`. Сторінки розміщуються під rest-сегментом `src/pages/[...locale]/`, завдяки чому локаль за замовчуванням обслуговується без префікса, а кожна інша локаль отримує власну виділену URL-адресу. Файли `.astro` читають вміст за допомогою хуків `useIntlayer` / `useLocale` з `astro-intlayer` для серверного рендерингу, а острів Preact (`src/components/preact/PreactIsland.tsx`) отримує визначену сервером локаль як проп і передає її в `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"
@@ -243,19 +271,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Використання вмісту в Astro">
 
-Ви можете використовувати словники безпосередньо у ваших `.astro` файлах, використовуючи основні допоміжні функції, експортовані з `intlayer`. Вам також слід додати метадані SEO (такі як hreflang та канонічні посилання) на кожній сторінці та додати Preact island для інтерактивного вмісту на стороні клієнта.
+Використовуйте ваші словники у файлах `.astro` за допомогою хуків, що експортуються `astro-intlayer`. Вони мають такі ж сигнатури, як і `react-intlayer`: `useIntlayer("key")` повертає вміст словника, а `useLocale()` поточну локаль, без необхідності передавати аргументи.
+
+Локаль надходить із middleware `astro-intlayer`, яке інтеграція реєструє перед вашим власним `src/middleware.ts`. Воно визначає її для кожного запиту, на основі префікса URL, потім збереженої клієнтом локалі (cookie або заголовок), потім `Accept-Language`, і зберігає в `Astro.locals.intlayer`. Попередньо відрендерені сторінки використовують лише URL, оскільки вони рендеряться один раз для кожного відвідувача.
+
+Вам також слід додати метадані SEO (такі як hreflang та канонічні посилання) на кожній сторінці та додати Preact island для інтерактивного вмісту на стороні клієнта.
 
 ```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/ReactIsland";
 
@@ -265,8 +295,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Локаль, визначена middleware (напр. /uk/about -> 'uk')
+const { locale } = useLocale();
+
+// Вміст словника 'app' для цієї локалі
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -322,6 +355,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` також надає доступ до `locale`, `defaultLocale` та `availableLocales` у ваших власних middleware та ендпоінтах. Передайте локаль або селектор другим аргументом (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`), щоб перевизначити локаль запиту для одного виклику.
+
 > **Примітка щодо налаштування маршрутизації:**
 > Структура каталогів, яку ви використовуєте, залежить від параметра `middleware.routing` у `intlayer.config.ts`:
 >
@@ -438,10 +473,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" },
@@ -541,21 +576,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Компілятор Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Оновіть свій `vite.config.ts`, щоб включити плагін `intlayerCompiler`:
-
-```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 # Або npm run dev

package/docs/uk/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-06-23
+updatedAt: 2026-09-21
 title: "Astro + React i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + React. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, 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: "Використання хуків useIntlayer / useLocale з astro-intlayer на сторінці Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Оновлення використання API useIntlayer у Solid для прямого доступу до властивостей"
@@ -153,7 +156,7 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
   Основний пакет, що надає інструменти i18n для керування конфігурацією, перекладами, [декларацією вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md), транспіляцією та [командами CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/index.md).
 
 - **astro-intlayer**
-  Плагін інтеграції Astro для зв'язку Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production); він також включає middleware для визначення бажаної мови користувача, керування cookie та обробки перенаправлень URL.
+  Включає плагін інтеграції Astro для інтеграції Intlayer із [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), middleware, що розпізнає локаль кожного запиту в `Astro.locals.intlayer`, та хуки `useIntlayer` / `useDictionary` / `useLocale`. Той самий шлях імпорту розпізнається як серверна реалізація у фронтматтері `.astro` та як клієнтська (на базі `vanilla-intlayer`) у блоках `<script>`.
 
 - **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="Налаштуйте свій проект">
 
+### Архітектура
+
+У цій архітектурі інтеграція `intlayer()`, зареєстрована в `astro.config.ts`, збирає ваші словники та додає middleware, який визначає локаль кожного запиту та надає її в `Astro.locals.intlayer`. Сторінки розміщуються під rest-сегментом `src/pages/[...locale]/`, завдяки чому локаль за замовчуванням обслуговується без префікса, а кожна інша локаль отримує власну виділену URL-адресу. Файли `.astro` читають вміст за допомогою хуків `useIntlayer` / `useLocale` з `astro-intlayer` для серверного рендерингу, а острів React (`src/components/react/ReactIsland.tsx`) отримує визначену сервером локаль як проп і передає її в `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"
@@ -243,19 +271,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Використання вмісту в Astro">
 
-Ви можете використовувати словники безпосередньо у ваших `.astro` файлах, використовуючи основні допоміжні функції, експортовані з `intlayer`. Вам також слід додати метадані SEO (такі як hreflang та канонічні посилання) на кожній сторінці та додати React island для інтерактивного вмісту на стороні клієнта.
+Використовуйте ваші словники у файлах `.astro` за допомогою хуків, що експортуються `astro-intlayer`. Вони мають такі ж сигнатури, як і `react-intlayer`: `useIntlayer("key")` повертає вміст словника, а `useLocale()` поточну локаль, без необхідності передавати аргументи.
+
+Локаль надходить із middleware `astro-intlayer`, яке інтеграція реєструє перед вашим власним `src/middleware.ts`. Воно визначає її для кожного запиту, на основі префікса URL, потім збереженої клієнтом локалі (cookie або заголовок), потім `Accept-Language`, і зберігає в `Astro.locals.intlayer`. Попередньо відрендерені сторінки використовують лише URL, оскільки вони рендеряться один раз для кожного відвідувача.
+
+Вам також слід додати метадані SEO (такі як hreflang та канонічні посилання) на кожній сторінці та додати React island для інтерактивного вмісту на стороні клієнта.
 
 ```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";
 
@@ -265,8 +295,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Локаль, визначена middleware (напр. /uk/about -> 'uk')
+const { locale } = useLocale();
+
+// Вміст словника 'app' для цієї локалі
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -322,6 +355,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` також надає доступ до `locale`, `defaultLocale` та `availableLocales` у ваших власних middleware та ендпоінтах. Передайте локаль або селектор другим аргументом (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`), щоб перевизначити локаль запиту для одного виклику.
+
 > **Примітка щодо налаштування маршрутизації:**
 > Структура каталогів, яку ви використовуєте, залежить від параметра `middleware.routing` у `intlayer.config.ts`:
 >
@@ -434,10 +469,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" },
@@ -537,21 +572,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Компілятор Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Оновіть свій `vite.config.ts`, щоб включити плагін `intlayerCompiler`:
-
-```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 # Або npm run dev