@intlayer/docs 5.5.10 → 5.5.11

package/docs/de/intlayer_with_nextjs_page_router.md

@@ -0,0 +1,1494 @@
+---
+createdAt: 2024-12-07
+updatedAt: 2025-06-29
+title: Übersetzen Sie Ihre Next.js- und Page Router-Website (i18n)
+description: Entdecken Sie, wie Sie Ihre Next.js-Website mit Page Router mehrsprachig machen. Folgen Sie der Dokumentation, um sie zu internationalisieren (i18n) und zu übersetzen.
+keywords:
+  - Internationalisierung
+  - Dokumentation
+  - Intlayer
+  - Page Router
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - environment
+  - nextjs
+  - next-with-Page-Router
+---
+
+# Erste Schritte zur Internationalisierung (i18n) mit Intlayer und Next.js unter Verwendung des Page Routers
+
+## 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 integriert sich nahtlos in das neueste **Next.js**-Framework, einschließlich seines traditionellen **Page Routers**.
+
+Mit Intlayer können Sie:
+
+- **Übersetzungen einfach verwalten** durch deklarative Wörterbücher auf Komponentenebene.
+- **Metadaten, Routen und Inhalte dynamisch lokalisieren**.
+- **TypeScript-Unterstützung sicherstellen** mit automatisch generierten Typen, die die Autovervollständigung und Fehlererkennung verbessern.
+- **Von erweiterten Funktionen profitieren**, wie dynamischer Spracherkennung und -umschaltung.
+
+> Intlayer ist kompatibel mit Next.js 12, 13, 14 und 15. Wenn Sie den Next.js App Router verwenden, lesen Sie bitte die [App Router Anleitung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_14.md). Für Next.js 15 folgen Sie dieser [Anleitung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_15.md).
+
+---
+
+## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Next.js-Anwendung mit Page Router
+
+### Schritt 1: Abhängigkeiten installieren
+
+Installieren Sie die notwendigen Pakete mit Ihrem bevorzugten Paketmanager:
+
+```bash packageManager="npm"
+npm install intlayer next-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer next-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add intlayer next-intlayer
+```
+
+- **intlayer**
+
+- **intlayer**
+
+  Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, [Inhaltsdeklaration](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.
+
+- **next-intlayer**
+
+  Das Paket, das Intlayer mit Next.js integriert. Es stellt Kontextanbieter und Hooks für die Internationalisierung in Next.js bereit. Zusätzlich enthält es das Next.js-Plugin zur Integration von Intlayer mit [Webpack](https://webpack.js.org/) oder [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Weiterleitungen.
+
+### Schritt 2: Konfigurieren Sie Ihr Projekt
+
+Erstellen Sie eine Konfigurationsdatei, um die von Ihrer Anwendung unterstützten Sprachen zu definieren:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Fügen Sie hier Ihre weiteren Sprachversionen hinzu
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Fügen Sie hier Ihre weiteren Sprachversionen hinzu
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Fügen Sie hier Ihre weiteren Sprachversionen hinzu
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+module.exports = config;
+```
+
+> Über 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 siehe die [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
+
+### Schritt 3: Integrieren Sie Intlayer in die Next.js-Konfiguration
+
+Ändern Sie Ihre Next.js-Konfiguration, um Intlayer zu integrieren:
+
+```typescript fileName="next.config.mjs"
+import { withIntlayer } from "next-intlayer/server";
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Ihre bestehende Next.js-Konfiguration
+};
+
+export default withIntlayer(nextConfig);
+```
+
+> Das `withIntlayer()` Next.js-Plugin wird verwendet, um Intlayer mit Next.js zu integrieren. Es sorgt für den Aufbau der Inhaltsdeklarationsdateien und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der [Webpack](https://webpack.js.org/) oder [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack)-Umgebungen. Zusätzlich stellt es Aliase bereit, um die Leistung zu optimieren, und gewährleistet die Kompatibilität mit Server-Komponenten.
+
+### Schritt 4: Middleware für die Lokalerkennung konfigurieren
+
+Richten Sie Middleware ein, um die bevorzugte Sprache des Benutzers automatisch zu erkennen und zu verarbeiten:
+
+```typescript fileName="src/middleware.ts" codeFormat="typescript"
+export { intlayerMiddleware as middleware } from "next-intlayer/middleware";
+
+export const config = {
+  matcher:
+    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
+};
+```
+
+```javascript fileName="src/middleware.mjs" codeFormat="esm"
+export { intlayerMiddleware as middleware } from "next-intlayer/middleware";
+
+export const config = {
+  matcher:
+    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
+};
+```
+
+```javascript fileName="src/middleware.cjs" codeFormat="commonjs"
+const { intlayerMiddleware } = require("next-intlayer/middleware");
+
+const config = {
+  matcher:
+    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
+};
+
+module.exports = { middleware: intlayerMiddleware, config };
+```
+
+> Passen Sie den Parameter `matcher` an, um die Routen Ihrer Anwendung abzudecken. Weitere Details finden Sie in der [Next.js-Dokumentation zur Konfiguration des Matchers](https://nextjs.org/docs/app/building-your-application/routing/middleware).
+
+### Schritt 5: Definieren Sie dynamische Locale-Routen
+
+Implementieren Sie dynamisches Routing, um lokalisierte Inhalte basierend auf der Locale des Benutzers bereitzustellen.
+
+1.  **Erstellen Sie locale-spezifische Seiten:**
+
+    Benennen Sie Ihre Hauptseiten-Datei um, um das dynamische Segment `[locale]` einzuschließen.
+
+    ```bash
+    mv src/pages/index.tsx src/pages/[locale]/index.tsx
+    ```
+
+2.  **Aktualisieren Sie `_app.tsx`, um die Lokalisierung zu unterstützen:**
+
+    Ändern Sie Ihre `_app.tsx`, um Intlayer-Provider einzubinden.
+
+    ```tsx fileName="src/pages/_app.tsx" codeFormat="typescript"
+    import type { FC } from "react";
+    import type { AppProps } from "next/app";
+    import { IntlayerClientProvider } from "next-intlayer";
+
+    const App = FC<AppProps>({ Component, pageProps }) => {
+      const { locale } = pageProps;
+
+      return (
+        <IntlayerClientProvider locale={locale}>
+          <Component {...pageProps} />
+        </IntlayerClientProvider>
+      );
+    }
+
+    export default MyApp;
+    ```
+
+    ```jsx fileName="src/pages/_app.mjx" codeFormat="esm"
+    import { IntlayerClientProvider } from "next-intlayer";
+
+    const App = ({ Component, pageProps }) => (
+      <IntlayerClientProvider locale={locale}>
+        <Component {...pageProps} />
+      </IntlayerClientProvider>
+    );
+
+    export default App;
+    ```
+
+    ```jsx fileName="src/pages/_app.csx" codeFormat="commonjs"
+    const { IntlayerClientProvider } = require("next-intlayer");
+
+    const App = ({ Component, pageProps }) => (
+      <IntlayerClientProvider locale={locale}>
+        <Component {...pageProps} />
+      </IntlayerClientProvider>
+    );
+
+    module.exports = App;
+    ```
+
+3.  **Einrichten von `getStaticPaths` und `getStaticProps`:**
+
+    Definieren Sie in Ihrer `[locale]/index.tsx` die Pfade und Props, um verschiedene Sprachen zu unterstützen.
+
+    ```tsx fileName="src/pages/[locale]/index.tsx" codeFormat="typescript"
+    import type { FC } from "react";
+    import type { GetStaticPaths, GetStaticProps } from "next";
+    import { type Locales, getConfiguration } from "intlayer";
+
+    const HomePage: FC = () => <div>{/* Ihr Inhalt hier */}</div>;
+
+    export const getStaticPaths: GetStaticPaths = () => {
+      const { internationalization } = getConfiguration();
+      const { locales } = internationalization;
+
+      const paths = locales.map((locale) => ({
+        params: { locale },
+      }));
+
+      return { paths, fallback: false };
+    };
+
+    export const getStaticProps: GetStaticProps = ({ params }) => {
+      const locale = params?.locale as string;
+
+      return {
+        props: {
+          locale,
+        },
+      };
+    };
+
+    export default HomePage;
+    ```
+
+    ```jsx fileName="src/pages/[locale]/index.mjx" codeFormat="esm"
+    import { getConfiguration } from "intlayer";
+    import { ComponentExample } from "@components/ComponentExample";
+
+    const HomePage = () => <div>{/* Ihr Inhalt hier */}</div>;
+
+    export const getStaticPaths = () => {
+      const { internationalization } = getConfiguration();
+      const { locales } = internationalization;
+
+      const paths = locales.map((locale) => ({
+        params: { locale },
+      }));
+
+      return { paths, fallback: false };
+    };
+
+    export const getStaticProps = ({ params }) => {
+      const locale = params?.locale;
+
+      return {
+        props: {
+          locale,
+        },
+      };
+    };
+    ```
+
+    ```jsx fileName="src/pages/[locale]/index.csx" codeFormat="commonjs"
+    const { getConfiguration } = require("intlayer");
+    const { ComponentExample } = require("@components/ComponentExample");
+
+    const HomePage = () => <div>{/* Ihr Inhalt hier */}</div>;
+
+    const getStaticPaths = async () => {
+      const { internationalization } = getConfiguration();
+      const { locales } = internationalization;
+
+      const paths = locales.map((locale) => ({
+        params: { locale },
+      }));
+
+      return { paths, fallback: false };
+    };
+
+    const getStaticProps = async ({ params }) => {
+      const locale = params?.locale;
+
+      return {
+        props: {
+          locale,
+        },
+      };
+    };
+
+    module.exports = {
+      getStaticProps,
+      getStaticPaths,
+      default: HomePage,
+    };
+    ```
+
+> `getStaticPaths` und `getStaticProps` stellen sicher, dass Ihre Anwendung die notwendigen Seiten für alle Sprachen im Next.js Page Router vorab erstellt. Dieser Ansatz reduziert die Laufzeitberechnung und führt zu einer verbesserten Benutzererfahrung. Für weitere Details lesen Sie bitte die Next.js-Dokumentation zu [`getStaticPaths`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths) und [`getStaticProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props).
+
+### Schritt 6: Deklarieren Sie Ihre Inhalte
+
+Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern.
+
+```tsx fileName="src/pages/[locale]/home.content.ts" contentDeclarationFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const homeContent = {
+  key: "home",
+  content: {
+    title: t({
+      de: "Willkommen auf meiner Webseite",
+      en: "Welcome to My Website",
+      fr: "Bienvenue sur mon site Web",
+      es: "Bienvenido a mi sitio web",
+    }),
+    description: t({
+      de: "Beginnen Sie, indem Sie diese Seite bearbeiten.",
+      en: "Get started by editing this page.",
+      fr: "Commencez par éditer cette page.",
+      es: "Comience por editar esta página.",
+    }),
+  },
+} satisfies Dictionary;
+
+export default homeContent;
+```
+
+```javascript fileName="src/pages/[locale]/home.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const homeContent = {
+  key: "home",
+  content: {
+    getStarted: {
+      main: t({
+        de: "Beginnen Sie, indem Sie diese Seite bearbeiten.",
+        en: "Get started by editing this page.",
+        fr: "Commencez par éditer cette page.",
+        es: "Comience por editar esta página.",
+      }),
+      pageLink: "src/app/page.tsx",
+    },
+  },
+};
+
+export default homeContent;
+```
+
+```javascript fileName="src/pages/[locale]/home.content.cjs" contentDeclarationFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const homeContent = {
+  key: "home",
+  content: {
+    getStarted: {
+      main: t({
+        de: "Beginnen Sie, indem Sie diese Seite bearbeiten.",
+        fr: "Commencez par éditer cette page.",
+        es: "Comience por editar esta página.",
+      }),
+      pageLink: "src/app/page.tsx",
+    },
+  },
+};
+
+module.exports = homeContent;
+```
+
+```json fileName="src/pages/[locale]/home.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "home",
+  "content": {
+    "getStarted": {
+      "nodeType": "translation",
+      "translation": {
+        "de": "Beginnen Sie, indem Sie diese Seite bearbeiten.",
+        "en": "Get started by editing this page.",
+        "fr": "Commencez par éditer cette page.",
+        "es": "Comience por editar esta página."
+      }
+    },
+    "pageLink": {
+      "nodeType": "translation",
+      "translation": {
+        "de": "src/app/page.tsx",
+        "en": "src/app/page.tsx",
+        "fr": "src/app/page.tsx",
+        "es": "src/app/page.tsx"
+      }
+    }
+  }
+}
+```
+
+Für weitere Informationen zur Inhaltsdeklaration siehe die [Anleitung zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md).
+
+### Schritt 7: Inhalte in Ihrem Code verwenden
+
+Greifen Sie in Ihrer gesamten Anwendung auf Ihre Inhaltswörterbücher zu, um übersetzte Inhalte anzuzeigen.
+
+```tsx {2,6} fileName="src/pages/[locale]/index.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+import { ComponentExample } from "@components/ComponentExample";
+
+const HomePage: FC = () => {
+  const content = useIntlayer("home");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+      <ComponentExample />
+      {/* Zusätzliche Komponenten */}
+    </div>
+  );
+};
+
+// ... Rest des Codes, einschließlich getStaticPaths und getStaticProps
+
+export default HomePage;
+```
+
+```jsx {1,5} fileName="src/pages/[locale]/index.mjx" codeFormat="esm"
+import { useIntlayer } from "next-intlayer";
+import { ComponentExample } from "@components/ComponentExample";
+
+const HomePage = () => {
+  const content = useIntlayer("home");
+
+  return (
+    <div>
+      <h1>{content.getStarted.main}</h1>
+      <code>{content.getStarted.pageLink}</code>
+
+      <ComponentExample />
+      {/* Zusätzliche Komponenten */}
+    </div>
+  );
+};
+
+// ... Restlicher Code, einschließlich getStaticPaths und getStaticProps
+
+export default HomePage;
+```
+
+```jsx {1,5} fileName="src/pages/[locale]/index.csx" codeFormat="commonjs"
+const { useIntlayer } = require("next-intlayer");
+const { ComponentExample } = require("@components/ComponentExample");
+
+const HomePage = () => {
+  const content = useIntlayer("home");
+
+  return (
+    <div>
+      <h1>{content.getStarted.main}</h1>
+      <code>{content.getStarted.pageLink}</code>
+
+      <ComponentExample />
+      {/* Zusätzliche Komponenten */}
+    </div>
+  );
+};
+
+tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+export const ComponentExample: FC = () => {
+  const content = useIntlayer("component-example"); // Stellen Sie sicher, dass Sie eine entsprechende Inhaltsdeklaration haben
+
+  return (
+    <div>
+      <h2>{content.title}</h2>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.mjx" codeFormat="esm"
+import { useIntlayer } from "next-intlayer";
+
+const ComponentExample = () => {
+  const content = useIntlayer("component-example"); // Stellen Sie sicher, dass Sie eine entsprechende Inhaltsdeklaration haben
+
+  return (
+    <div>
+      <h2>{content.title}</h2>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.csx" codeFormat="commonjs"
+const { useIntlayer } = require("next-intlayer");
+
+const ComponentExample = () => {
+  const content = useIntlayer("component-example"); // Stellen Sie sicher, dass Sie eine entsprechende Inhaltsdeklaration haben
+
+  return (
+    <div>
+      <h2>{content.title}</h2>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+> Wenn Sie Übersetzungen in `string`-Attributen verwenden (z. B. `alt`, `title`, `href`, `aria-label`), rufen Sie
+
+> den Wert der Funktion wie folgt auf:
+
+> ```jsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> ```
+
+> Um mehr über den `useIntlayer` Hook zu erfahren, lesen Sie die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/next-intlayer/useIntlayer.md).
+
+### (Optional) Schritt 8: Internationalisierung Ihrer Metadaten
+
+Falls Sie Ihre Metadaten, wie z.B. den Titel Ihrer Seite, internationalisieren möchten, können Sie die von Next.js Page Router bereitgestellte Funktion `getStaticProps` verwenden. Innerhalb dieser Funktion können Sie den Inhalt mit der Funktion `getIntlayer` abrufen, um Ihre Metadaten zu übersetzen.
+
+```typescript fileName="src/pages/[locale]/metadata.content.ts" contentDeclarationFormat="typescript"
+import { type Dictionary, t } from "intlayer";
+import { type Metadata } from "next";
+
+const metadataContent = {
+  key: "page-metadata",
+  content: {
+    title: t({
+      en: "Create Next App",
+      fr: "Créer une application Next.js",
+      es: "Crear una aplicación Next.js",
+    }),
+    description: t({
+      en: "Generated by create next app",
+      fr: "Généré par create next app",
+      es: "Generado por create next app",
+    }),
+  },
+} satisfies Dictionary<Metadata>;
+
+export default metadataContent;
+```
+
+```javascript fileName="src/pages/[locale]/metadata.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary<import('next').Metadata>} */
+const metadataContent = {
+  key: "page-metadata",
+  content: {
+    title: t({
+      en: "Create Next App",
+      fr: "Créer une application Next.js",
+      es: "Crear una aplicación Next.js",
+    }),
+    description: t({
+      en: "Generated by create next app",
+      fr: "Généré par create next app",
+      es: "Generado por create next app",
+    }),
+  },
+};
+
+export default metadataContent;
+```
+
+```javascript fileName="src/pages/[locale]/metadata.content.cjs" contentDeclarationFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary<import('next').Metadata>} */
+const metadataContent = {
+  key: "page-metadata",
+  content: {
+    title: t({
+      en: "Create Next App",
+      fr: "Créer une application Next.js",
+      es: "Crear una aplicación Next.js",
+    }),
+    description: t({
+      en: "Generated by create next app",
+      de: "Generiert durch create next app",
+      fr: "Généré par create next app",
+      es: "Generado por create next app",
+    }),
+  },
+};
+
+module.exports = metadataContent;
+```
+
+```json fileName="src/pages/[locale]/metadata.content.json" contentDeclarationFormat="json"
+{
+  "key": "page-metadata",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": {
+        "de": "Preact-Logo",
+        "en": "Preact logo",
+        "fr": "Logo Preact",
+        "es": "Logo Preact"
+      }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "de": "Erstellt mit create next app",
+        "en": "Generated by create next app",
+        "fr": "Généré par create next app",
+        "es": "Generado por create next app"
+      }
+    }
+  }
+}
+```
+
+````tsx fileName="src/pages/[locale]/index.tsx" codeFormat="typescript"
+import { GetStaticPaths, GetStaticProps } from "next";
+import { getIntlayer, getMultilingualUrls } from "intlayer";
+import { useIntlayer } from "next-intlayer";
+import Head from "next/head";
+import type { FC } from "react";
+
+interface HomePageProps {
+  locale: string;
+  metadata: {
+    title: string;
+    description: string;
+  };
+  multilingualUrls: Record<string, string>;
+}
+
+const HomePage: FC<HomePageProps> = ({
+  metadata,
+  multilingualUrls,
+  locale,
+}) => {
+  const content = useIntlayer("page");
+
+  return (
+    <div>
+      <Head>
+        <title>{metadata.title}</title>
+        <meta name="description" content={metadata.description} />
+        {/* Generiere hreflang-Tags für SEO */}
+        {Object.entries(multilingualUrls).map(([lang, url]) => (
+          <link key={lang} rel="alternate" hrefLang={lang} href={url} />
+        ))}
+        <link rel="canonical" href={multilingualUrls[locale]} />
+      </Head>
+
+      {/* Seiteninhalt */}
+      <main>{/* Ihr Seiteninhalt hier */}</main>
+    </div>
+  );
+};
+
+export const getStaticProps: GetStaticProps<HomePageProps> = async ({
+  params,
+}) => {
+  const locale = params?.locale as string;
+
+  const metadata = getIntlayer("page-metadata", locale);
+
+  /**
+   * Generiert ein Objekt, das alle URLs für jede Locale enthält.
+   *
+   * Beispiel:
+   * ```ts
+   *  getMultilingualUrls('/about');
+   *
+   *  // Gibt zurück
+   *  // {
+   *  //   en: '/about',
+   *  //   fr: '/fr/about',
+   *  //   es: '/es/about',
+   *  // }
+   * ```
+   */
+  const multilingualUrls = getMultilingualUrls("/");
+
+  return {
+    props: {
+      locale,
+      metadata,
+      multilingualUrls,
+    },
+  };
+};
+
+export default HomePage;
+
+// ... Rest des Codes einschließlich getStaticPaths
+````
+
+````jsx fileName="src/pages/[locale]/index.mjx" codeFormat="esm"
+import { getIntlayer, getMultilingualUrls } from "intlayer";
+import { useIntlayer } from "next-intlayer";
+import Head from "next/head";
+
+const HomePage = ({ metadata, multilingualUrls, locale }) => {
+  const content = useIntlayer("page");
+
+  return (
+    <div>
+      <Head>
+        <title>{metadata.title}</title>
+        <meta name="description" content={metadata.description} />
+        {/* Generiere hreflang-Tags für SEO */}
+        {Object.entries(multilingualUrls).map(([lang, url]) => (
+          <link key={lang} rel="alternate" hrefLang={lang} href={url} />
+        ))}
+        <link rel="canonical" href={multilingualUrls[locale]} />
+      </Head>
+
+      {/* Seiteninhalt */}
+      <main>{/* Dein Seiteninhalt hier */}</main>
+    </div>
+  );
+};
+
+export const getStaticProps = async ({ params }) => {
+  const locale = params?.locale;
+
+  const metadata = getIntlayer("page-metadata", locale);
+
+  /**
+   * Generiert ein Objekt, das alle URLs für jede Locale enthält.
+   *
+   * Beispiel:
+   * ```ts
+   *  getMultilingualUrls('/about');
+   *
+   *  // Gibt zurück
+   *  // {
+   *  //   en: '/about',
+   *  //   fr: '/fr/about',
+   *  //   es: '/es/about',
+   *  // }
+   * ```
+   */
+  const multilingualUrls = getMultilingualUrls("/");
+
+  return {
+    props: {
+      locale,
+      metadata,
+      multilingualUrls,
+    },
+  };
+};
+
+export default HomePage;
+
+// ... Rest des Codes einschließlich getStaticPaths
+````
+
+````jsx fileName="src/pages/[locale]/index.csx" codeFormat="commonjs"
+const { getIntlayer, getMultilingualUrls } = require("intlayer");
+const { useIntlayer } = require("next-intlayer");
+const Head = require("next/head");
+
+const HomePage = ({ metadata, multilingualUrls, locale }) => {
+  const content = useIntlayer("page");
+
+  return (
+    <div>
+      <Head>
+        <title>{metadata.title}</title>
+        <meta name="description" content={metadata.description} />
+        {/* Erzeugt hreflang-Tags für SEO */}
+        {Object.entries(multilingualUrls).map(([lang, url]) => (
+          <link key={lang} rel="alternate" hrefLang={lang} href={url} />
+        ))}
+        <link rel="canonical" href={multilingualUrls[locale]} />
+      </Head>
+
+      {/* Seiteninhalt */}
+      <main>{/* Ihr Seiteninhalt hier */}</main>
+    </div>
+  );
+};
+
+const getStaticProps = async ({ params }) => {
+  const locale = params?.locale;
+
+  const metadata = getIntlayer("page-metadata", locale);
+
+  /**
+   * Generiert ein Objekt, das alle URLs für jede Locale enthält.
+   *
+   * Beispiel:
+   * ```ts
+   *  getMultilingualUrls('/about');
+   *
+   *  // Gibt zurück
+   *  // {
+   *  //   en: '/about',
+   *  //   fr: '/fr/about',
+   *  //   es: '/es/about',
+   *  // }
+   * ```
+   */
+  const multilingualUrls = getMultilingualUrls("/");
+
+  return {
+    props: {
+      locale,
+      metadata,
+      multilingualUrls,
+    },
+  };
+};
+
+module.exports = {
+  getStaticProps,
+  getStaticPaths,
+  default: HomePage,
+};
+
+// ... Rest des Codes einschließlich getStaticPaths
+````
+
+> Beachten Sie, dass die `getIntlayer`-Funktion, die aus `next-intlayer` importiert wird, Ihren Inhalt in einem `IntlayerNode` kapselt, was die Integration mit dem visuellen Editor ermöglicht. Im Gegensatz dazu gibt die aus `intlayer` importierte `getIntlayer`-Funktion Ihren Inhalt direkt ohne zusätzliche Eigenschaften zurück.
+
+Alternativ können Sie die Funktion `getTranslation` verwenden, um Ihre Metadaten zu deklarieren. Es wird jedoch empfohlen, Inhaltsdeklarationsdateien zu verwenden, um die Übersetzung Ihrer Metadaten zu automatisieren und den Inhalt irgendwann zu externalisieren.
+
+```tsx fileName="src/pages/[locale]/index.tsx" codeFormat="typescript"
+import { GetStaticPaths, GetStaticProps } from "next";
+import {
+  type IConfigLocales,
+  getTranslation,
+  getMultilingualUrls,
+} from "intlayer";
+import { useIntlayer } from "next-intlayer";
+import Head from "next/head";
+import type { FC } from "react";
+
+interface HomePageProps {
+  locale: string;
+  metadata: {
+    title: string;
+    description: string;
+  };
+  multilingualUrls: Record<string, string>;
+}
+
+const HomePage: FC<HomePageProps> = ({ metadata, multilingualUrls, locale }) => {
+  const content = useIntlayer("page");
+
+  return (
+    <div>
+      <Head>
+        <title>{metadata.title}</title>
+        <meta name="description" content={metadata.description} />
+        {/* Generiere hreflang-Tags für SEO */}
+        {Object.entries(multilingualUrls).map(([lang, url]) => (
+          <link
+            key={lang}
+            rel="alternate"
+            hrefLang={lang}
+            href={url}
+          />
+        ))}
+        <link rel="canonical" href={multilingualUrls[locale]} />
+      </Head>
+
+      {/* Seiteninhalt */}
+      <main>
+        {/* Ihr Seiteninhalt hier */}
+      </main>
+    </div>
+  );
+};
+
+export const getStaticProps: GetStaticProps<HomePageProps> = async ({
+  params
+}) => {
+  const locale = params?.locale as string;
+  const t = <T>(content: IConfigLocales<T>) => getTranslation(content, locale);
+
+  const metadata = {
+    title: t<string>({
+      en: "My title",
+      fr: "Mon titre",
+      es: "Mi título",
+    }),
+    description: t({
+      en: "My description",
+      fr: "Ma description",
+      es: "Mi descripción",
+    }),
+  };
+
+  const multilingualUrls = getMultilingualUrls("/");
+
+  return {
+    props: {
+      locale,
+      metadata,
+      multilingualUrls,
+    },
+  };
+};
+
+export default HomePage;
+
+// ... Rest des Codes einschließlich getStaticPaths
+```
+
+```jsx fileName="src/pages/[locale]/index.mjx" codeFormat="esm"
+import { getTranslation, getMultilingualUrls } from "intlayer";
+import { useIntlayer } from "next-intlayer";
+import Head from "next/head";
+
+const HomePage = ({ metadata, multilingualUrls, locale }) => {
+  const content = useIntlayer("page");
+
+  return (
+    <div>
+      <Head>
+        <title>{metadata.title}</title>
+        <meta name="description" content={metadata.description} />
+        {/* Generiere hreflang-Tags für SEO */}
+        {Object.entries(multilingualUrls).map(([lang, url]) => (
+          <link key={lang} rel="alternate" hrefLang={lang} href={url} />
+        ))}
+        <link rel="canonical" href={multilingualUrls[locale]} />
+      </Head>
+
+      {/* Seiteninhalt */}
+      <main>{/* Ihr Seiteninhalt hier */}</main>
+    </div>
+  );
+};
+
+export const getStaticProps = async ({ params }) => {
+  const locale = params?.locale;
+  const t = (content) => getTranslation(content, locale);
+
+  const metadata = {
+    title: t({
+      en: "My title",
+      fr: "Mon titre",
+      es: "Mi título",
+    }),
+    description: t({
+      en: "My description",
+      fr: "Ma description",
+      es: "Mi descripción",
+    }),
+  };
+
+  const multilingualUrls = getMultilingualUrls("/");
+
+  return {
+    props: {
+      locale,
+      metadata,
+      multilingualUrls,
+    },
+  };
+};
+
+export default HomePage;
+
+// ... Rest des Codes einschließlich getStaticPaths
+```
+
+```jsx fileName="src/pages/[locale]/index.csx" codeFormat="commonjs"
+const { getTranslation, getMultilingualUrls } = require("intlayer");
+const { useIntlayer } = require("next-intlayer");
+const Head = require("next/head");
+
+const HomePage = ({ metadata, multilingualUrls, locale }) => {
+  const content = useIntlayer("page");
+
+  return (
+    <div>
+      <Head>
+        <title>{metadata.title}</title>
+        <meta name="description" content={metadata.description} />
+        {/* Generiere hreflang-Tags für SEO */}
+        {Object.entries(multilingualUrls).map(([lang, url]) => (
+          <link key={lang} rel="alternate" hrefLang={lang} href={url} />
+        ))}
+        <link rel="canonical" href={multilingualUrls[locale]} />
+      </Head>
+
+      {/* Seiteninhalt */}
+      <main>{/* Dein Seiteninhalt hier */}</main>
+    </div>
+  );
+};
+
+const getStaticProps = async ({ params }) => {
+  const locale = params?.locale;
+  const t = (content) => getTranslation(content, locale);
+
+  const metadata = {
+    title: t({
+      en: "My title",
+      fr: "Mon titre",
+      es: "Mi título",
+    }),
+    description: t({
+      en: "My description",
+      fr: "Ma description",
+      es: "Mi descripción",
+    }),
+  };
+
+  const multilingualUrls = getMultilingualUrls("/");
+
+  return {
+    props: {
+      locale,
+      metadata,
+      multilingualUrls,
+    },
+  };
+};
+
+module.exports = {
+  getStaticProps,
+  getStaticPaths,
+  default: HomePage,
+};
+
+// ... Rest des Codes einschließlich getStaticPaths
+```
+
+> Erfahren Sie mehr über die Optimierung von Metadaten [in der offiziellen Next.js-Dokumentation](https://nextjs.org/docs/pages/building-your-application/optimizing/metadata).
+
+### (Optional) Schritt 9: Ändern Sie die Sprache Ihres Inhalts
+
+Um die Sprache Ihres Inhalts in Next.js zu ändern, wird empfohlen, die `Link`-Komponente zu verwenden, um Benutzer zur entsprechenden lokalisierten Seite weiterzuleiten. Die `Link`-Komponente ermöglicht das Vorladen der Seite, was hilft, ein vollständiges Neuladen der Seite zu vermeiden.
+
+```tsx fileName="src/components/LanguageSwitcher.tsx" codeFormat="typescript"
+import {
+  Locales,
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+} from "intlayer";
+import { useLocalePageRouter } from "next-intlayer";
+import { type FC } from "react";
+import Link from "next/link";
+
+const LocaleSwitcher: FC = () => {
+  const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
+  const { setLocaleCookie } = useLocaleCookie();
+
+  return (
+    <div>
+      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>
+      <div id="localePopover" popover="auto">
+        {availableLocales.map((localeItem) => (
+          <Link
+            href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+            hrefLang={localeItem}
+            key={localeItem}
+            aria-current={locale === localeItem ? "page" : undefined}
+            onClick={() => setLocaleCookie(localeItem)}
+          >
+            <span>
+              {/* Gebietsschema - z.B. FR */}
+              {localeItem}
+            </span>
+            <span>
+              {/* Sprache im eigenen Gebietsschema - z.B. Français */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* Sprache in der aktuellen Locale - z.B. Francés mit aktueller Locale auf Locales.SPANISH gesetzt */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* Sprache auf Englisch - z.B. French */}
+              {getLocaleName(localeItem, Locales.ENGLISH)}
+            </span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/LanguageSwitcher.msx" codeFormat="esm"
+import {
+  Locales,
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+} from "intlayer";
+import { useLocalePageRouter } from "next-intlayer";
+import Link from "next/link";
+
+const LocaleSwitcher = () => {
+  const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
+  const { setLocaleCookie } = useLocaleCookie();
+
+  return (
+    <div>
+      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>
+      <div id="localePopover" popover="auto">
+        {availableLocales.map((localeItem) => (
+          <Link
+            href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+            hrefLang={localeItem}
+            key={localeItem}
+            aria-current={locale === localeItem ? "page" : undefined}
+            onClick={() => setLocaleCookie(localeItem)}
+          >
+            <span>
+              {/* Gebietsschema - z.B. FR */}
+              {localeItem}
+            </span>
+            <span>
+              {/* Sprache in ihrer eigenen Locale - z.B. Français */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* Sprache in der aktuellen Locale - z.B. Francés mit aktueller Locale auf Locales.SPANISH gesetzt */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* Sprache auf Englisch - z.B. French */}
+              {getLocaleName(localeItem, Locales.ENGLISH)}
+            </span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/LanguageSwitcher.msx" codeFormat="commonjs"
+const {
+  Locales,
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+} = require("intlayer");
+const { useLocalePageRouter } = require("next-intlayer");
+const Link = require("next/link");
+
+const LocaleSwitcher = () => {
+  const { locale, pathWithoutLocale, availableLocales } = useLocalePageRouter();
+  const { setLocaleCookie } = useLocaleCookie();
+
+  return (
+    <select>
+      {availableLocales.map((localeItem) => (
+        <option value={localeItem} key={localeItem}>
+          <Link
+            href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+            hrefLang={localeItem}
+            aria-current={locale === localeItem ? "page" : undefined}
+            onClick={() => setLocaleCookie(localeItem)}
+          >
+            <span>
+              {/* Gebietsschema - z.B. FR */}
+              {localeItem}
+            </span>
+            <span>
+              {/* Sprache in ihrer eigenen Lokalisierung - z.B. Français */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* Sprache in der aktuellen Lokalisierung - z.B. Francés, wenn die aktuelle Lokalisierung auf Locales.SPANISH gesetzt ist */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* Sprache auf Englisch - z.B. French */}
+              {getLocaleName(localeItem, Locales.ENGLISH)}
+            </span>
+          </Link>
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+> Eine alternative Möglichkeit ist die Verwendung der `setLocale`-Funktion, die vom `useLocale`-Hook bereitgestellt wird. Diese Funktion erlaubt kein Vorladen der Seite und lädt die Seite neu.
+
+> In diesem Fall wird ohne Weiterleitung mittels `router.push` nur Ihr serverseitiger Code die Sprache des Inhalts ändern.
+
+```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useLocale } from "next-intlayer";
+import { getLocalizedUrl } from "intlayer";
+
+// ... Rest des Codes
+
+const router = useRouter();
+const { setLocale } = useLocale({
+  onLocaleChange: (locale) => {
+    router.push(getLocalizedUrl(pathWithoutLocale, locale));
+  },
+});
+
+return (
+  <button onClick={() => setLocale(Locales.FRENCH)}>
+    Wechsel zu Französisch
+  </button>
+);
+```
+
+> Die `useLocalePageRouter` API ist dieselbe wie `useLocale`. Um mehr über den `useLocale` Hook zu erfahren, siehe die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/next-intlayer/useLocale.md).
+
+> Dokumentationsverweise:
+>
+> - [`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)
+> - [`hrefLang` Attribut](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
+> - [`lang` Attribut](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
+> - [`dir` Attribut](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
+> - [`aria-current` Attribut](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
+
+### (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.
+
+Dieses Verhalten ist aus mehreren Gründen nützlich:
+
+- **SEO und Benutzererfahrung**: Lokalisierte URLs helfen Suchmaschinen, sprachspezifische Seiten korrekt zu indexieren, und bieten Benutzern 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 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 die Implementierung einer lokalisierten `Link`-Komponente in TypeScript:
+
+```tsx fileName="src/components/Link.tsx" codeFormat="typescript"
+"use client";
+
+import { getLocalizedUrl } from "intlayer";
+import NextLink, { type LinkProps as NextLinkProps } from "next/link";
+import { useLocale } from "next-intlayer";
+import { forwardRef, PropsWithChildren, type ForwardedRef } from "react";
+
+/**
+ * Hilfsfunktion, um zu prüfen, ob eine gegebene URL extern ist.
+ * 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).
+ * Dies stellt sicher, dass die Navigation im gleichen Locale-Kontext bleibt.
+ */
+export const Link = forwardRef<
+  HTMLAnchorElement,
+  PropsWithChildren<NextLinkProps>
+>(({ href, children, ...props }, ref: ForwardedRef<HTMLAnchorElement>) => {
+  const { locale } = useLocale();
+  const isExternalLink = checkIsExternalLink(href.toString());
+
+  // Wenn der Link intern ist und eine gültige href vorhanden ist, wird die lokalisierte URL abgerufen.
+  const hrefI18n: NextLinkProps["href"] =
+    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
+
+  return (
+    <NextLink href={hrefI18n} ref={ref} {...props}>
+      {children}
+    </NextLink>
+  );
+});
+
+Link.displayName = "Link";
+```
+
+```jsx fileName="src/components/Link.mjx" codeFormat="esm"
+'use client';
+
+import { getLocalizedUrl } from 'intlayer';
+import NextLink, { type LinkProps as NextLinkProps } from 'next/link';
+import { useLocale } from 'next-intlayer';
+import { forwardRef, PropsWithChildren, type ForwardedRef } from 'react';
+
+/**
+ * Hilfsfunktion, um zu prüfen, ob eine gegebene URL extern ist.
+ * Wenn die URL mit http:// oder https:// beginnt, wird sie als extern betrachtet.
+ */
+export const checkIsExternalLink = (href) =>
+  /^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).
+ * 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.toString());
+
+  // Wenn der Link intern ist und eine gültige href angegeben ist, wird die lokalisierte URL ermittelt.
+  const hrefI18n =
+    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
+
+  return (
+    <NextLink href={hrefI18n} ref={ref} {...props}>
+      {children}
+    </NextLink>
+  );
+});
+
+Link.displayName = 'Link';
+```
+
+```jsx fileName="src/components/Link.csx" codeFormat="commonjs"
+'use client';
+
+const { getLocalizedUrl } = require("intlayer");
+const NextLink = require("next/link");
+const { useLocale } = require("next-intlayer");
+const { forwardRef } = require("react");
+
+/**
+ * Hilfsfunktion, um zu prüfen, ob eine gegebene URL extern ist.
+ * Wenn die URL mit http:// oder https:// beginnt, wird sie als extern betrachtet.
+ */
+const checkIsExternalLink = (href) =>
+  /^https?:\/\//.test(href ?? '');
+
+
+const Link = forwardRef(({ href, children, ...props }, ref) => {
+  const { locale } = useLocale();
+  const isExternalLink = checkIsExternalLink(href.toString());
+
+  // Wenn der Link intern ist und eine gültige href angegeben ist, wird die lokalisierte URL abgerufen.
+  const hrefI18n: NextLinkProps['href'] =
+    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
+
+  return (
+    <NextLink href={hrefI18n} ref={ref} {...props}>
+      {children}
+    </NextLink>
+  );
+});
+
+Link.displayName = 'Link';
+```
+
+#### Funktionsweise
+
+- **Erkennung externer Links**:  
+  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 `useLocale` Hook liefert die aktuelle Locale (z. B. `fr` für Französisch).
+
+- **Lokalisierung der URL**:  
+  Für interne Links (d. h. nicht-externe) wird `getLocalizedUrl` verwendet, um die URL automatisch mit der aktuellen Locale zu versehen. Das bedeutet, wenn Ihr Benutzer Französisch eingestellt hat, wird beim Übergeben von `/about` als `href` daraus `/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 Locale erfolgt.
+
+Durch die Integration dieser `Link`-Komponente in Ihre Anwendung gewährleisten Sie eine kohärente und sprachbewusste Benutzererfahrung und profitieren gleichzeitig von verbesserter SEO und Benutzerfreundlichkeit.
+
+### (Optional) Schritt 11: Optimieren Sie Ihre Bundle-Größe
+
+Beim Einsatz von `next-intlayer` werden standardmäßig Wörterbücher in das Bundle jeder Seite aufgenommen. Um die Bundle-Größe zu optimieren, stellt Intlayer ein optionales SWC-Plugin bereit, das `useIntlayer`-Aufrufe mithilfe von Makros intelligent ersetzt. Dadurch werden Wörterbücher nur in die Bundles der Seiten aufgenommen, die sie tatsächlich verwenden.
+
+Um diese Optimierung zu aktivieren, installieren Sie das Paket `@intlayer/swc`. Nach der Installation erkennt `next-intlayer` das Plugin automatisch und verwendet es:
+
+```bash packageManager="npm"
+npm install @intlayer/swc --save-dev
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/swc --save-dev
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/swc --save-dev
+```
+
+> Hinweis: Diese Optimierung ist nur für Next.js 13 und höher verfügbar.
+
+> Hinweis: Dieses Paket wird standardmäßig nicht installiert, da SWC-Plugins in Next.js noch experimentell sind. Dies kann sich in Zukunft ändern.
+
+### TypeScript konfigurieren
+
+Intlayer verwendet Modulaugmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
+
+![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+
+![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+
+Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Ihre bestehenden TypeScript-Konfigurationen
+  "include": [
+    // ... Ihre bestehenden TypeScript-Konfigurationen
+    ".intlayer/**/*.ts", // Einschluss der automatisch generierten Typen
+  ],
+}
+```
+
+### Git-Konfiguration
+
+Um Ihr Repository sauber zu halten und zu vermeiden, dass generierte Dateien committet werden, wird empfohlen, von Intlayer erstellte Dateien zu ignorieren.
+
+Fügen Sie die folgenden Zeilen zu Ihrer `.gitignore`-Datei hinzu:
+
+```plaintext fileName=".gitignore"
+# Ignoriere die von Intlayer generierten Dateien
+.intlayer
+```
+
+### VS Code Erweiterung
+
+Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle **Intlayer VS Code Erweiterung** installieren.
+
+[Installation aus dem VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+Diese Erweiterung bietet:
+
+- **Autovervollständigung** für Übersetzungsschlüssel.
+- **Echtzeit-Fehlererkennung** für fehlende Übersetzungen.
+- **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).
+
+## Zusätzliche Ressourcen
+
+- **Intlayer Dokumentation:** [GitHub Repository](https://github.com/aymericzip/intlayer)
+- **Wörterbuch-Anleitung:** [Wörterbuch](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md)
+- **Konfigurationsdokumentation:** [Konfigurationsanleitung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md)
+
+Indem Sie dieser Anleitung folgen, können Sie Intlayer effektiv in Ihre Next.js-Anwendung mit dem Page Router integrieren und so eine robuste und skalierbare Internationalisierungsunterstützung für Ihre Webprojekte ermöglichen.
+
+### Weiterführende Schritte
+
+Um weiterzugehen, können Sie den [visuellen Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md) implementieren oder Ihre Inhalte mithilfe des [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md) auslagern.
+
+## Dokumentationshistorie
+
+- 5.5.10 - 2025-06-29: Historie initialisiert