@intlayer/docs 9.5.5 → 9.5.6

package/docs/es/intlayer_with_vite+vanilla.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-08-30
+updatedAt: 2026-09-20
 title: "Vite + Vanilla JS i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Vite + Vanilla JS multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -613,8 +613,14 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilador Babel'>
 
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
 > Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
+ </Tab>
+ <Tab value='intlayer < 9'>
+
 Actualiza tu `vite.config.ts` para incluir el plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -629,6 +635,11 @@ export default defineConfig({
 });
 ```
 
+ </Tab>
+ </Tabs>
+
+Compila tu aplicación para transformar tus componentes y extraer el contenido
+
 ```bash packageManager="npm"
 npm run build # O npm run dev
 ```
@@ -685,7 +696,9 @@ const pathList = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+const sitemapXml = generateSitemap(pathList, {
+  siteUrl: "https://example.com",
+});
 fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
 
 const getAllMultilingualUrls = (urls) =>
@@ -698,7 +711,7 @@ const robotsTxt = [
   "Allow: /",
   ...disallowedPaths.map((path) => `Disallow: ${path}`),
   "",
-  `Sitemap: ${SITE_URL}/sitemap.xml`,
+  `Sitemap: https://example.com/sitemap.xml`,
 ].join("\n");
 
 fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

package/docs/es/intlayer_with_vite+vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-20
 title: "Vite + Vue i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Vite + Vue multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -1020,8 +1020,14 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilador Babel'>
 
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
 > Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
+ </Tab>
+ <Tab value='intlayer < 9'>
+
 Actualiza tu archivo `vite.config.ts` para incluir el plugin `intlayerCompiler` :
 
 ```ts fileName="vite.config.ts"
@@ -1036,6 +1042,11 @@ export default defineConfig({
 });
 ```
 
+ </Tab>
+ </Tabs>
+
+Compila tu aplicación para transformar tus componentes y extraer el contenido
+
 ```bash packageManager="npm"
 npm run build # O npm run dev
 ```
@@ -1092,7 +1103,9 @@ const pathList = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+const sitemapXml = generateSitemap(pathList, {
+  siteUrl: "https://example.com",
+});
 fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
 
 const getAllMultilingualUrls = (urls) =>
@@ -1105,7 +1118,7 @@ const robotsTxt = [
   "Allow: /",
   ...disallowedPaths.map((path) => `Disallow: ${path}`),
   "",
-  `Sitemap: ${SITE_URL}/sitemap.xml`,
+  `Sitemap: https://example.com/sitemap.xml`,
 ].join("\n");
 
 fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

package/docs/es/introduction.md

@@ -187,7 +187,6 @@ Hemos creado Intlayer pensando en la flexibilidad, ofreciendo una integración p
 - **[Intlayer con Astro + Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_solid.md)**
 - **[Intlayer con Astro + Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_preact.md)**
 - **[Intlayer con Astro + Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_lit.md)**
-- **[Intlayer con Astro + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_vanilla.md)**
 - **[Intlayer con Vite + Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+vue.md)**
 - **[Intlayer con Nuxt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_nuxt.md)**
 - **[Intlayer con Vite + Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+svelte.md)**

package/docs/es/readme.md

@@ -212,7 +212,6 @@ Explore nuestra documentación completa para comenzar con Intlayer y aprender c
       <li><a href="https://intlayer.org/doc/environment/astro/vue" rel=''>Vue</a></li>
       <li><a href="https://intlayer.org/doc/environment/astro/svelte" rel=''>Svelte</a></li>
       <li><a href="https://intlayer.org/doc/environment/astro/solid" rel=''>Solid</a></li>
-      <li><a href="https://intlayer.org/doc/environment/astro/vanilla" rel=''>Vanilla JS</a></li>
       <li><a href="https://intlayer.org/doc/environment/astro/lit" rel=''>Lit</a></li>
     </ul>
   </li>

package/docs/es/releases/v8.md

@@ -1325,10 +1325,6 @@ Intlayer ahora genera sitemaps automáticamente basándose en sus locales y modo
 import { createFileRoute } from "@tanstack/react-router";
 import { generateSitemap } from "intlayer";
 
-const SITE_URL = (
-  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
-).replace(/\/$/, "");
-
 export const Route = createFileRoute("/sitemap.xml")({
   server: {
     handlers: {
@@ -1338,7 +1334,7 @@ export const Route = createFileRoute("/sitemap.xml")({
             { path: "/", changefreq: "daily", priority: 1.0 },
             { path: "/about", changefreq: "monthly", priority: 0.8 },
           ],
-          { siteUrl: SITE_URL }
+          { siteUrl: "https://example.com" }
         );
 
         return new Response(sitemap, {

package/docs/fr/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-19
+updatedAt: 2026-09-20
 title: "Astro i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Astro multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -400,7 +400,7 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ```
 
 > **Note sur la persistance :**
-> `setLocale` issu de `useLocale` côté client enregistre la préférence de langue de l'utilisateur dans un cookie. Cela permet au middleware Intlayer de mémoriser le choix et de rediriger automatiquement l'utilisateur vers sa langue préférée lors de ses visites ultérieures.
+> `setLocale` issu de `useLocale` côté client enregistre la préférence de langue de l'utilisateur dans un cookie. Cela permet à Intlayer de mémoriser le choix et de rediriger automatiquement l'utilisateur vers sa langue préférée lors de ses visites ultérieures : les pages rendues à la demande (un adaptateur avec `output: 'server'` ou `prerender = false`) sont redirigées par le middleware Intlayer avant l'envoi du moindre HTML, tandis que les pages pré-rendues, servies sous forme de fichiers statiques, sont redirigées par un petit script injecté par l'intégration dans chaque page. Définissez `routing.enableProxy` sur `false` pour désactiver les deux. Dans `astro dev`, le cookie est ignoré comme source de redirection à moins que `routing.enableProxy` ne soit défini sur `true`, évitant ainsi qu'un cookie obsolète ne détourne les pages sur lesquelles vous travaillez.
 >
 > **Interopérabilité serveur / client :**
 > `astro-intlayer` résout vers ses hooks serveur dans le frontmatter (en lisant `Astro.locals`) et vers les hooks client de `vanilla-intlayer` dans les blocs `<script>` et les îles (islands), avec les mêmes noms et structures de contenu. `setLocale` et `onChange` n'agissent que sur le client, appelez `installIntlayer()` une fois pour initialiser le store client. `astro-intlayer/client` expose l'entrée client explicitement.
@@ -427,10 +427,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" },
@@ -471,11 +471,12 @@ export const GET: APIRoute = ({ site }) => {
 
 Continuez à construire votre application en utilisant vos frameworks préférés.
 
-- Intlayer + React : [Intlayer avec React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+react.md)
-- Intlayer + Vue : [Intlayer avec Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+vue.md)
-- Intlayer + Svelte : [Intlayer avec Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+svelte.md)
-- Intlayer + Solid : [Intlayer avec Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+solid.md)
-- Intlayer + Preact : [Intlayer avec Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+preact.md)
+- Intlayer + React : [Intlayer avec React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_astro_react.md)
+- Intlayer + Vue : [Intlayer avec Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_astro_vue.md)
+- Intlayer + Svelte : [Intlayer avec Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_astro_svelte.md)
+- Intlayer + Solid : [Intlayer avec Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_astro_solid.md)
+- Intlayer + Preact : [Intlayer avec Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_astro_preact.md)
+- Intlayer + Lit: [Intlayer avec Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_astro_lit.md)
 </Step>
 
 <Step number={15} title="Extracter le contenu de vos composants" isOptional={true}>
@@ -518,7 +519,7 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='Commande d'extraction'>
+ <Tab value="Commande d'extraction">
 
 Exécutez l'extracteur pour transformer vos composants et extraire le contenu
 
@@ -541,21 +542,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilateur Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Mettez à jour votre fichier `vite.config.ts` pour inclure le plugin `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
-  ],
-});
-```
+Buildez votre application pour transformer vos composants et extraire le contenu
 
 ```bash packageManager="npm"
 npm run build # Ou npm run dev

package/docs/fr/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 - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Astro + Lit multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les 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: "Utilisation des hooks useIntlayer / useLocale d'astro-intlayer dans la page Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Mettre à jour l'utilisation de l'API useIntlayer de Solid pour un accès direct aux propriétés"
@@ -151,7 +154,7 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   Le package de base qui fournit des outils d'internationalisation pour la gestion de la configuration, les traductions, la [déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md), la transpilation et les [commandes CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/index.md).
 
 - **astro-intlayer**
-  Inclut le plugin d'intégration pour Astro pour intégrer Intlayer avec le [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), ainsi qu'un middleware pour détecter la locale préférée de l'utilisateur, gérer les cookies et traiter les redirections d'URL.
+  Inclut le plugin d'intégration pour Astro pour intégrer Intlayer avec le [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware qui résout la locale de chaque requête dans `Astro.locals.intlayer`, ainsi que les hooks `useIntlayer` / `useDictionary` / `useLocale`. Le même chemin d'importation résout vers l'implémentation serveur dans votre frontmatter `.astro` et vers l'implémentation client (basée sur `vanilla-intlayer`) dans les blocs `<script>`.
 
 - **lit**
   Le package Lit de base pour construire des Web Components rapides et légers.
@@ -243,19 +246,21 @@ export default litDemoContent;
 </Step>
 <Step number={5} title="Utiliser le contenu dans Astro">
 
-Vous pouvez consommer les dictionnaires directement dans vos fichiers `.astro` en utilisant les helpers de base exportés par `intlayer`. Vous devez également ajouter des métadonnées SEO, telles que hreflang et des liens canoniques, sur chaque page. L'élément personnalisé Lit est importé via un `<script>` client et placé dans le body.
+Consommez vos dictionnaires dans les fichiers `.astro` avec les hooks exportés par `astro-intlayer`. Ils partagent les signatures de `react-intlayer` : `useIntlayer("key")` renvoie le contenu d'un dictionnaire et `useLocale()` la locale actuelle, sans aucun argument à transmettre.
+
+La locale provient du middleware `astro-intlayer`, que l'intégration enregistre pour vous en amont de votre propre `src/middleware.ts`. Il la résout pour chaque requête, à partir du préfixe d'URL, puis de la locale persistée par le client (cookie ou en-tête), puis de `Accept-Language`, et la stocke dans `Astro.locals.intlayer`. Les pages pré-rendues utilisent uniquement l'URL, car elles sont générées une seule fois pour chaque visiteur.
+
+Vous devez également ajouter des métadonnées SEO, telles que hreflang et des liens canoniques, sur chaque page. L'élément personnalisé Lit est importé via un `<script>` client et placé dans le 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 = () => {
@@ -264,8 +269,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { greeting } = getIntlayer("lit-demo", locale);
+// Locale résolue par le middleware (ex. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Contenu du dictionnaire 'lit-demo' pour cette 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` expose également `locale`, `defaultLocale` et `availableLocales` à vos propres middlewares et points de terminaison. Passez une locale ou un sélecteur en second argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) pour surcharger la locale de la requête pour un appel.
+
 > **Note sur la configuration du routage :**
 > La structure de répertoire que vous utilisez dépend du paramètre `middleware.routing` dans votre `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" },
@@ -560,7 +570,7 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='Commande d'extraction'>
+ <Tab value="Commande d'extraction">
 
 Exécutez l'extracteur pour transformer vos composants et extraire le contenu
 
@@ -583,21 +593,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilateur Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Mettez à jour votre fichier `vite.config.ts` pour inclure le plugin `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
-  ],
-});
-```
+Buildez votre application pour transformer vos composants et extraire le contenu
 
 ```bash packageManager="npm"
 npm run build # Ou npm run dev

package/docs/fr/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 - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Astro + Preact multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les 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: "Utilisation des hooks useIntlayer / useLocale d'astro-intlayer dans la page Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Mettre à jour l'utilisation de l'API useIntlayer de Solid pour un accès direct aux propriétés"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
   Le package de base qui fournit des outils d'internationalisation pour la gestion de la configuration, les traductions, la [déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md), la transpilation et les [commandes CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/index.md).
 
 - **astro-intlayer**
-  Inclut le plugin d'intégration pour Astro pour intégrer Intlayer avec le [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), ainsi qu'un middleware pour détecter la locale préférée de l'utilisateur, gérer les cookies et traiter les redirections d'URL.
+  Inclut le plugin d'intégration pour Astro pour intégrer Intlayer avec le [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware qui résout la locale de chaque requête dans `Astro.locals.intlayer`, ainsi que les hooks `useIntlayer` / `useDictionary` / `useLocale`. Le même chemin d'importation résout vers l'implémentation serveur dans votre frontmatter `.astro` et vers l'implémentation client (basée sur `vanilla-intlayer`) dans les blocs `<script>`.
 
 - **preact**
   Le package Preact de base - une alternative rapide et légère à React.
@@ -240,19 +243,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Utiliser le contenu dans Astro">
 
-Vous pouvez consommer les dictionnaires directement dans vos fichiers `.astro` en utilisant les helpers de base exportés par `intlayer`. Vous devez également ajouter des métadonnées SEO, telles que hreflang et des liens canoniques, sur chaque page et intégrer une île Preact pour le contenu interactif côté client.
+Consommez vos dictionnaires dans les fichiers `.astro` avec les hooks exportés par `astro-intlayer`. Ils partagent les signatures de `react-intlayer` : `useIntlayer("key")` renvoie le contenu d'un dictionnaire et `useLocale()` la locale actuelle, sans aucun argument à transmettre.
+
+La locale provient du middleware `astro-intlayer`, que l'intégration enregistre pour vous en amont de votre propre `src/middleware.ts`. Il la résout pour chaque requête, à partir du préfixe d'URL, puis de la locale persistée par le client (cookie ou en-tête), puis de `Accept-Language`, et la stocke dans `Astro.locals.intlayer`. Les pages pré-rendues utilisent uniquement l'URL, car elles sont générées une seule fois pour chaque visiteur.
+
+Vous devez également ajouter des métadonnées SEO, telles que hreflang et des liens canoniques, sur chaque page et intégrer une île Preact pour le contenu interactif côté client.
 
 ```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";
 
@@ -262,8 +267,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Locale résolue par le middleware (ex. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Contenu du dictionnaire 'app' pour cette 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` expose également `locale`, `defaultLocale` et `availableLocales` à vos propres middlewares et points de terminaison. Passez une locale ou un sélecteur en second argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) pour surcharger la locale de la requête pour un appel.
+
 > **Note sur la configuration du routage :**
 > La structure de répertoire que vous utilisez dépend du paramètre `middleware.routing` dans votre `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" },
@@ -515,7 +525,7 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='Commande d'extraction'>
+ <Tab value="Commande d'extraction">
 
 Exécutez l'extracteur pour transformer vos composants et extraire le contenu
 
@@ -538,21 +548,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilateur Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Mettez à jour votre fichier `vite.config.ts` pour inclure le plugin `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
-  ],
-});
-```
+Buildez votre application pour transformer vos composants et extraire le contenu
 
 ```bash packageManager="npm"
 npm run build # Ou npm run dev

package/docs/fr/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 - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Astro + React multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les 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: "Utilisation des hooks useIntlayer / useLocale d'astro-intlayer dans la page Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Mettre à jour l'utilisation de l'API useIntlayer de Solid pour un accès direct aux propriétés"
@@ -153,7 +156,7 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
   Le package de base qui fournit des outils d'internationalisation pour la gestion de la configuration, les traductions, la [déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md), la transpilation et les [commandes CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/index.md).
 
 - **astro-intlayer**
-  Inclut le plugin d'intégration pour Astro pour intégrer Intlayer avec le [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), ainsi qu'un middleware pour détecter la locale préférée de l'utilisateur, gérer les cookies et traiter les redirections d'URL.
+  Inclut le plugin d'intégration pour Astro pour intégrer Intlayer avec le [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware qui résout la locale de chaque requête dans `Astro.locals.intlayer`, ainsi que les hooks `useIntlayer` / `useDictionary` / `useLocale`. Le même chemin d'importation résout vers l'implémentation serveur dans votre frontmatter `.astro` et vers l'implémentation client (basée sur `vanilla-intlayer`) dans les blocs `<script>`.
 
 - **react**, **react-dom**
   Les packages React de base requis pour rendre des composants React dans le navigateur.
@@ -241,19 +244,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Utiliser le contenu dans Astro">
 
-Vous pouvez consommer les dictionnaires directement dans vos fichiers `.astro` en utilisant les helpers de base exportés par `intlayer`. Vous devez également ajouter des métadonnées SEO, telles que hreflang et des liens canoniques, sur chaque page et intégrer une île React pour le contenu interactif côté client.
+Consommez vos dictionnaires dans les fichiers `.astro` avec les hooks exportés par `astro-intlayer`. Ils partagent les signatures de `react-intlayer` : `useIntlayer("key")` renvoie le contenu d'un dictionnaire et `useLocale()` la locale actuelle, sans aucun argument à transmettre.
+
+La locale provient du middleware `astro-intlayer`, que l'intégration enregistre pour vous en amont de votre propre `src/middleware.ts`. Il la résout pour chaque requête, à partir du préfixe d'URL, puis de la locale persistée par le client (cookie ou en-tête), puis de `Accept-Language`, et la stocke dans `Astro.locals.intlayer`. Les pages pré-rendues utilisent uniquement l'URL, car elles sont générées une seule fois pour chaque visiteur.
+
+Vous devez également ajouter des métadonnées SEO, telles que hreflang et des liens canoniques, sur chaque page et intégrer une île React pour le contenu interactif côté client.
 
 ```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";
 
@@ -263,8 +268,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Locale résolue par le middleware (ex. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Contenu du dictionnaire 'app' pour cette 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` expose également `locale`, `defaultLocale` et `availableLocales` à vos propres middlewares et points de terminaison. Passez une locale ou un sélecteur en second argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) pour surcharger la locale de la requête pour un appel.
+
 > **Note sur la configuration du routage :**
 > La structure de répertoire que vous utilisez dépend du paramètre `middleware.routing` dans votre `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" },
@@ -512,7 +522,7 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='Commande d'extraction'>
+ <Tab value="Commande d'extraction">
 
 Exécutez l'extracteur pour transformer vos composants et extraire le contenu
 
@@ -535,21 +545,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilateur Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Mettez à jour votre fichier `vite.config.ts` pour inclure le plugin `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
-  ],
-});
-```
+Buildez votre application pour transformer vos composants et extraire le contenu
 
 ```bash packageManager="npm"
 npm run build # Ou npm run dev