@intlayer/docs 9.5.5 → 9.5.7

package/docs/de/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Astro + Preact i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Astro + Preact-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 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: "Verwendung der useIntlayer / useLocale Hooks von astro-intlayer in der Astro-Seite"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
   Das Kernpaket, das i18n-Tools für Konfigurationsmanagement, Übersetzungen, [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md), Transpilation und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/index.md) bereitstellt.
 
 - **astro-intlayer**
-  Enthält das Astro-Integrations-Plugin, um Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) zu verbinden, sowie die Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Weiterleitungen.
+  Enthält das Astro-Integrations-Plugin zur Einbindung von Intlayer in den [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production), eine Middleware, die das Gebietsschema jeder Anfrage in `Astro.locals.intlayer` auflöst, sowie die Hooks `useIntlayer` / `useDictionary` / `useLocale`. Derselbe Importpfad löst im `.astro`-Frontmatter zur Server-Implementierung und in `<script>`-Blöcken zur Client-Implementierung (unterstützt durch `vanilla-intlayer`) auf.
 
 - **preact**
   Das Kern-Preact-Paket - eine schnelle und leichte Alternative zu React.
@@ -164,6 +167,31 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 </Step>
 <Step number={2} title="Konfigurieren Sie Ihr Projekt">
 
+### Architektur
+
+In dieser Architektur erstellt die in `astro.config.ts` registrierte `intlayer()`-Integration Ihre Wörterbücher und fügt eine Middleware hinzu, die das Gebietsschema jeder Anfrage auflöst und unter `Astro.locals.intlayer` bereitstellt. Seiten befinden sich unter einem Rest-Segment `src/pages/[...locale]/`, sodass das Standard-Gebietsschema ohne Präfix bereitgestellt wird und jedes andere Gebietsschema eine eigene dedizierte URL erhält. `.astro`-Dateien lesen den Inhalt mit den `useIntlayer` / `useLocale`-Hooks von `astro-intlayer` für das Server-Rendering, und die Preact-Insel (`src/components/preact/PreactIsland.tsx`) empfängt das vom Server erkannte Gebietsschema als Prop und übergibt es an `preact-intlayer` für den interaktiven Teil. Inhaltsdeklarationen werden neben Ihren Komponenten in `src/` abgelegt.
+
+```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
+```
+
+### Konfiguration
+
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu definieren:
 
 ```typescript fileName="intlayer.config.ts"
@@ -243,19 +271,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Inhalt in Astro verwenden">
 
-Sie können die Wörterbücher direkt in Ihren `.astro`-Dateien verwenden, indem Sie die von `intlayer` exportierten Kern-Helfer nutzen. Sie sollten außerdem SEO-Metadaten (wie hreflang und Canonical-Links) zu jeder Seite hinzufügen und ein Preact-Island für interaktive clientseitige Inhalte einführen.
+Verwenden Sie Ihre Wörterbücher in `.astro`-Dateien mit den von `astro-intlayer` exportierten Hooks. Sie teilen die Signaturen von `react-intlayer`: `useIntlayer("key")` gibt den Inhalt eines Wörterbuchs zurück und `useLocale()` das aktuelle Gebietsschema, ohne dass Argumente übergeben werden müssen.
+
+Das Gebietsschema stammt von der `astro-intlayer`-Middleware, die die Integration vor Ihrer eigenen `src/middleware.ts` registriert. Sie löst es für jede Anfrage auf, aus dem URL-Präfix, dann dem vom Client gespeicherten Gebietsschema (Cookie oder Header), dann `Accept-Language`, und speichert es in `Astro.locals.intlayer`. Vorgerenderte Seiten verwenden nur die URL, da sie einmal für jeden Besucher gerendert werden.
+
+Sie sollten außerdem SEO-Metadaten (wie hreflang und Canonical-Links) zu jeder Seite hinzufügen und ein Preact-Island für interaktive clientseitige Inhalte einführen.
 
 ```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";
 
@@ -265,8 +295,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Vom Middleware aufgelöstes Gebietsschema (z. B. /de/about -> 'de')
+const { locale } = useLocale();
+
+// Inhalt des 'app'-Wörterbuchs für dieses Gebietsschema
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -322,6 +355,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` stellt auch `locale`, `defaultLocale` und `availableLocales` für Ihre eigenen Middlewares und Endpunkte bereit. Übergeben Sie ein Gebietsschema oder einen Selektor als zweites Argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`), um das Anfrage-Gebietsschema für einen Aufruf zu überschreiben.
+
 > **Hinweis zum Routing-Setup:**
 > Die von Ihnen verwendete Verzeichnisstruktur hängt von der Einstellung `middleware.routing` in `intlayer.config.ts` ab:
 >
@@ -438,10 +473,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -541,21 +576,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel-Compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Aktualisieren Sie Ihre `vite.config.ts`, um das `intlayerCompiler`-Plugin aufzunehmen:
-
-```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
-  ],
-});
-```
+Bauen Sie Ihre Anwendung, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren
 
 ```bash packageManager="npm"
 npm run build # Oder npm run dev

package/docs/de/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Astro + React i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Astro + React-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 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: "Verwendung der useIntlayer / useLocale Hooks von astro-intlayer in der Astro-Seite"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"
@@ -153,7 +156,7 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
   Das Kernpaket, das i18n-Tools für Konfigurationsmanagement, Übersetzungen, [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md), Transpilation und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/index.md) bereitstellt.
 
 - **astro-intlayer**
-  Enthält das Astro-Integrations-Plugin, um Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) zu verbinden, sowie die Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Weiterleitungen.
+  Enthält das Astro-Integrations-Plugin zur Einbindung von Intlayer in den [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production), eine Middleware, die das Gebietsschema jeder Anfrage in `Astro.locals.intlayer` auflöst, sowie die Hooks `useIntlayer` / `useDictionary` / `useLocale`. Derselbe Importpfad löst im `.astro`-Frontmatter zur Server-Implementierung und in `<script>`-Blöcken zur Client-Implementierung (unterstützt durch `vanilla-intlayer`) auf.
 
 - **react**, **react-dom**
   Kern-React-Pakete, die zum Rendern von React-Komponenten im Browser erforderlich sind.
@@ -167,6 +170,31 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
 </Step>
 <Step number={2} title="Konfigurieren Sie Ihr Projekt">
 
+### Architektur
+
+In dieser Architektur erstellt die in `astro.config.ts` registrierte `intlayer()`-Integration Ihre Wörterbücher und fügt eine Middleware hinzu, die das Gebietsschema jeder Anfrage auflöst und unter `Astro.locals.intlayer` bereitstellt. Seiten befinden sich unter einem Rest-Segment `src/pages/[...locale]/`, sodass das Standard-Gebietsschema ohne Präfix bereitgestellt wird und jedes andere Gebietsschema eine eigene dedizierte URL erhält. `.astro`-Dateien lesen den Inhalt mit den `useIntlayer` / `useLocale`-Hooks von `astro-intlayer` für das Server-Rendering, und die React-Insel (`src/components/react/ReactIsland.tsx`) empfängt das vom Server erkannte Gebietsschema als Prop und übergibt es an `react-intlayer` für den interaktiven Teil. Inhaltsdeklarationen werden neben Ihren Komponenten in `src/` abgelegt.
+
+```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
+```
+
+### Konfiguration
+
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu definieren:
 
 ```typescript fileName="intlayer.config.ts"
@@ -243,19 +271,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Inhalt in Astro verwenden">
 
-Sie können die Wörterbücher direkt in Ihren `.astro`-Dateien verwenden, indem Sie die von `intlayer` exportierten Kern-Helfer nutzen. Sie sollten außerdem SEO-Metadaten (wie hreflang und Canonical-Links) zu jeder Seite hinzufügen und ein React-Island für interaktive clientseitige Inhalte einführen.
+Verwenden Sie Ihre Wörterbücher in `.astro`-Dateien mit den von `astro-intlayer` exportierten Hooks. Sie teilen die Signaturen von `react-intlayer`: `useIntlayer("key")` gibt den Inhalt eines Wörterbuchs zurück und `useLocale()` das aktuelle Gebietsschema, ohne dass Argumente übergeben werden müssen.
+
+Das Gebietsschema stammt von der `astro-intlayer`-Middleware, die die Integration vor Ihrer eigenen `src/middleware.ts` registriert. Sie löst es für jede Anfrage auf, aus dem URL-Präfix, dann dem vom Client gespeicherten Gebietsschema (Cookie oder Header), dann `Accept-Language`, und speichert es in `Astro.locals.intlayer`. Vorgerenderte Seiten verwenden nur die URL, da sie einmal für jeden Besucher gerendert werden.
+
+Sie sollten außerdem SEO-Metadaten (wie hreflang und Canonical-Links) zu jeder Seite hinzufügen und ein React-Island für interaktive clientseitige Inhalte einführen.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import { ReactIsland } from "../../components/react/ReactIsland";
 
@@ -265,8 +295,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Vom Middleware aufgelöstes Gebietsschema (z. B. /de/about -> 'de')
+const { locale } = useLocale();
+
+// Inhalt des 'app'-Wörterbuchs für dieses Gebietsschema
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -322,6 +355,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` stellt auch `locale`, `defaultLocale` und `availableLocales` für Ihre eigenen Middlewares und Endpunkte bereit. Übergeben Sie ein Gebietsschema oder einen Selektor als zweites Argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`), um das Anfrage-Gebietsschema für einen Aufruf zu überschreiben.
+
 > **Hinweis zum Routing-Setup:**
 > Die von Ihnen verwendete Verzeichnisstruktur hängt von der Einstellung `middleware.routing` in `intlayer.config.ts` ab:
 >
@@ -434,10 +469,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -537,21 +572,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel-Compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Aktualisieren Sie Ihre `vite.config.ts`, um das `intlayerCompiler`-Plugin aufzunehmen:
-
-```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
-  ],
-});
-```
+Bauen Sie Ihre Anwendung, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren
 
 ```bash packageManager="npm"
 npm run build # Oder npm run dev

package/docs/de/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Astro + Solid i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Astro + Solid-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 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: "Verwendung der useIntlayer / useLocale Hooks von astro-intlayer in der Astro-Seite"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
   Das Kernpaket, das i18n-Tools für Konfigurationsmanagement, Übersetzungen, [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md), Transpilation und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/index.md) bereitstellt.
 
 - **astro-intlayer**
-  Enthält das Astro-Integrations-Plugin, um Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) zu verbinden, sowie die Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Weiterleitungen.
+  Enthält das Astro-Integrations-Plugin zur Einbindung von Intlayer in den [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production), eine Middleware, die das Gebietsschema jeder Anfrage in `Astro.locals.intlayer` auflöst, sowie die Hooks `useIntlayer` / `useDictionary` / `useLocale`. Derselbe Importpfad löst im `.astro`-Frontmatter zur Server-Implementierung und in `<script>`-Blöcken zur Client-Implementierung (unterstützt durch `vanilla-intlayer`) auf.
 
 - **solid-js**
   Das Kern-Solid-Paket.
@@ -164,6 +167,31 @@ bun add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
 </Step>
 <Step number={2} title="Konfigurieren Sie Ihr Projekt">
 
+### Architektur
+
+In dieser Architektur erstellt die in `astro.config.ts` registrierte `intlayer()`-Integration Ihre Wörterbücher und fügt eine Middleware hinzu, die das Gebietsschema jeder Anfrage auflöst und unter `Astro.locals.intlayer` bereitstellt. Seiten befinden sich unter einem Rest-Segment `src/pages/[...locale]/`, sodass das Standard-Gebietsschema ohne Präfix bereitgestellt wird und jedes andere Gebietsschema eine eigene dedizierte URL erhält. `.astro`-Dateien lesen den Inhalt mit den `useIntlayer` / `useLocale`-Hooks von `astro-intlayer` für das Server-Rendering, und die Solid-Insel (`src/components/solid/SolidIsland.tsx`) empfängt das vom Server erkannte Gebietsschema als Prop und übergibt es an `solid-intlayer` für den interaktiven Teil. Inhaltsdeklarationen werden neben Ihren Komponenten in `src/` abgelegt.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── solid
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── SolidIsland.tsx       # Solid 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 solid() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Konfiguration
+
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu definieren:
 
 ```typescript fileName="intlayer.config.ts"
@@ -239,19 +267,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Inhalt in Astro verwenden">
 
-Sie können die Wörterbücher direkt in Ihren `.astro`-Dateien verwenden, indem Sie die von `intlayer` exportierten Kern-Helfer nutzen. Sie sollten außerdem SEO-Metadaten (wie hreflang und Canonical-Links) zu jeder Seite hinzufügen und ein Solid-Island für interaktive clientseitige Inhalte einführen.
+Verwenden Sie Ihre Wörterbücher in `.astro`-Dateien mit den von `astro-intlayer` exportierten Hooks. Sie teilen die Signaturen von `react-intlayer`: `useIntlayer("key")` gibt den Inhalt eines Wörterbuchs zurück und `useLocale()` das aktuelle Gebietsschema, ohne dass Argumente übergeben werden müssen.
+
+Das Gebietsschema stammt von der `astro-intlayer`-Middleware, die die Integration vor Ihrer eigenen `src/middleware.ts` registriert. Sie löst es für jede Anfrage auf, aus dem URL-Präfix, dann dem vom Client gespeicherten Gebietsschema (Cookie oder Header), dann `Accept-Language`, und speichert es in `Astro.locals.intlayer`. Vorgerenderte Seiten verwenden nur die URL, da sie einmal für jeden Besucher gerendert werden.
+
+Sie sollten außerdem SEO-Metadaten (wie hreflang und Canonical-Links) zu jeder Seite hinzufügen und ein Solid-Island für interaktive clientseitige Inhalte einführen.
 
 ```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 { SolidIsland } from "../../components/solid/SolidIsland";
 
@@ -261,8 +291,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Vom Middleware aufgelöstes Gebietsschema (z. B. /de/about -> 'de')
+const { locale } = useLocale();
+
+// Inhalt des 'app'-Wörterbuchs für dieses Gebietsschema
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -318,6 +351,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` stellt auch `locale`, `defaultLocale` und `availableLocales` für Ihre eigenen Middlewares und Endpunkte bereit. Übergeben Sie ein Gebietsschema oder einen Selektor als zweites Argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`), um das Anfrage-Gebietsschema für einen Aufruf zu überschreiben.
+
 > **Hinweis zum Routing-Setup:**
 > Die von Ihnen verwendete Verzeichnisstruktur hängt von der Einstellung `middleware.routing` in `intlayer.config.ts` ab:
 >
@@ -434,10 +469,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -537,21 +572,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel-Compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Aktualisieren Sie Ihre `vite.config.ts`, um das `intlayerCompiler`-Plugin aufzunehmen:
-
-```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
-  ],
-});
-```
+Bauen Sie Ihre Anwendung, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren
 
 ```bash packageManager="npm"
 npm run build # Oder npm run dev

package/docs/de/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Astro + Svelte i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Astro + Svelte-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 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: "Verwendung der useIntlayer / useLocale Hooks von astro-intlayer in der Astro-Seite"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
   Das Kernpaket, das i18n-Tools für Konfigurationsmanagement, Übersetzungen, [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md), Transpilation und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/index.md) bereitstellt.
 
 - **astro-intlayer**
-  Enthält das Astro-Integrations-Plugin, um Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) zu verbinden, sowie die Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Weiterleitungen.
+  Enthält das Astro-Integrations-Plugin zur Einbindung von Intlayer in den [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production), eine Middleware, die das Gebietsschema jeder Anfrage in `Astro.locals.intlayer` auflöst, sowie die Hooks `useIntlayer` / `useDictionary` / `useLocale`. Derselbe Importpfad löst im `.astro`-Frontmatter zur Server-Implementierung und in `<script>`-Blöcken zur Client-Implementierung (unterstützt durch `vanilla-intlayer`) auf.
 
 - **svelte**
   Das Kern-Svelte-Paket.
@@ -164,6 +167,30 @@ bun add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
 </Step>
 <Step number={2} title="Konfigurieren Sie Ihr Projekt">
 
+### Architektur
+
+In dieser Architektur erstellt die in `astro.config.ts` registrierte `intlayer()`-Integration Ihre Wörterbücher und fügt eine Middleware hinzu, die das Gebietsschema jeder Anfrage auflöst und unter `Astro.locals.intlayer` bereitstellt. Seiten befinden sich unter einem Rest-Segment `src/pages/[...locale]/`, sodass das Standard-Gebietsschema ohne Präfix bereitgestellt wird und jedes andere Gebietsschema eine eigene dedizierte URL erhält. `.astro`-Dateien lesen den Inhalt mit den `useIntlayer` / `useLocale`-Hooks von `astro-intlayer` für das Server-Rendering, und die Svelte-Insel (`src/components/svelte/SvelteIsland.svelte`) empfängt das vom Server erkannte Gebietsschema als Prop und übergibt es an `svelte-intlayer` für den interaktiven Teil. Inhaltsdeklarationen werden neben Ihren Komponenten in `src/` abgelegt.
+
+```bash
+.
+├── src
+│   ├── app.content.ts                # App content declaration
+│   ├── components
+│   │   └── svelte
+│   │       └── SvelteIsland.svelte   # Svelte island (content + locale switcher)
+│   └── 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 svelte() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Konfiguration
+
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu definieren:
 
 ```typescript fileName="intlayer.config.ts"
@@ -239,19 +266,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Inhalt in Astro verwenden">
 
-Sie können die Wörterbücher direkt in Ihren `.astro`-Dateien verwenden, indem Sie die von `intlayer` exportierten Kern-Helfer nutzen. Sie sollten außerdem SEO-Metadaten (wie hreflang und Canonical-Links) zu jeder Seite hinzufügen und ein Svelte-Island für interaktive clientseitige Inhalte einführen.
+Verwenden Sie Ihre Wörterbücher in `.astro`-Dateien mit den von `astro-intlayer` exportierten Hooks. Sie teilen die Signaturen von `react-intlayer`: `useIntlayer("key")` gibt den Inhalt eines Wörterbuchs zurück und `useLocale()` das aktuelle Gebietsschema, ohne dass Argumente übergeben werden müssen.
+
+Das Gebietsschema stammt von der `astro-intlayer`-Middleware, die die Integration vor Ihrer eigenen `src/middleware.ts` registriert. Sie löst es für jede Anfrage auf, aus dem URL-Präfix, dann dem vom Client gespeicherten Gebietsschema (Cookie oder Header), dann `Accept-Language`, und speichert es in `Astro.locals.intlayer`. Vorgerenderte Seiten verwenden nur die URL, da sie einmal für jeden Besucher gerendert werden.
+
+Sie sollten außerdem SEO-Metadaten (wie hreflang und Canonical-Links) zu jeder Seite hinzufügen und ein Svelte-Island für interaktive clientseitige Inhalte einführen.
 
 ```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 SvelteIsland from "../../components/svelte/SvelteIsland.svelte";
 
@@ -261,8 +290,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Vom Middleware aufgelöstes Gebietsschema (z. B. /de/about -> 'de')
+const { locale } = useLocale();
+
+// Inhalt des 'app'-Wörterbuchs für dieses Gebietsschema
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -318,6 +350,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` stellt auch `locale`, `defaultLocale` und `availableLocales` für Ihre eigenen Middlewares und Endpunkte bereit. Übergeben Sie ein Gebietsschema oder einen Selektor als zweites Argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`), um das Anfrage-Gebietsschema für einen Aufruf zu überschreiben.
+
 > **Hinweis zum Routing-Setup:**
 > Die von Ihnen verwendete Verzeichnisstruktur hängt von der Einstellung `middleware.routing` in `intlayer.config.ts` ab:
 >
@@ -438,10 +472,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -541,21 +575,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel-Compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Aktualisieren Sie Ihre `vite.config.ts`, um das `intlayerCompiler`-Plugin aufzunehmen:
-
-```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
-  ],
-});
-```
+Bauen Sie Ihre Anwendung, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren
 
 ```bash packageManager="npm"
 npm run build # Oder npm run dev