@intlayer/docs 5.5.11 → 5.6.0

package/docs/de/intlayer_with_vite+react.md

@@ -1,36 +1,39 @@
 ---
-createdAt: 2025-03-07
-updatedAt: 2025-06-29
-title: Übersetzen Sie Ihre React Native und Expo Mobile App (i18n)
-description: Entdecken Sie, wie Sie Ihre React Native und Expo Mobile App mehrsprachig gestalten. Folgen Sie der Dokumentation, um sie zu internationalisieren (i18n) und zu übersetzen.
+createdAt: 2024-03-07
+updatedAt: 2024-03-07
+title: Erste Schritte mit Intlayer in Vite + React
+description: Erfahren Sie, wie Sie Internationalisierung (i18n) zu Ihrer Vite- und React-Anwendung mit Intlayer hinzufügen. Folgen Sie dieser Anleitung, um Ihre App mehrsprachig zu machen.
 keywords:
   - Internationalisierung
   - Dokumentation
   - Intlayer
   - Vite
   - React
-  - React Native
+  - i18n
   - JavaScript
 slugs:
   - doc
   - environment
-  - react-native-and-expo
----
+  - vite-and-react
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4---
 
 # Erste Schritte zur Internationalisierung (i18n) mit Intlayer, Vite und React
 
+<iframe title="The best i18n solution for Vite and React? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
+
 Siehe [Application Template](https://github.com/aymericzip/intlayer-vite-react-template) auf GitHub.
 
 ## Was ist Intlayer?
 
-**Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen.
+**Intlayer** ist eine innovative, Open-Source Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen.
 
 Mit Intlayer können Sie:
 
-- **Übersetzungen einfach verwalten** mithilfe deklarativer Wörterbücher auf Komponentenebene.
+- **Übersetzungen einfach verwalten** mit deklarativen Wörterbüchern auf Komponentenebene.
 - **Metadaten, Routen und Inhalte dynamisch lokalisieren**.
-- **TypeScript-Unterstützung sicherstellen** durch automatisch generierte Typen, die die Autovervollständigung und Fehlererkennung verbessern.
-- **Von erweiterten Funktionen profitieren**, wie dynamische Spracherkennung und Umschaltung.
+- **TypeScript-Unterstützung sicherstellen** durch automatisch generierte Typen, die Autovervollständigung und Fehlererkennung verbessern.
+- **Von erweiterten Funktionen profitieren**, wie dynamische Lokalerkennung und -umschaltung.
 
 ---
 
@@ -42,28 +45,28 @@ Installieren Sie die notwendigen Pakete mit npm:
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
-npm install --save-dev vite-intlayer
+npm install vite-intlayer --save-dev
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
-pnpm add --save-dev vite-intlayer
+pnpm add vite-intlayer --save-dev
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
-yarn add --save-dev vite-intlayer
+yarn add vite-intlayer --save-dev
 ```
 
 - **intlayer**
 
-  Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md), Transpilation und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md) bereitstellt.
+  Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, [Inhaltserklärung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md), Transpilierung und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md) bereitstellt.
 
 - **react-intlayer**
   Das Paket, das Intlayer in React-Anwendungen integriert. Es stellt Kontext-Provider und Hooks für die Internationalisierung in React bereit.
 
 - **vite-intlayer**
-  Beinhaltet das Vite-Plugin zur Integration von Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, Verwaltung von Cookies und Handhabung von URL-Weiterleitungen.
+  Enthält das Vite-Plugin zur Integration von Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, Verwaltung von Cookies und Handhabung von URL-Weiterleitungen.
 
 ### Schritt 2: Konfiguration Ihres Projekts
 
@@ -78,7 +81,7 @@ const config: IntlayerConfig = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // Ihre weiteren Sprachen
+      // Ihre weiteren Sprachversionen
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -91,7 +94,6 @@ export default config;
 import { Locales } from "intlayer";
 
 /** @type {import('intlayer').IntlayerConfig} */
-// Konfiguration der Internationalisierung
 const config = {
   internationalization: {
     locales: [
@@ -111,7 +113,6 @@ export default config;
 const { Locales } = require("intlayer");
 
 /** @type {import('intlayer').IntlayerConfig} */
-// Konfiguration der Internationalisierung
 const config = {
   internationalization: {
     locales: [
@@ -127,7 +128,7 @@ const config = {
 module.exports = config;
 ```
 
-> Durch diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen einrichten, Intlayer-Logs in der Konsole deaktivieren und vieles mehr. Für eine vollständige Liste der verfügbaren Parameter lesen Sie bitte die [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
+> Durch diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen einrichten, Intlayer-Protokolle in der Konsole deaktivieren und vieles mehr. Für eine vollständige Liste der verfügbaren Parameter verweisen wir auf die [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
 
 ### Schritt 3: Integrieren Sie Intlayer in Ihre Vite-Konfiguration
 
@@ -166,9 +167,9 @@ module.exports = defineConfig({
 });
 ```
 
-> Das `intlayerPlugin()` Vite-Plugin wird verwendet, um Intlayer mit Vite zu integrieren. Es sorgt für den Aufbau von Inhaltsdeklarationsdateien und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der Vite-Anwendung. Zusätzlich stellt es Aliase bereit, um die Leistung zu optimieren.
+> Das `intlayerPlugin()` Vite-Plugin wird verwendet, um Intlayer mit Vite zu integrieren. Es stellt sicher, dass Inhaltsdeklarationsdateien erstellt und im Entwicklungsmodus überwacht werden. Es definiert Intlayer-Umgebungsvariablen innerhalb der Vite-Anwendung. Zusätzlich bietet es Aliase zur Optimierung der Leistung.
 
-### Schritt 4: Deklarieren Sie Ihren Inhalt
+### Schritt 4: Deklarieren Sie Ihre Inhalte
 
 Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:
 
@@ -277,7 +278,7 @@ const appContent = {
       },
 
     readTheDocs: t({
-      en: "Klicken Sie auf die Logos von Vite und React, um mehr zu erfahren",
+      en: "Klicken Sie auf die Vite- und React-Logos, um mehr zu erfahren",
       fr: "Cliquez sur les logos Vite et React pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y React para obtener más información",
     }),
@@ -295,13 +296,11 @@ const appContent = {
   key: "app",
   content: {
     viteLogo: t({
-      de: "Vite-Logo",
       en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
     }),
     reactLogo: t({
-      de: "React-Logo",
       en: "React logo",
       fr: "Logo React",
       es: "Logo React",
@@ -310,7 +309,6 @@ const appContent = {
     title: "Vite + React",
 
     count: t({
-      de: "Zähler ist ",
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
@@ -321,15 +319,9 @@ const appContent = {
       ReactNode >
       {
         // Vergessen Sie nicht, React zu importieren, wenn Sie einen React-Knoten in Ihrem Inhalt verwenden
-        de: (
-          <>
-            Bearbeiten Sie <code>src/App.tsx</code> und speichern Sie, um HMR zu
-            testen
-          </>
-        ),
         en: (
           <>
-            Edit <code>src/App.tsx</code> and save to test HMR
+            Edit <code>src/App.tsx</code> und speichern, um HMR zu testen
           </>
         ),
         fr: (
@@ -339,14 +331,14 @@ const appContent = {
         ),
         es: (
           <>
-            Bearbeite <code>src/App.tsx</code> und speichere, um HMR zu testen
+            Editieren Sie <code>src/App.tsx</code> und speichern Sie, um HMR zu
+            testen
           </>
         ),
       },
 
     readTheDocs: t({
-      de: "Klicke auf die Vite- und React-Logos, um mehr zu erfahren",
-      en: "Click on the Vite and React logos to learn more",
+      en: "Klicken Sie auf die Vite- und React-Logos, um mehr zu erfahren",
       fr: "Cliquez sur les logos Vite et React pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y React para obtener más información",
     }),
@@ -364,7 +356,6 @@ module.exports = appContent;
     "viteLogo": {
       "nodeType": "translation",
       "translation": {
-        "de": "Vite-Logo",
         "en": "Vite logo",
         "fr": "Logo Vite",
         "es": "Logo Vite"
@@ -381,6 +372,7 @@ module.exports = appContent;
     "title": {
       "nodeType": "translation",
       "translation": {
+        "de": "Vite + React",
         "en": "Vite + React",
         "fr": "Vite + React",
         "es": "Vite + React"
@@ -389,6 +381,7 @@ module.exports = appContent;
     "count": {
       "nodeType": "translation",
       "translation": {
+        "de": "Zähler ist ",
         "en": "count is ",
         "fr": "le compte est ",
         "es": "el recuento es "
@@ -397,16 +390,16 @@ module.exports = appContent;
     "edit": {
       "nodeType": "translation",
       "translation": {
+        "de": "Bearbeiten Sie src/App.tsx und speichern Sie, um HMR zu testen",
         "en": "Edit src/App.tsx and save to test HMR",
         "fr": "Éditez src/App.tsx et enregistrez pour tester HMR",
-        "es": "Edita src/App.tsx y guarda para probar HMR",
-        "de": "Bearbeite src/App.tsx und speichere, um HMR zu testen"
+        "es": "Edita src/App.tsx y guarda para probar HMR"
       }
     },
     "readTheDocs": {
       "nodeType": "translation",
       "translation": {
-        "de": "Klicken Sie auf die Vite- und React-Logos, um mehr zu erfahren",
+        "de": "Klicken Sie auf die Logos von Vite und React, um mehr zu erfahren",
         "en": "Click on the Vite and React logos to learn more",
         "fr": "Cliquez sur les logos Vite et React pour en savoir plus",
         "es": "Haga clic en los logotipos de Vite y React para obtener más información"
@@ -416,9 +409,9 @@ module.exports = appContent;
 }
 ```
 
-> Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, sobald sie in das `contentDir`-Verzeichnis (standardmäßig `./src`) aufgenommen werden und die Dateiendung der Inhaltsdeklaration (standardmäßig `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`) erfüllen.
+> Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, sobald sie in das `contentDir`-Verzeichnis (standardmäßig `./src`) aufgenommen werden. Und die Dateiendung der Inhaltsdeklaration muss übereinstimmen (standardmäßig `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
 
-> Für weitere Details lesen Sie bitte die [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md).
+> Für weitere Details siehe die [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md).
 
 > Wenn Ihre Inhaltsdatei TSX-Code enthält, sollten Sie in Ihrer Inhaltsdatei `import React from "react";` importieren.
 
@@ -464,7 +457,7 @@ const AppContent: FC = () => {
   );
 };
 
-const App: FC = () => (
+const App = () => (
   <IntlayerProvider>
     <AppContent />
   </IntlayerProvider>
@@ -567,13 +560,19 @@ const App = () => (
 module.exports = App;
 ```
 
+> Wenn Sie Ihren Inhalt in einem `string`-Attribut verwenden möchten, wie z.B. `alt`, `title`, `href`, `aria-label` usw., müssen Sie den Wert der Funktion aufrufen, wie:
+
+> ```jsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> ```
+
 > Wenn Sie Ihren Inhalt in einem `string`-Attribut verwenden möchten, wie z.B. `alt`, `title`, `href`, `aria-label` usw., müssen Sie den Wert der Funktion aufrufen, zum Beispiel:
 
 > ```jsx
 > <img src={content.image.src.value} alt={content.image.value} />
 > ```
 
-> Um mehr über den `useIntlayer` Hook zu erfahren, siehe die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useIntlayer.md).
+> Um mehr über den `useIntlayer` Hook zu erfahren, lesen Sie die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useIntlayer.md).
 
 ### (Optional) Schritt 6: Ändern Sie die Sprache Ihres Inhalts
 
@@ -627,7 +626,7 @@ const LocaleSwitcher = () => {
 
 > Um mehr über den `useLocale` Hook zu erfahren, lesen Sie die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useLocale.md).
 
-### (Optional) Schritt 7: Fügen Sie Ihrer Anwendung lokalisierte Routen hinzu
+### (Optional) Schritt 7: Lokalisierte Routen zu Ihrer Anwendung hinzufügen
 
 Der Zweck dieses Schrittes ist es, für jede Sprache eindeutige Routen zu erstellen. Dies ist nützlich für SEO und SEO-freundliche URLs.
 Beispiel:
@@ -640,7 +639,7 @@ Beispiel:
 
 > Standardmäßig sind die Routen für die Standardsprache nicht mit einem Präfix versehen. Wenn Sie die Standardsprache mit einem Präfix versehen möchten, können Sie in Ihrer Konfiguration die Option `middleware.prefixDefault` auf `true` setzen. Weitere Informationen finden Sie in der [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
 
-Um lokalisierte Routen zu Ihrer Anwendung hinzuzufügen, können Sie eine `LocaleRouter`-Komponente erstellen, die die Routen Ihrer Anwendung umschließt und die sprachabhängige Navigation verwaltet. Hier ist ein Beispiel mit [React Router](https://reactrouter.com/home):
+Um lokalisierte Routen in Ihre Anwendung hinzuzufügen, können Sie eine `LocaleRouter`-Komponente erstellen, die die Routen Ihrer Anwendung umschließt und die sprachabhängige Navigation verwaltet. Hier ist ein Beispiel unter Verwendung von [React Router](https://reactrouter.com/home):
 
 ```tsx fileName="src/components/LocaleRouter.tsx"  codeFormat="typescript"
 // Importieren der notwendigen Abhängigkeiten und Funktionen
@@ -660,8 +659,8 @@ const { internationalization, middleware } = configuration;
 const { locales, defaultLocale } = internationalization;
 
 /**
- * Eine Komponente, die die Lokalisierung verwaltet und Kinder mit dem entsprechenden Lokalisierungskontext umschließt.
- * Sie verwaltet die Erkennung und Validierung der Sprache basierend auf der URL.
+ * Eine Komponente, die die Lokalisierung verwaltet und Kinder mit dem entsprechenden Locale-Kontext umschließt.
+ * Sie verwaltet die URL-basierte Lokalerkennung und -validierung.
  */
 const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
   children,
@@ -669,21 +668,21 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
 }) => {
   const { pathname, search } = useLocation(); // Aktuellen URL-Pfad abrufen
 
-  // Bestimme die aktuelle Locale, standardmäßig auf die Standardlocale zurückgreifen, falls nicht angegeben
+  // Bestimmen der aktuellen Locale, Standardwert verwenden, falls nicht angegeben
   const currentLocale = locale ?? defaultLocale;
 
-  // Entferne das Locale-Präfix aus dem Pfad, um einen Basis-Pfad zu erstellen
+  // Entfernen des Locale-Präfixes aus dem Pfad, um einen Basis-Pfad zu erstellen
   const pathWithoutLocale = getPathWithoutLocale(
     pathname // Aktueller URL-Pfad
   );
 
   /**
-   * Wenn middleware.prefixDefault true ist, sollte die Standardlocale immer mit einem Präfix versehen sein.
+   * Wenn middleware.prefixDefault true ist, sollte die Standard-Locale immer vorangestellt werden.
    */
   if (middleware.prefixDefault) {
     // Locale validieren
     if (!locale || !locales.includes(locale)) {
-      // Weiterleitung zur Standardlocale mit aktualisiertem Pfad
+      // Weiterleitung zur Standard-Locale mit aktualisiertem Pfad
       return (
         <Navigate
           to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
@@ -698,14 +697,14 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
     );
   } else {
     /**
-     * Wenn middleware.prefixDefault false ist, wird die Standard-Locale nicht vorangestellt.
-     * Stelle sicher, dass die aktuelle Locale gültig ist und nicht die Standard-Locale ist.
+     * Wenn middleware.prefixDefault false ist, wird die Standardsprache nicht mit einem Präfix versehen.
+     * Stellen Sie sicher, dass die aktuelle Locale gültig ist und nicht die Standardsprache ist.
      */
     if (
       currentLocale.toString() !== defaultLocale.toString() &&
       !locales
         .filter(
-          (locale) => locale.toString() !== defaultLocale.toString() // Schließt die Standard-Locale aus
+          (locale) => locale.toString() !== defaultLocale.toString() // Schließt die Standardsprache aus
         )
         .includes(currentLocale) // Überprüfen, ob die aktuelle Locale in der Liste der gültigen Locales enthalten ist
     ) {
@@ -721,8 +720,8 @@ const AppLocalized: FC<PropsWithChildren<{ locale: Locales }>> = ({
 };
 
 /**
- * Ein Router-Komponent, der locale-spezifische Routen einrichtet.
- * Er verwendet React Router, um die Navigation zu verwalten und lokalisierte Komponenten zu rendern.
+ * Eine Router-Komponente, die locale-spezifische Routen einrichtet.
+ * Sie verwendet React Router, um die Navigation zu verwalten und lokalisierte Komponenten zu rendern.
  */
 export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
   <BrowserRouter>
@@ -736,18 +735,18 @@ export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
             // Routenmuster, um die Locale zu erfassen (z.B. /en/, /fr/) und alle nachfolgenden Pfade zu erfassen
             path={`/${locale}/*`}
             key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Umschließt die Kinder mit der Lokalisierungsverwaltung
+            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Umschließt die Kinder mit der Locale-Verwaltung
           />
         ))}
 
       {
-        // Wenn das Präfix für die Standard-Locale deaktiviert ist, rendere die Kinder direkt im Stammverzeichnis
+        // Wenn das Präfix für die Standard-Locale deaktiviert ist, werden die Kinder direkt im Stammverzeichnis gerendert
         !middleware.prefixDefault && (
           <Route
             path="*"
             element={
               <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // Umschließt die Kinder mit der Lokalisierungsverwaltung
+            } // Umschließt die Kinder mit der Locale-Verwaltung
           />
         )
       }
@@ -774,14 +773,14 @@ const { internationalization, middleware } = configuration;
 const { locales, defaultLocale } = internationalization;
 
 /**
- * Eine Komponente, die die Lokalisierung verwaltet und die Kinder mit dem entsprechenden Locale-Kontext umschließt.
+ * Eine Komponente, die die Lokalisierung verwaltet und Kinder mit dem entsprechenden Locale-Kontext umschließt.
 /**
- * Es verwaltet die lokalisierungsbasierte Erkennung und Validierung der URL.
+ * Es verwaltet die auf der URL basierende Lokalisierungserkennung und -validierung.
  */
 const AppLocalized = ({ children, locale }) => {
   const { pathname, search } = useLocation(); // Holt den aktuellen URL-Pfad
 
-  // Bestimmt die aktuelle Locale, standardmäßig die Default-Locale, falls nicht angegeben
+  // Bestimmt die aktuelle Locale, standardmäßig die Standard-Locale, falls keine angegeben ist
   const currentLocale = locale ?? defaultLocale;
 
   // Entfernt das Locale-Präfix aus dem Pfad, um einen Basis-Pfad zu erstellen
@@ -790,7 +789,7 @@ const AppLocalized = ({ children, locale }) => {
   );
 
   /**
-   * Wenn middleware.prefixDefault true ist, sollte die Standard-Locale immer vorangestellt werden.
+   * Wenn middleware.prefixDefault true ist, sollte die Standard-Locale immer als Präfix verwendet werden.
    */
   if (middleware.prefixDefault) {
     // Validiert die Locale
@@ -845,21 +844,21 @@ export const LocaleRouter = ({ children }) => (
         )
         .map((locale) => (
           <Route
-            // Routenmuster, um die Locale zu erfassen (z.B. /en/, /fr/) und alle nachfolgenden Pfade zu erfassen
+            // Routenmuster, um die Locale zu erfassen (z.B. /en/, /fr/) und alle nachfolgenden Pfade abzugleichen
             path={`/${locale}/*`}
             key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Umschließt Kinder mit Locale-Verwaltung
+            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Umschließt die Kinder mit der Locale-Verwaltung
           />
         ))}
 
       {
-        // Wenn das Präfix für die Standard-Locale deaktiviert ist, rendere die Kinder direkt im Stammverzeichnis
+        // Wenn das Präfix für die Standard-Locale deaktiviert ist, werden die Kinder direkt im Stammverzeichnis gerendert
         !middleware.prefixDefault && (
           <Route
             path="*"
             element={
               <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // Umschließt Kinder mit Locale-Verwaltung
+            } // Umschließt die Kinder mit der Locale-Verwaltung
           />
         )
       }
@@ -886,15 +885,15 @@ const { locales, defaultLocale } = internationalization;
 
 /**
  * Eine Komponente, die die Lokalisierung verwaltet und die Kinder mit dem entsprechenden Lokalisierungskontext umschließt.
- * Sie verwaltet die URL-basierte Lokalisierungserkennung und -validierung.
+ * Sie verwaltet die URL-basierte Lokalerkennung und Validierung.
  */
 const AppLocalized = ({ children, locale }) => {
   const { pathname, search } = useLocation(); // Hole den aktuellen URL-Pfad
 
-  // Bestimme die aktuelle Locale, standardmäßig die Default-Locale verwenden, falls nicht angegeben
+  // Bestimme die aktuelle Locale, standardmäßig auf die Default-Locale zurückfallend, falls nicht angegeben
   const currentLocale = locale ?? defaultLocale;
 
-  // Entferne das Locale-Präfix vom Pfad, um einen Basis-Pfad zu erstellen
+  // Entferne das Locale-Präfix aus dem Pfad, um einen Basis-Pfad zu erstellen
   const pathWithoutLocale = getPathWithoutLocale(
     pathname // Aktueller URL-Pfad
   );
@@ -903,13 +902,13 @@ const AppLocalized = ({ children, locale }) => {
    * Wenn middleware.prefixDefault true ist, sollte die Default-Locale immer vorangestellt werden.
    */
   if (middleware.prefixDefault) {
-    // Validierung der Locale
+    // Überprüfe die Locale
     if (!locale || !locales.includes(locale)) {
-      // Weiterleitung zur Default-Locale mit aktualisiertem Pfad
+      // Weiterleitung zur Default-Locale mit dem aktualisierten Pfad
       return (
         <Navigate
           to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // Ersetzt den aktuellen Eintrag im Verlauf durch den neuen
+          replace // Ersetzt den aktuellen Eintrag in der Historie durch den neuen
         />
       );
     }
@@ -921,15 +920,15 @@ const AppLocalized = ({ children, locale }) => {
   } else {
     /**
      * Wenn middleware.prefixDefault false ist, wird die Standard-Locale nicht vorangestellt.
-     * Stelle sicher, dass die aktuelle Locale gültig ist und nicht die Standard-Locale.
+     * Stelle sicher, dass die aktuelle Locale gültig ist und nicht die Standard-Locale ist.
      */
     if (
       currentLocale.toString() !== defaultLocale.toString() &&
       !locales
         .filter(
-          (locale) => locale.toString() !== defaultLocale.toString() // Schließe die Standard-Locale aus
+          (locale) => locale.toString() !== defaultLocale.toString() // Schließt die Standard-Locale aus
         )
-        .includes(currentLocale) // Prüfe, ob die aktuelle Locale in der Liste der gültigen Locales ist
+        .includes(currentLocale) // Prüft, ob die aktuelle Locale in der Liste der gültigen Locales ist
     ) {
       // Weiterleitung zum Pfad ohne Sprachpräfix
       return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
@@ -955,10 +954,10 @@ const LocaleRouter = ({ children }) => (
         )
         .map((locale) => (
           <Route
-            // Routenmuster, um die Sprache zu erfassen (z.B. /en/, /fr/) und alle nachfolgenden Pfade zu matchen
+            // Routenmuster, um die Sprache zu erfassen (z.B. /en/, /fr/) und alle nachfolgenden Pfade zu erfassen
             path={`/${locale}/*`}
             key={locale}
-            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Umschließt Kinder mit der Verwaltung der Spracheinstellung
+            element={<AppLocalized locale={locale}>{children}</AppLocalized>} // Umschließt Kinder mit der Sprachverwaltung
           />
         ))}
 
@@ -969,7 +968,7 @@ const LocaleRouter = ({ children }) => (
             path="*"
             element={
               <AppLocalized locale={defaultLocale}>{children}</AppLocalized>
-            } // Umschließt Kinder mit der Verwaltung der Spracheinstellung
+            } // Umschließt Kinder mit der Sprachverwaltung
           />
         )
       }
@@ -1017,7 +1016,7 @@ const App = () => (
 );
 ```
 
-Parallel dazu können Sie auch das `intLayerMiddlewarePlugin` verwenden, um serverseitiges Routing in Ihre Anwendung zu integrieren. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die am besten geeignete Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Locale erkannt wird, erfolgt eine Weiterleitung zur Standard-Locale.
+Parallel dazu können Sie auch das `intLayerMiddlewarePlugin` verwenden, um serverseitiges Routing in Ihre Anwendung zu integrieren. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die passendste Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wird keine Locale erkannt, erfolgt eine Weiterleitung zur Standard-Locale.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
@@ -1068,16 +1067,16 @@ import { useLocale } from "react-intlayer";
 import { type FC } from "react";
 
 const LocaleSwitcher: FC = () => {
-  const { pathname, search } = useLocation(); // Holt den aktuellen URL-Pfad. Beispiel: /fr/about?foo=bar
+  const { pathname, search } = useLocation(); // Hole den aktuellen URL-Pfad. Beispiel: /fr/about?foo=bar
   const navigate = useNavigate();
 
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (locale) => {
-      // Erstellen Sie die URL mit der aktualisierten Locale
+      // Erstelle die URL mit der aktualisierten Locale
       // Beispiel: /es/about?foo=bar
       const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
 
-      // Aktualisieren Sie den URL-Pfad
+      // Aktualisiere den URL-Pfad
       navigate(pathWithLocale);
     },
   });
@@ -1106,7 +1105,7 @@ const LocaleSwitcher: FC = () => {
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* Sprache im aktuellen Gebietsschema - z.B. Francés mit aktuellem Gebietsschema auf Locales.SPANISH gesetzt */}
+              {/* Sprache im aktuellen Gebietsschema - z.B. Francés, wenn das aktuelle Gebietsschema auf Locales.SPANISH gesetzt ist */}
               {getLocaleName(localeItem)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
@@ -1166,7 +1165,7 @@ const LocaleSwitcher = () => {
               {localeItem}
             </span>
             <span>
-              {/* Sprache im eigenen Gebietsschema - z.B. Français */}
+              {/* Sprache in ihrem eigenen Gebietsschema - z.B. Français */}
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
@@ -1196,16 +1195,16 @@ const {
 const { useLocale } = require("react-intlayer");
 
 const LocaleSwitcher = () => {
-  const { pathname, search } = useLocation(); // Holt den aktuellen URL-Pfad. Beispiel: /fr/about?foo=bar
+  const { pathname, search } = useLocation(); // Hole den aktuellen URL-Pfad. Beispiel: /fr/about?foo=bar
   const navigate = useNavigate();
 
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (locale) => {
-      // Konstruiert die URL mit der aktualisierten Locale
+      // Erstelle die URL mit der aktualisierten Locale
       // Beispiel: /es/about?foo=bar
       const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
 
-      // Aktualisiert den URL-Pfad
+      // Aktualisiere den URL-Pfad
       navigate(pathWithLocale);
     },
   });
@@ -1234,11 +1233,11 @@ const LocaleSwitcher = () => {
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* Sprache im aktuellen Gebietsschema - z.B. Francés mit aktuellem Gebietsschema auf Locales.SPANISH gesetzt */}
+              {/* Sprache im aktuellen Gebietsschema - z.B. Francés, wenn das aktuelle Gebietsschema auf Locales.SPANISH gesetzt ist */}
               {getLocaleName(localeItem)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Sprache auf Englisch - z.B. Französisch */}
+              {/* Sprache auf Englisch – z.B. Französisch */}
               {getLocaleName(localeItem, Locales.ENGLISH)}
             </span>
           </a>
@@ -1249,12 +1248,12 @@ const LocaleSwitcher = () => {
 };
 ```
 
-> Dokumentationsverweise:
+> Dokumentationsreferenzen:
 >
 > - [`useLocale` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useLocale.md)
 > - [`getLocaleName` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getLocaleName.md)
 > - [`getLocalizedUrl` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getLocalizedUrl.md)
-> - [`getHTMLTextDir` Hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getHTMLTextDir.md)
+> - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getHTMLTextDir.md)
 > - [`hrefLang` Attribut](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
 > - [`lang` Attribut](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/lang)
 > - [`dir` Attribut](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/dir)
@@ -1270,7 +1269,7 @@ Wenn Ihre Anwendung mehrere Sprachen unterstützt, ist es entscheidend, die `lan
 
 - **Barrierefreiheit**: Screenreader und unterstützende Technologien verlassen sich auf das korrekte `lang`-Attribut, um Inhalte richtig auszusprechen und zu interpretieren.
 - **Textdarstellung**: Das `dir`-Attribut (Richtung) sorgt dafür, dass der Text in der richtigen Reihenfolge dargestellt wird (z. B. von links nach rechts für Englisch, von rechts nach links für Arabisch oder Hebräisch), was für die Lesbarkeit unerlässlich ist.
-- **SEO**: Suchmaschinen verwenden das `lang`-Attribut, um die Sprache Ihrer Seite zu bestimmen, was dabei hilft, die richtige lokalisierte Version in den Suchergebnissen anzuzeigen.
+- **SEO**: Suchmaschinen verwenden das `lang`-Attribut, um die Sprache Ihrer Seite zu bestimmen und so die passende lokalisierte Version in den Suchergebnissen anzuzeigen.
 
 Indem Sie diese Attribute dynamisch aktualisieren, wenn sich die Spracheinstellung ändert, gewährleisten Sie eine konsistente und barrierefreie Erfahrung für Benutzer in allen unterstützten Sprachen.
 
@@ -1313,7 +1312,7 @@ import { getHTMLTextDir } from "intlayer";
  * - `lang`: Informiert Browser und Suchmaschinen über die Sprache der Seite.
  * - `dir`: Stellt die korrekte Leserichtung sicher (z.B. 'ltr' für Englisch, 'rtl' für Arabisch).
  *
- * Dieses dynamische Update ist essenziell für die korrekte Textdarstellung, Barrierefreiheit und SEO.
+ * Dieses dynamische Update ist essentiell für die korrekte Textdarstellung, Barrierefreiheit und SEO.
  */
 export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
@@ -1322,7 +1321,7 @@ export const useI18nHTMLAttributes = () => {
     // Aktualisiert das Sprachattribut auf die aktuelle Locale.
     document.documentElement.lang = locale;
 
-    // Setzt die Schreibrichtung basierend auf der aktuellen Locale.
+    // Setzt die Leserichtung basierend auf der aktuellen Locale.
     document.documentElement.dir = getHTMLTextDir(locale);
   }, [locale]);
 };
@@ -1334,9 +1333,9 @@ const { useLocale } = require("react-intlayer");
 const { getHTMLTextDir } = require("intlayer");
 
 /**
- * Aktualisiert die `lang`- und `dir`-Attribute des HTML-<html>-Elements basierend auf der aktuellen Locale.
+ * Aktualisiert die `lang`- und `dir`-Attribute des HTML-Elements <html> basierend auf der aktuellen Locale.
  * - `lang`: Informiert Browser und Suchmaschinen über die Sprache der Seite.
- * - `dir`: Stellt die korrekte Leserichtung sicher (z.B. 'ltr' für Englisch, 'rtl' für Arabisch).
+ * - `dir`: Stellt die korrekte Leserichtung sicher (z. B. 'ltr' für Englisch, 'rtl' für Arabisch).
  *
  * Diese dynamische Aktualisierung ist essenziell für die korrekte Textdarstellung, Barrierefreiheit und SEO.
  */
@@ -1347,7 +1346,7 @@ const useI18nHTMLAttributes = () => {
     // Aktualisiere das Sprachattribut auf die aktuelle Locale.
     document.documentElement.lang = locale;
 
-    // Setze die Leserichtung basierend auf der aktuellen Locale.
+    // Setze die Textrichtung basierend auf der aktuellen Locale.
     document.documentElement.dir = getHTMLTextDir(locale);
   }, [locale]);
 };
@@ -1381,10 +1380,9 @@ const App: FC = () => (
 export default App;
 ```
 
-````jsx fileName="src/App.msx" codeFormat="esm"
 #### Verwendung des Hooks in Ihrer Anwendung
 
-Integrieren Sie den Hook in Ihre Hauptkomponente, damit die HTML-Attribute bei einem Wechsel der Sprache aktualisiert werden:
+Integrieren Sie den Hook in Ihre Hauptkomponente, damit die HTML-Attribute aktualisiert werden, sobald sich die Locale ändert:
 
 ```tsx fileName="src/App.tsx" codeFormat="typescript"
 import type { FC } from "react";
@@ -1393,7 +1391,7 @@ import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
 import "./App.css";
 
 const AppContent: FC = () => {
-  // Wenden Sie den Hook an, um die lang- und dir-Attribute des <html>-Tags basierend auf der Sprache zu aktualisieren.
+  // Wenden Sie den Hook an, um die lang- und dir-Attribute des <html>-Tags basierend auf der Locale zu aktualisieren.
   useI18nHTMLAttributes();
 
   // ... Rest Ihrer Komponente
@@ -1406,7 +1404,7 @@ const App: FC = () => (
 );
 
 export default App;
-````
+```
 
 ```jsx fileName="src/App.msx" codeFormat="esm"
 import { IntlayerProvider, useIntlayer } from "react-intlayer";
@@ -1414,7 +1412,7 @@ import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
 import "./App.css";
 
 const AppContent = () => {
-  // Wenden Sie den Hook an, um die lang- und dir-Attribute des <html>-Tags basierend auf der Sprache zu aktualisieren.
+  // Wenden Sie den Hook an, um die lang- und dir-Attribute des <html>-Tags basierend auf der Locale zu aktualisieren.
   useI18nHTMLAttributes();
 
   // ... Rest Ihrer Komponente
@@ -1436,7 +1434,7 @@ const { useI18nHTMLAttributes } = require("./hooks/useI18nHTMLAttributes");
 require("./App.css");
 
 const AppContent = () => {
-  // Wenden Sie den Hook an, um die lang- und dir-Attribute des <html>-Tags basierend auf der Sprache zu aktualisieren.
+  // Wenden Sie den Hook an, um die lang- und dir-Attribute des <html>-Tags basierend auf der Locale zu aktualisieren.
   useI18nHTMLAttributes();
 
   // ... Rest Ihrer Komponente
@@ -1453,43 +1451,27 @@ module.exports = App;
 
 Durch diese Änderungen wird Ihre Anwendung:
 
-- Sicherstellen, dass das **language** (`lang`) Attribut die aktuelle Sprache korrekt widerspiegelt, was wichtig für SEO und das Verhalten des Browsers ist.
-- Die **Schreibrichtung** (`dir`) entsprechend der Sprache anpassen, um die Lesbarkeit und Benutzerfreundlichkeit für Sprachen mit unterschiedlichen Leserichtungen zu verbessern.
-- Eine zugänglichere Erfahrung bieten, da unterstützende Technologien auf diese Attribute angewiesen sind, um optimal zu funktionieren.
+- Sicherstellen, dass das **language** (`lang`) Attribut die aktuelle Locale korrekt widerspiegelt, was wichtig für SEO und das Verhalten des Browsers ist.
+- Die **Schreibrichtung** (`dir`) entsprechend der Locale anpassen, um die Lesbarkeit und Benutzerfreundlichkeit für Sprachen mit unterschiedlicher Leserichtung zu verbessern.
+- Eine bessere **Barrierefreiheit** bieten, da unterstützende Technologien auf diese Attribute angewiesen sind, um optimal zu funktionieren.
 
 ### (Optional) Schritt 10: Erstellen einer lokalisierten Link-Komponente
 
-// Wenden Sie den Hook an, um die Attribute lang und dir des <html>-Tags basierend auf der Locale zu aktualisieren.
-useI18nHTMLAttributes();
-
-// ... Rest Ihres Components
-};
-
-const App = () => (
-<IntlayerProvider>
-<AppContent />
-</IntlayerProvider>
-);
-
-module.exports = App;
-
-````
-
 Durch die Anwendung dieser Änderungen wird Ihre Anwendung:
 
-- Sicherstellen, dass das **Sprach-**Attribut (`lang`) die aktuelle Locale korrekt widerspiegelt, was wichtig für SEO und das Verhalten des Browsers ist.
-- Die **Schreibrichtung** (`dir`) entsprechend der Locale anpassen, um die Lesbarkeit und Benutzerfreundlichkeit für Sprachen mit unterschiedlicher Leserichtung zu verbessern.
+- Sicherstellen, dass das **Sprach**-Attribut (`lang`) die aktuelle Locale korrekt widerspiegelt, was wichtig für SEO und das Verhalten des Browsers ist.
+- Die **Schreibrichtung** (`dir`) entsprechend der Locale anpassen, um die Lesbarkeit und Benutzerfreundlichkeit für Sprachen mit unterschiedlichen Leserichtungen zu verbessern.
 - Eine zugänglichere **Benutzererfahrung** bieten, da unterstützende Technologien auf diese Attribute angewiesen sind, um optimal zu funktionieren.
 
 ### (Optional) Schritt 10: Erstellen einer lokalisierten Link-Komponente
 
-Um sicherzustellen, dass die Navigation Ihrer Anwendung die aktuelle Locale berücksichtigt, können Sie eine benutzerdefinierte `Link`-Komponente erstellen. Diese Komponente fügt automatisch interne URLs mit der aktuellen Sprache als Präfix hinzu. Zum Beispiel wird ein französischsprachiger Benutzer, der auf einen Link zur "Über uns"-Seite klickt, zu `/fr/about` statt zu `/about` weitergeleitet.
+Um sicherzustellen, dass die Navigation Ihrer Anwendung die aktuelle Sprache berücksichtigt, können Sie eine benutzerdefinierte `Link`-Komponente erstellen. Diese Komponente fügt automatisch den aktuellen Sprachpräfix zu internen URLs hinzu. Zum Beispiel wird ein französischsprachiger Benutzer, der auf einen Link zur "Über uns"-Seite klickt, zu `/fr/about` statt zu `/about` weitergeleitet.
 
 Dieses Verhalten ist aus mehreren Gründen nützlich:
 
 - **SEO und Benutzererfahrung**: Lokalisierte URLs helfen Suchmaschinen, sprachspezifische Seiten korrekt zu indexieren, und bieten den Nutzern Inhalte in ihrer bevorzugten Sprache.
-- **Konsistenz**: Durch die Verwendung eines lokalisierten Links in Ihrer gesamten Anwendung stellen Sie sicher, dass die Navigation innerhalb der aktuellen Locale bleibt und unerwartete Sprachwechsel vermieden werden.
-- **Wartbarkeit**: Die Zentralisierung der Lokalisierungslogik in einer einzigen Komponente vereinfacht die Verwaltung von URLs und macht Ihren Code leichter wartbar und erweiterbar, wenn Ihre Anwendung wächst.
+- **Konsistenz**: Durch die Verwendung eines lokalisierten Links in Ihrer gesamten Anwendung stellen Sie sicher, dass die Navigation innerhalb der aktuellen Sprache bleibt und unerwartete Sprachwechsel vermieden werden.
+- **Wartbarkeit**: Die Zentralisierung der Lokalisierungslogik in einer einzigen Komponente vereinfacht die Verwaltung der URLs und macht Ihren Code leichter wartbar und erweiterbar, wenn Ihre Anwendung wächst.
 
 Nachfolgend finden Sie die Implementierung einer lokalisierten `Link`-Komponente in TypeScript:
 
@@ -1510,14 +1492,14 @@ export interface LinkProps
 
 /**
  * Hilfsfunktion, um zu prüfen, ob eine gegebene URL extern ist.
- * Wenn die URL mit http:// oder https:// beginnt, gilt sie als extern.
+ * Wenn die URL mit http:// oder https:// beginnt, wird sie als extern betrachtet.
  */
 export const checkIsExternalLink = (href?: string): boolean =>
   /^https?:\/\//.test(href ?? "");
 
 /**
  * Eine benutzerdefinierte Link-Komponente, die das href-Attribut basierend auf der aktuellen Locale anpasst.
- * Für interne Links wird `getLocalizedUrl` verwendet, um die URL mit der Locale zu versehen (z.B. /fr/about).
+ * Für interne Links verwendet sie `getLocalizedUrl`, um die URL mit der Locale zu versehen (z.B. /fr/about).
  * Dies stellt sicher, dass die Navigation im gleichen Locale-Kontext bleibt.
  */
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
@@ -1525,7 +1507,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
     const { locale } = useLocale();
     const isExternalLink = checkIsExternalLink(href);
 
-    // Wenn der Link intern ist und eine gültige href vorhanden ist, wird die lokalisierte URL ermittelt.
+    // Wenn der Link intern ist und ein gültiges href vorhanden ist, wird die lokalisierte URL verwendet.
     const hrefI18n =
       href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
 
@@ -1538,7 +1520,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
 );
 
 Link.displayName = "Link";
-````
+```
 
 ```jsx fileName="src/components/Link.mjx" codeFormat="esm"
 import { getLocalizedUrl } from "intlayer";
@@ -1554,14 +1536,14 @@ export const checkIsExternalLink = (href?: string): boolean =>
 
 /**
  * Eine benutzerdefinierte Link-Komponente, die das href-Attribut basierend auf der aktuellen Locale anpasst.
- * Für interne Links verwendet sie `getLocalizedUrl`, um die URL mit der Locale zu versehen (z.B. /fr/about).
+ * Für interne Links wird `getLocalizedUrl` verwendet, um die URL mit der Locale zu versehen (z.B. /fr/about).
  * Dies stellt sicher, dass die Navigation im gleichen Locale-Kontext bleibt.
  */
 export const Link = forwardRef(({ href, children, ...props }, ref) => {
   const { locale } = useLocale();
   const isExternalLink = checkIsExternalLink(href);
 
-  // Wenn der Link intern ist und eine gültige href angegeben ist, wird die lokalisierte URL ermittelt.
+  // Wenn der Link intern ist und eine gültige href vorhanden ist, wird die lokalisierte URL abgerufen.
   const hrefI18n =
     href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
 
@@ -1595,7 +1577,7 @@ const Link = forwardRef(({ href, children, ...props }, ref) => {
   const { locale } = useLocale();
   const isExternalLink = checkIsExternalLink(href);
 
-  // Wenn der Link intern ist und eine gültige href vorhanden ist, wird die lokalisierte URL verwendet.
+  // Wenn der Link intern ist und eine gültige href angegeben ist, wird die lokalisierte URL ermittelt.
   const localizedHref = isExternalLink ? href : getLocalizedUrl(href, locale);
 
   return (
@@ -1613,25 +1595,25 @@ const Link = forwardRef(({ href, children, ...props }, ref) => {
 Link.displayName = "Link";
 ```
 
-#### Wie es funktioniert
+#### Funktionsweise
 
 - **Erkennung externer Links**:  
-  Die Hilfsfunktion `checkIsExternalLink` bestimmt, ob eine URL extern ist. Externe Links bleiben unverändert, da sie keine Lokalisierung benötigen.
+  Die Hilfsfunktion `checkIsExternalLink` bestimmt, ob eine URL extern ist. Externe Links bleiben unverändert, da sie nicht lokalisiert werden müssen.
 
 - **Abrufen der aktuellen Locale**:  
-  Der Hook `useLocale` liefert die aktuelle Locale (z.B. `fr` für Französisch).
+  Der Hook `useLocale` liefert die aktuelle Locale (z. B. `fr` für Französisch).
 
 - **Lokalisierung der URL**:  
-  Für interne Links (d.h. nicht extern) wird `getLocalizedUrl` verwendet, um die URL automatisch mit der aktuellen Locale zu versehen. Das bedeutet, wenn Ihr Benutzer Französisch eingestellt hat, wird aus `/about` als `href` automatisch `/fr/about`.
+  Für interne Links (d. h. nicht extern) wird `getLocalizedUrl` verwendet, um die URL automatisch mit der aktuellen Locale zu versehen. Das bedeutet, wenn Ihr Benutzer Französisch eingestellt hat, wird aus `/about` als `href` automatisch `/fr/about`.
 
 - **Rückgabe des Links**:  
   Die Komponente gibt ein `<a>`-Element mit der lokalisierten URL zurück, wodurch sichergestellt wird, dass die Navigation konsistent mit der Spracheinstellung erfolgt.
 
-Durch die Integration dieser `Link`-Komponente in Ihre Anwendung erhalten Sie eine kohärente und sprachbewusste Benutzererfahrung und profitieren gleichzeitig von verbesserter SEO und Benutzerfreundlichkeit.
+Indem Sie diese `Link`-Komponente in Ihrer gesamten Anwendung integrieren, gewährleisten Sie eine kohärente und sprachbewusste Benutzererfahrung und profitieren gleichzeitig von verbesserter SEO und Benutzerfreundlichkeit.
 
 ### TypeScript konfigurieren
 
-Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
+Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Codebasis robuster zu machen.
 
 ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
 
@@ -1651,9 +1633,9 @@ Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generiert
 
 ### Git-Konfiguration
 
-Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. So vermeiden Sie, diese versehentlich in Ihr Git-Repository zu committen.
+Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dadurch vermeiden Sie, diese versehentlich in Ihr Git-Repository zu committen.
 
-Dazu können Sie folgende Anweisungen in Ihre `.gitignore`-Datei aufnehmen:
+Fügen Sie dazu folgende Anweisungen in Ihre `.gitignore`-Datei ein:
 
 ```plaintext
 # Ignoriere die von Intlayer generierten Dateien
@@ -1673,7 +1655,7 @@ Diese Erweiterung bietet:
 - **Inline-Vorschauen** des übersetzten Inhalts.
 - **Schnellaktionen**, um Übersetzungen einfach zu erstellen und zu aktualisieren.
 
-Für weitere Details zur Verwendung der Erweiterung siehe die [Intlayer VS Code Extension Dokumentation](https://intlayer.org/doc/vs-code-extension).
+Für weitere Details zur Nutzung der Erweiterung siehe die [Intlayer VS Code Extension Dokumentation](https://intlayer.org/doc/vs-code-extension).
 
 ---
 
@@ -1685,4 +1667,4 @@ Um weiterzugehen, können Sie den [visuellen Editor](https://github.com/aymericz
 
 ## Dokumentationshistorie
 
-- 5.5.10 - 2025-06-29: Initiale Historie
+- 5.5.10 - 2025-06-29: Historie initialisiert