@intlayer/docs 9.5.5 → 9.5.6

package/docs/en/intlayer_with_astro.md

@@ -458,7 +458,7 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ```
 
 > **Note on Persistence:**
-> `setLocale` from the client-side `useLocale` saves the user's language preference in a cookie. This allows the Intlayer middleware to remember the choice and automatically redirect the user to their preferred language on future visits.
+> `setLocale` from the client-side `useLocale` saves the user's language preference in a cookie. This allows Intlayer to remember the choice and automatically redirect the user to their preferred language on future visits: on-demand rendered pages (an adapter with `output: 'server'` or `prerender = false`) are redirected by the Intlayer middleware before any HTML is sent, while prerendered pages, served as static files, are redirected by a small script the integration injects in every page. Set `routing.enableProxy` to `false` to turn both off. In `astro dev`, the cookie is ignored as a redirect source unless `routing.enableProxy` is set to `true`, so a stale cookie cannot hijack the pages you are working on.
 >
 > **Server / client intercompatibility:**
 > `astro-intlayer` resolves to its server hooks in the frontmatter (reading `Astro.locals`) and to the client hooks of `vanilla-intlayer` in `<script>` blocks and islands, with the same names and content shape. `setLocale` and `onChange` only act on the client — call `installIntlayer()` there once to seed the client store. `astro-intlayer/client` exposes the client entry explicitly.
@@ -485,10 +485,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" },
@@ -535,7 +535,6 @@ Continue using your favorite framework to build your application.
 - Intlayer + Solid: [Intlayer with Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_astro_solid.md)
 - Intlayer + Preact: [Intlayer with Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_astro_preact.md)
 - Intlayer + Lit: [Intlayer with Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_astro_lit.md)
-- Intlayer + Vanilla JS: [Intlayer with Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_astro_vanilla.md)
 </Step>
 
 <Step number={15} title="Extract the content of your components" isOptional={true}>
@@ -605,21 +604,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
-  ],
-});
-```
+Build your application to transform your components and extract the content
 
 ```bash packageManager="npm"
 npm run build # Or npm run dev

package/docs/en/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-29
+updatedAt: 2026-09-20
 title: "Astro + Lit i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Astro + Lit app. Translate with AI agents and optimize bundle size, SEO and performances."
 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: "Use the useIntlayer / useLocale hooks of astro-intlayer in the Astro page"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Update Solid useIntlayer API usage to direct property access"
@@ -151,7 +154,7 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   The core package that provides internationalization tools for configuration management, translation, [content declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md), transpilation, and [CLI commands](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md).
 
 - **astro-intlayer**
-  Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
+  Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), a middleware that resolves the locale of every request into `Astro.locals.intlayer`, and the `useIntlayer` / `useDictionary` / `useLocale` hooks. The same import path resolves to the server implementation in your `.astro` frontmatter and to the client one (backed by `vanilla-intlayer`) in `<script>` blocks.
 
 - **lit**
   The core Lit package for building fast, lightweight Web Components.
@@ -243,19 +246,21 @@ export default litDemoContent;
 </Step>
 <Step number={5} title="Use your content in Astro">
 
-You can consume dictionaries directly in `.astro` files using the core helpers exported by `intlayer`. You should also add SEO metadata like hreflang and canonical links to each page. The Lit custom element is then imported via a client-side `<script>` and placed in the body.
+Consume your dictionaries in `.astro` files with the hooks exported by `astro-intlayer`. They share the signatures of the framework bindings: `useIntlayer("key")` returns the content of a dictionary and `useLocale()` the current locale, with no argument to pass around.
+
+The locale comes from the `astro-intlayer` middleware, which the integration registers for you ahead of your own `src/middleware.ts`. It resolves it for every request, from the URL prefix, then the locale persisted by the client (cookie or header), then `Accept-Language`, and stores it in `Astro.locals.intlayer`. Prerendered pages only use the URL, since they are rendered once for every visitor.
+
+You should also add SEO metadata like hreflang and canonical links to each page. The Lit custom element is then imported via a client-side `<script>` and placed in the body.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
   getPrefix,
   localeMap,
   defaultLocale,
   getHTMLTextDir,
-  type LocalesValues,
 } from "intlayer";
 
 export const getStaticPaths = () => {
@@ -264,8 +269,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { greeting } = getIntlayer("lit-demo", locale);
+// Locale resolved by the middleware (e.g. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Content of the 'lit-demo' dictionary for that locale
+const { greeting } = useIntlayer("lit-demo");
 ---
 
 <!doctype html>
@@ -324,6 +332,8 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` also exposes `locale`, `defaultLocale` and `availableLocales` to your own middleware and endpoints. Pass a locale or a selector as second argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) to override the request locale for one call.
+
 > **Note on Routing Configuration:**
 > The directory structure you use depends on the `middleware.routing` setting in your `intlayer.config.ts`:
 >
@@ -480,10 +490,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" },
@@ -587,21 +597,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
-  ],
-});
-```
+Build your application to transform your components and extract the content
 
 ```bash packageManager="npm"
 npm run build # Or npm run dev

package/docs/en/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-29
+updatedAt: 2026-09-20
 title: "Astro + Preact i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Astro + Preact app. Translate with AI agents and optimize bundle size, SEO and performances."
 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: "Use the useIntlayer / useLocale hooks of astro-intlayer in the Astro page"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Update Solid useIntlayer API usage to direct property access"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
   The core package that provides internationalization tools for configuration management, translation, [content declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md), transpilation, and [CLI commands](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md).
 
 - **astro-intlayer**
-  Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
+  Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), a middleware that resolves the locale of every request into `Astro.locals.intlayer`, and the `useIntlayer` / `useDictionary` / `useLocale` hooks. The same import path resolves to the server implementation in your `.astro` frontmatter and to the client one (backed by `vanilla-intlayer`) in `<script>` blocks.
 
 - **preact**
   The core Preact package - a fast, lightweight alternative to React.
@@ -240,19 +243,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Use your content in Astro">
 
-You can consume dictionaries directly in `.astro` files using the core helpers exported by `intlayer`. You should also add SEO metadata like hreflang and canonical links to each page, and embed the Preact island for interactive client-side content.
+Consume your dictionaries in `.astro` files with the hooks exported by `astro-intlayer`. They share the signatures of the framework bindings: `useIntlayer("key")` returns the content of a dictionary and `useLocale()` the current locale, with no argument to pass around.
+
+The locale comes from the `astro-intlayer` middleware, which the integration registers for you ahead of your own `src/middleware.ts`. It resolves it for every request, from the URL prefix, then the locale persisted by the client (cookie or header), then `Accept-Language`, and stores it in `Astro.locals.intlayer`. Prerendered pages only use the URL, since they are rendered once for every visitor.
+
+You should also add SEO metadata like hreflang and canonical links to each page, and embed the Preact island for interactive client-side content.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
   getPrefix,
   localeMap,
   defaultLocale,
   getHTMLTextDir,
-  type LocalesValues,
 } from "intlayer";
 import { PreactIsland } from "../../components/preact/PreactIsland";
 
@@ -262,8 +267,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Locale resolved by the middleware (e.g. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Content of the 'app' dictionary for that locale
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -319,6 +327,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` also exposes `locale`, `defaultLocale` and `availableLocales` to your own middleware and endpoints. Pass a locale or a selector as second argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) to override the request locale for one call.
+
 > **Note on Routing Configuration:**
 > The directory structure you use depends on the `middleware.routing` setting in your `intlayer.config.ts`:
 >
@@ -435,10 +445,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" },
@@ -542,21 +552,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
-  ],
-});
-```
+Build your application to transform your components and extract the content
 
 ```bash packageManager="npm"
 npm run build # Or npm run dev

package/docs/en/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-08-29
+updatedAt: 2026-09-20
 title: "Astro + React i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Astro + React app. Translate with AI agents and optimize bundle size, SEO and performances."
 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: "Use the useIntlayer / useLocale hooks of astro-intlayer in the Astro page"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Update Solid useIntlayer API usage to direct property access"
@@ -153,7 +156,7 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
   The core package that provides internationalization tools for configuration management, translation, [content declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md), transpilation, and [CLI commands](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md).
 
 - **astro-intlayer**
-  Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
+  Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), a middleware that resolves the locale of every request into `Astro.locals.intlayer`, and the `useIntlayer` / `useDictionary` / `useLocale` hooks. The same import path resolves to the server implementation in your `.astro` frontmatter and to the client one (backed by `vanilla-intlayer`) in `<script>` blocks.
 
 - **react**, **react-dom**
   The core React packages needed to render React components in the browser.
@@ -241,19 +244,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Use your content in Astro">
 
-You can consume dictionaries directly in `.astro` files using the core helpers exported by `intlayer`. You should also add SEO metadata like hreflang and canonical links to each page, and embed the React island for interactive client-side content.
+Consume your dictionaries in `.astro` files with the hooks exported by `astro-intlayer`. They share the signatures of the framework bindings: `useIntlayer("key")` returns the content of a dictionary and `useLocale()` the current locale, with no argument to pass around.
+
+The locale comes from the `astro-intlayer` middleware, which the integration registers for you ahead of your own `src/middleware.ts`. It resolves it for every request, from the URL prefix, then the locale persisted by the client (cookie or header), then `Accept-Language`, and stores it in `Astro.locals.intlayer`. Prerendered pages only use the URL, since they are rendered once for every visitor.
+
+You should also add SEO metadata like hreflang and canonical links to each page, and embed the React island for interactive client-side content.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
   getPrefix,
   localeMap,
   defaultLocale,
   getHTMLTextDir,
-  type LocalesValues,
 } from "intlayer";
 import { ReactIsland } from "../../components/react/ReactIsland";
 
@@ -263,8 +268,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Locale resolved by the middleware (e.g. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Content of the 'app' dictionary for that locale
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -320,6 +328,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` also exposes `locale`, `defaultLocale` and `availableLocales` to your own middleware and endpoints. Pass a locale or a selector as second argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) to override the request locale for one call.
+
 > **Note on Routing Configuration:**
 > The directory structure you use depends on the `middleware.routing` setting in your `intlayer.config.ts`:
 >
@@ -432,10 +442,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" },
@@ -539,21 +549,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
-  ],
-});
-```
+Build your application to transform your components and extract the content
 
 ```bash packageManager="npm"
 npm run build # Or npm run dev

package/docs/en/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-29
+updatedAt: 2026-09-20
 title: "Astro + Solid i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Astro + Solid app. Translate with AI agents and optimize bundle size, SEO and performances."
 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: "Use the useIntlayer / useLocale hooks of astro-intlayer in the Astro page"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Update Solid useIntlayer API usage to direct property access"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
   The core package that provides internationalization tools for configuration management, translation, [content declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md), transpilation, and [CLI commands](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md).
 
 - **astro-intlayer**
-  Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
+  Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), a middleware that resolves the locale of every request into `Astro.locals.intlayer`, and the `useIntlayer` / `useDictionary` / `useLocale` hooks. The same import path resolves to the server implementation in your `.astro` frontmatter and to the client one (backed by `vanilla-intlayer`) in `<script>` blocks.
 
 - **solid-js**
   The core Solid package.
@@ -237,19 +240,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Use your content in Astro">
 
-You can consume dictionaries directly in `.astro` files using the core helpers exported by `intlayer`. You should also add SEO metadata like hreflang and canonical links to each page, and embed the Solid island for interactive client-side content.
+Consume your dictionaries in `.astro` files with the hooks exported by `astro-intlayer`. They share the signatures of the framework bindings: `useIntlayer("key")` returns the content of a dictionary and `useLocale()` the current locale, with no argument to pass around.
+
+The locale comes from the `astro-intlayer` middleware, which the integration registers for you ahead of your own `src/middleware.ts`. It resolves it for every request, from the URL prefix, then the locale persisted by the client (cookie or header), then `Accept-Language`, and stores it in `Astro.locals.intlayer`. Prerendered pages only use the URL, since they are rendered once for every visitor.
+
+You should also add SEO metadata like hreflang and canonical links to each page, and embed the Solid island for interactive client-side content.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
   getPrefix,
   localeMap,
   defaultLocale,
   getHTMLTextDir,
-  type LocalesValues,
 } from "intlayer";
 import { SolidIsland } from "../../components/solid/SolidIsland";
 
@@ -259,8 +264,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Locale resolved by the middleware (e.g. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Content of the 'app' dictionary for that locale
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -316,6 +324,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` also exposes `locale`, `defaultLocale` and `availableLocales` to your own middleware and endpoints. Pass a locale or a selector as second argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) to override the request locale for one call.
+
 > **Note on Routing Configuration:**
 > The directory structure you use depends on the `middleware.routing` setting in your `intlayer.config.ts`:
 >
@@ -432,10 +442,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" },
@@ -539,21 +549,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
-  ],
-});
-```
+Build your application to transform your components and extract the content
 
 ```bash packageManager="npm"
 npm run build # Or npm run dev

package/docs/en/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-29
+updatedAt: 2026-09-20
 title: "Astro + Svelte i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Astro + Svelte app. Translate with AI agents and optimize bundle size, SEO and performances."
 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: "Use the useIntlayer / useLocale hooks of astro-intlayer in the Astro page"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Update Solid useIntlayer API usage to direct property access"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
   The core package that provides internationalization tools for configuration management, translation, [content declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md), transpilation, and [CLI commands](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md).
 
 - **astro-intlayer**
-  Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
+  Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), a middleware that resolves the locale of every request into `Astro.locals.intlayer`, and the `useIntlayer` / `useDictionary` / `useLocale` hooks. The same import path resolves to the server implementation in your `.astro` frontmatter and to the client one (backed by `vanilla-intlayer`) in `<script>` blocks.
 
 - **svelte**
   The core Svelte package.
@@ -237,19 +240,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Use your content in Astro">
 
-You can consume dictionaries directly in `.astro` files using the core helpers exported by `intlayer`. You should also add SEO metadata like hreflang and canonical links to each page, and embed the Svelte island for interactive client-side content.
+Consume your dictionaries in `.astro` files with the hooks exported by `astro-intlayer`. They share the signatures of the framework bindings: `useIntlayer("key")` returns the content of a dictionary and `useLocale()` the current locale, with no argument to pass around.
+
+The locale comes from the `astro-intlayer` middleware, which the integration registers for you ahead of your own `src/middleware.ts`. It resolves it for every request, from the URL prefix, then the locale persisted by the client (cookie or header), then `Accept-Language`, and stores it in `Astro.locals.intlayer`. Prerendered pages only use the URL, since they are rendered once for every visitor.
+
+You should also add SEO metadata like hreflang and canonical links to each page, and embed the Svelte island for interactive client-side content.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
   getPrefix,
   localeMap,
   defaultLocale,
   getHTMLTextDir,
-  type LocalesValues,
 } from "intlayer";
 import SvelteIsland from "../../components/svelte/SvelteIsland.svelte";
 
@@ -259,8 +264,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Locale resolved by the middleware (e.g. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Content of the 'app' dictionary for that locale
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -316,6 +324,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` also exposes `locale`, `defaultLocale` and `availableLocales` to your own middleware and endpoints. Pass a locale or a selector as second argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) to override the request locale for one call.
+
 > **Note on Routing Configuration:**
 > The directory structure you use depends on the `middleware.routing` setting in your `intlayer.config.ts`:
 >
@@ -436,10 +446,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 +553,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
-  ],
-});
-```
+Build your application to transform your components and extract the content
 
 ```bash packageManager="npm"
 npm run build # Or npm run dev