@intlayer/docs 9.5.5 → 9.5.7

package/docs/fr/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-19
+updatedAt: 2026-09-21
 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:
@@ -160,6 +160,29 @@ bun add intlayer astro-intlayer
 </Step>
 <Step number={2} title="Configurer votre projet">
 
+### Architecture
+
+Dans cette architecture, l'intégration `intlayer()` enregistrée dans `astro.config.ts` compile vos dictionnaires et ajoute un middleware qui résout la locale de chaque requête et l'expose sur `Astro.locals.intlayer`. Les pages résident sous un segment rest `src/pages/[...locale]/`, ainsi la locale par défaut est servie sans préfixe et chaque autre locale dispose de sa propre URL dédiée. Les fichiers `.astro` lisent le contenu avec les hooks `useIntlayer` / `useLocale` d'`astro-intlayer`, et les déclarations de contenu sont placées aux côtés de vos composants dans `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
+```
+
+### Configuration
+
 Créez un fichier de configuration pour définir les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts"
@@ -400,7 +423,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 +450,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 +494,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 +542,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 +565,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-21
 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.
@@ -165,6 +168,30 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 </Step>
 <Step number={2} title="Configurer votre projet">
 
+### Architecture
+
+Dans cette architecture, l'intégration `intlayer()` enregistrée dans `astro.config.ts` compile vos dictionnaires et ajoute un middleware qui résout la locale de chaque requête et l'expose sur `Astro.locals.intlayer`. Les pages résident sous un segment rest `src/pages/[...locale]/`, ainsi la locale par défaut est servie sans préfixe et chaque autre locale dispose de sa propre URL dédiée. Les fichiers `.astro` lisent le contenu avec les hooks `useIntlayer` / `useLocale` d'`astro-intlayer` pour le rendu serveur, et l'îlot Lit (`src/components/lit/LitDemo.ts`) reçoit la locale détectée par le serveur en prop et la transmet à `lit-intlayer` pour la partie interactive. Les déclarations de contenu sont placées aux côtés de vos composants dans `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
+```
+
+### Configuration
+
 Créez un fichier de configuration pour définir les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts"
@@ -243,19 +270,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 +293,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 +356,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 +514,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 +594,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 +617,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-21
 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.
@@ -164,6 +167,31 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 </Step>
 <Step number={2} title="Configurer votre projet">
 
+### Architecture
+
+Dans cette architecture, l'intégration `intlayer()` enregistrée dans `astro.config.ts` compile vos dictionnaires et ajoute un middleware qui résout la locale de chaque requête et l'expose sur `Astro.locals.intlayer`. Les pages résident sous un segment rest `src/pages/[...locale]/`, ainsi la locale par défaut est servie sans préfixe et chaque autre locale dispose de sa propre URL dédiée. Les fichiers `.astro` lisent le contenu avec les hooks `useIntlayer` / `useLocale` d'`astro-intlayer` pour le rendu serveur, et l'îlot Preact (`src/components/preact/PreactIsland.tsx`) reçoit la locale détectée par le serveur en prop et la transmet à `preact-intlayer` pour la partie interactive. Les déclarations de contenu sont placées aux côtés de vos composants dans `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
+```
+
+### Configuration
+
 Créez un fichier de configuration pour définir les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts"
@@ -240,19 +268,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 +292,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 +352,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 +470,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 +550,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 +573,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-21
 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.
@@ -167,6 +170,31 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
 </Step>
 <Step number={2} title="Configurer votre projet">
 
+### Architecture
+
+Dans cette architecture, l'intégration `intlayer()` enregistrée dans `astro.config.ts` compile vos dictionnaires et ajoute un middleware qui résout la locale de chaque requête et l'expose sur `Astro.locals.intlayer`. Les pages résident sous un segment rest `src/pages/[...locale]/`, ainsi la locale par défaut est servie sans préfixe et chaque autre locale dispose de sa propre URL dédiée. Les fichiers `.astro` lisent le contenu avec les hooks `useIntlayer` / `useLocale` d'`astro-intlayer` pour le rendu serveur, et l'îlot React (`src/components/react/ReactIsland.tsx`) reçoit la locale détectée par le serveur en prop et la transmet à `react-intlayer` pour la partie interactive. Les déclarations de contenu sont placées aux côtés de vos composants dans `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
+```
+
+### Configuration
+
 Créez un fichier de configuration pour définir les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts"
@@ -241,19 +269,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 +293,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 +353,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 +467,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 +547,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 +570,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