@intlayer/docs 9.4.4 → 9.5.0

package/blog/de/i18n_using_next-i18next.md

@@ -73,8 +73,6 @@ Bevor wir in die Implementierung einsteigen, hier einige Praktiken, die Sie befo
 
 > Siehe unsere Dokumentation, die alles auflistet, was Sie über Internationalisierung und SEO wissen müssen: [Internationalisierung (i18n) mit next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/internationalization_and_SEO.md).
 
----
-
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von i18next in einer Next.js-Anwendung
 
 <iframe
@@ -121,7 +119,6 @@ Hier ist die Projektstruktur, die wir erstellen werden:
 ```
 
 <Steps>
-
 <Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete mit npm:
@@ -143,7 +140,6 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **i18next-resources-to-backend**: Ein Plugin, das das dynamische Laden von Übersetzungsdateien ermöglicht, sodass Sie nur die benötigten Namespaces laden können.
 
 </Step>
-
 <Step number={2} title="Konfigurieren Sie Ihr Projekt">
 
 Erstellen Sie eine Konfigurationsdatei, um Ihre unterstützten Sprachen, die Standardsprache und Hilfsfunktionen für die URL-Lokalisierung zu definieren. Diese Datei dient als einzige Quelle der Wahrheit für Ihre i18n-Einrichtung und gewährleistet Typensicherheit in Ihrer gesamten Anwendung.
@@ -198,7 +194,6 @@ export function getCookie(locale: Locale) {
 ```
 
 </Step>
-
 <Step number={3} title="Übersetzungs-Namespaces zentralisieren">
 
 Erstellen Sie eine einzige Quelle der Wahrheit für jeden Namespace, den Ihre Anwendung bereitstellt. Die Wiederverwendung dieser Liste hält Server-, Client- und Tooling-Code synchron und ermöglicht eine starke Typisierung für Übersetzungshilfen.
@@ -210,7 +205,6 @@ export type Namespace = (typeof namespaces)[number];
 ```
 
 </Step>
-
 <Step number={4} title="Starke Typisierung der Übersetzungsschlüssel mit TypeScript">
 
 Erweitern Sie `i18next`, um auf Ihre kanonischen Sprachdateien (normalerweise Englisch) zu verweisen. TypeScript leitet dann gültige Schlüssel pro Namespace ab, sodass Aufrufe von `t()` durchgängig überprüft werden.
@@ -250,7 +244,6 @@ export type AboutTranslator = TFunction<"about">;
 ```
 
 </Step>
-
 <Step number={5} title="Serverseitige i18n-Initialisierung einrichten">
 
 Erstellen Sie eine serverseitige Initialisierungsfunktion, die Übersetzungen für Server-Komponenten lädt. Diese Funktion erstellt eine separate i18next-Instanz für das serverseitige Rendering und stellt sicher, dass die Übersetzungen vor dem Rendern geladen werden.
@@ -307,7 +300,6 @@ export async function initI18next(
 ```
 
 </Step>
-
 <Step number={6} title="Erstellen des Client-seitigen i18n Providers">
 
 Erstellen Sie einen Client-Komponenten-Provider, der Ihre Anwendung mit dem i18next-Kontext umschließt. Dieser Provider erhält vorab geladene Übersetzungen vom Server, um ein Aufblitzen nicht übersetzter Inhalte (FOUC) zu verhindern und doppelte Abrufe zu vermeiden.
@@ -392,7 +384,6 @@ export default function I18nProvider({
 ```
 
 </Step>
-
 <Step number={7} title="Definieren dynamischer Locale-Routen">
 
 Richte dynamisches Routing für Locales ein, indem du im App-Ordner ein Verzeichnis `[locale]` erstellst. Dadurch kann Next.js locale-basiertes Routing handhaben, bei dem jede Locale ein URL-Segment wird (z. B. `/en/about`, `/fr/about`).
@@ -446,7 +437,6 @@ export default function LocaleLayout({
 ```
 
 </Step>
-
 <Step number={8} title="Erstellen Sie Ihre Übersetzungsdateien">
 
 Erstellen Sie JSON-Dateien für jede Locale und jeden Namespace. Diese Struktur ermöglicht es Ihnen, Übersetzungen logisch zu organisieren und nur das zu laden, was Sie für jede Seite benötigen.
@@ -541,7 +531,6 @@ Die Organisation der Übersetzungen nach Namespace (z. B. `common.json`, `about.
 </Tabs>
 
 </Step>
-
 <Step number={9} title="Übersetzungen in Ihren Seiten verwenden">
 
 Erstellen Sie eine Seitenkomponente, die i18next auf dem Server initialisiert und Übersetzungen sowohl an Server- als auch an Client-Komponenten übergibt. Dies stellt sicher, dass Übersetzungen vor dem Rendern geladen werden und verhindert das Aufblitzen von Inhalten.
@@ -603,7 +592,6 @@ export default async function AboutPage({
 ```
 
 </Step>
-
 <Step number={10} title="Übersetzungen in Client-Komponenten verwenden">
 
 Client-Komponenten können den `useTranslation` Hook verwenden, um auf Übersetzungen zuzugreifen. Dieser Hook bietet Zugriff auf die Übersetzungsfunktion und die i18n-Instanz, wodurch Sie Inhalte übersetzen und auf Locale-Informationen zugreifen können.
@@ -656,7 +644,6 @@ export default ClientComponent;
 ```
 
 </Step>
-
 <Step number={11} title="Übersetzungen in Server-Komponenten verwenden">
 
 Server-Komponenten können keine React-Hooks verwenden, daher erhalten sie Übersetzungen über Props von ihren übergeordneten Komponenten. Dieser Ansatz hält Server-Komponenten synchron und ermöglicht es, sie innerhalb von Client-Komponenten zu verschachteln.
@@ -704,7 +691,6 @@ export default ServerComponent;
 ```
 
 </Step>
-
 <Step number={12} title="Ändern Sie die Sprache Ihres Inhalts" isOptional={true}>
 
 Um die Sprache Ihres Inhalts in Next.js zu ändern, wird empfohlen, URLs mit Sprachpräfix und Next.js-Links zu verwenden. Das folgende Beispiel liest die aktuelle Sprache aus der Route aus, entfernt sie aus dem Pfadnamen und rendert einen Link pro verfügbarer Sprache.
@@ -778,7 +764,6 @@ export default function LocaleSwitcher() {
 ```
 
 </Step>
-
 <Step number={13} title="Erstellen einer lokalisierten Link-Komponente" isOptional={true}>
 
 Die Wiederverwendung lokalisierter URLs in Ihrer App sorgt für eine konsistente Navigation und ist SEO-freundlich. Verpacken Sie `next/link` in einem kleinen Helfer, der interne Routen mit der aktiven Locale voranstellt, während externe URLs unverändert bleiben.
@@ -831,7 +816,6 @@ export default function LocalizedLink({
 > Tipp: Da `LocalizedLink` ein Drop-in-Ersatz ist, migrieren Sie schrittweise, indem Sie Importe austauschen und die Komponente die sprachspezifischen URLs verwalten lassen.
 
 </Step>
-
 <Step number={14} title="Zugriff auf die aktive Locale innerhalb von Server Actions" isOptional={true}>
 
 Server Actions benötigen oft die aktuelle Locale für E-Mails, Protokollierung oder Integrationen von Drittanbietern. Kombinieren Sie das von Ihrem Proxy gesetzte Locale-Cookie mit dem `Accept-Language`-Header als Fallback.
@@ -871,7 +855,6 @@ export async function stuffFromServer(formData: FormData) {
 > Da der Helfer auf Next.js-Cookies und -Headern basiert, funktioniert er in Route Handlers, Server Actions und anderen serverseitigen Kontexten.
 
 </Step>
-
 <Step number={15} title="Internationalisieren Sie Ihre Metadaten" isOptional={true}>
 
 Die Übersetzung von Inhalten ist wichtig, aber das Hauptziel der Internationalisierung ist es, Ihre Website für die Welt sichtbarer zu machen. I18n ist ein unglaublicher Hebel, um die Sichtbarkeit Ihrer Website durch richtiges SEO zu verbessern.
@@ -940,7 +923,6 @@ export default async function AboutPage() {
 ```
 
 </Step>
-
 <Step number={16} title="Internationalisieren Sie Ihre Sitemap" isOptional={true}>
 
 Erstellen Sie eine Sitemap, die alle Lokalisierungsversionen Ihrer Seiten enthält. Dies hilft Suchmaschinen, alle Sprachversionen Ihrer Inhalte zu entdecken und zu indexieren.
@@ -996,7 +978,6 @@ export default function sitemap(): MetadataRoute.Sitemap {
 ```
 
 </Step>
-
 <Step number={17} title="Internationalisieren Sie Ihre robots.txt" isOptional={true}>
 
 Erstellen Sie eine robots.txt-Datei, die alle Sprachversionen Ihrer geschützten Routen korrekt behandelt. Dies stellt sicher, dass Suchmaschinen keine Admin- oder Dashboard-Seiten in irgendeiner Sprache indexieren.
@@ -1029,7 +1010,6 @@ export default function robots(): MetadataRoute.Robots {
 ```
 
 </Step>
-
 <Step number={18} title="Middleware für Locale Routing einrichten" isOptional={true}>
 
 Erstellen Sie einen Proxy, der automatisch die bevorzugte Sprache des Benutzers erkennt und ihn zur entsprechenden URL mit Sprachpräfix weiterleitet. Dies verbessert die Benutzererfahrung, indem Inhalte in der bevorzugten Sprache angezeigt werden.
@@ -1120,7 +1100,6 @@ export const config = {
 ```
 
 </Step>
-
 <Step number={19} title="Automatisieren Sie Ihre Übersetzungen mit Intlayer" isOptional={true}>
 
 Intlayer ist eine **kostenlose** und **Open-Source**-Bibliothek, die den Lokalisierungsprozess in Ihrer Anwendung unterstützt. Während i18next das Laden und Verwalten von Übersetzungen übernimmt, hilft Intlayer dabei, den Übersetzungsworkflow zu automatisieren.

package/blog/de/i18n_using_next-intl.md

@@ -63,8 +63,6 @@ Bevor wir mit der Implementierung beginnen, sollten Sie folgende Praktiken beach
 
 > Siehe unsere Dokumentation, die alles auflistet, was Sie über Internationalisierung und SEO wissen müssen: [Internationalisierung (i18n) mit next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/internationalization_and_SEO.md).
 
----
-
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von next-intl in einer Next.js-Anwendung
 
 <iframe
@@ -110,7 +108,6 @@ Hier ist die Projektstruktur, die wir erstellen werden:
 ```
 
 <Steps>
-
 <Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete mit npm:
@@ -130,7 +127,6 @@ yarn add next-intl
 - **next-intl**: Die zentrale Internationalisierungsbibliothek für den Next.js App Router, die Hooks, Serverfunktionen und Client-Provider zur Verwaltung von Übersetzungen bereitstellt.
 
 </Step>
-
 <Step number={2} title="Projekt konfigurieren">
 
 Erstellen Sie eine Konfigurationsdatei, die Ihre unterstützten Sprachen definiert und die next-intl-Anfragekonfiguration einrichtet. Diese Datei dient als einzige Quelle der Wahrheit für Ihre i18n-Konfiguration und gewährleistet Typensicherheit in Ihrer gesamten Anwendung.
@@ -217,7 +213,6 @@ export const proxy = createMiddleware(routingOptions);
 ```
 
 </Step>
-
 <Step number={3} title="Dynamische Locale-Routen definieren">
 
 Richten Sie die dynamische Routenführung für Sprachen ein, indem Sie im App-Ordner ein Verzeichnis `[locale]` erstellen. Dadurch kann Next.js sprachabhängige Routen verwalten, bei denen jede Sprache ein URL-Segment wird (z. B. `/en/about`, `/fr/about`).
@@ -308,7 +303,6 @@ export default async function AboutPage({
 ```
 
 </Step>
-
 <Step number={4} title="Erstellen Sie Ihre Übersetzungsdateien">
 
 Erstellen Sie JSON-Dateien für jede Locale und jeden Namespace. Diese Struktur ermöglicht es Ihnen, Übersetzungen logisch zu organisieren und nur das zu laden, was Sie für jede Seite benötigen.
@@ -370,7 +364,6 @@ Die Organisation der Übersetzungen nach Namespace (z. B. `common.json`, `about.
 </Tabs>
 
 </Step>
-
 <Step number={5} title="Übersetzungen in Ihren Seiten verwenden">
 
 Erstellen Sie eine Seitenkomponente, die Übersetzungen auf dem Server lädt und sowohl an Server- als auch an Client-Komponenten weitergibt. Dies stellt sicher, dass Übersetzungen vor dem Rendern geladen werden und verhindert das Aufblitzen von Inhalten.
@@ -423,7 +416,6 @@ export default async function AboutPage({
 ```
 
 </Step>
-
 <Step number={6} title="Übersetzungen in Client-Komponenten verwenden">
 
 Client-Komponenten können die Hooks `useTranslations` und `useFormatter` verwenden, um auf Übersetzungen und Formatierungsfunktionen zuzugreifen. Diese Hooks lesen aus dem `NextIntlClientProvider`-Kontext.
@@ -461,7 +453,6 @@ const ClientComponent = () => {
 ```
 
 </Step>
-
 <Step number={7} title="Übersetzungen in Server-Komponenten verwenden">
 
 Server-Komponenten können keine React-Hooks verwenden, daher erhalten sie Übersetzungen und Formatierer über Props von ihren übergeordneten Komponenten. Dieser Ansatz hält Server-Komponenten synchron und ermöglicht es, sie innerhalb von Client-Komponenten zu verschachteln.
@@ -495,7 +486,6 @@ const ServerComponent = ({
 > Verwenden Sie in Ihrer Seite/Layout `getTranslations` und `getFormatter` aus `next-intl/server`, um Übersetzungen und Formatierungen vorab zu berechnen und diese dann als Props an Server-Komponenten zu übergeben.
 
 </Step>
-
 <Step number={8} title="Ändern Sie die Sprache Ihres Inhalts" isOptional={true}>
 
 Um die Sprache Ihres Inhalts mit next-intl zu ändern, rendern Sie lokalisierungsbewusste Links, die auf denselben Pfadnamen zeigen, während die Locale gewechselt wird. Der Provider schreibt URLs automatisch um, sodass Sie nur die aktuelle Route anvisieren müssen.
@@ -569,7 +559,6 @@ export default function LocaleSwitcher() {
 ```
 
 </Step>
-
 <Step number={9} title="Verwenden Sie die lokalisierte Link-Komponente" isOptional={true}>
 
 `next-intl` stellt ein Unterpaket `next-intl/navigation` bereit, das eine lokalisierte Link-Komponente enthält, die automatisch die aktive Locale anwendet. Wir haben sie bereits für Sie in der Datei `@/i18n` extrahiert, sodass Sie sie wie folgt verwenden können:
@@ -581,7 +570,6 @@ return <Link href="/about">t("about.title")</Link>;
 ```
 
 </Step>
-
 <Step number={10} title="Zugriff auf die aktive Locale innerhalb von Server Actions" isOptional={true}>
 
 Server Actions können die aktuelle Locale mit `next-intl/server` auslesen. Dies ist nützlich, um lokalisierte E-Mails zu versenden oder Spracheinstellungen zusammen mit übermittelten Daten zu speichern.
@@ -606,7 +594,6 @@ export async function handleContactForm(formData: FormData) {
 > `getLocale` liest die von `next-intl` Proxy gesetzte Locale, daher funktioniert es überall auf dem Server: Route Handlers, Server Actions und Edge-Funktionen.
 
 </Step>
-
 <Step number={11} title="Internationalisieren Sie Ihre Metadaten" isOptional={true}>
 
 Das Übersetzen von Inhalten ist wichtig, aber das Hauptziel der Internationalisierung besteht darin, Ihre Website für die Welt sichtbarer zu machen. I18n ist ein unglaublicher Hebel, um die Sichtbarkeit Ihrer Website durch korrektes SEO zu verbessern.
@@ -647,7 +634,6 @@ export async function generateMetadata({
 ```
 
 </Step>
-
 <Step number={12} title="Internationalisieren Sie Ihre Sitemap" isOptional={true}>
 
 Erstellen Sie eine Sitemap, die alle Sprachversionen Ihrer Seiten enthält. Dies hilft Suchmaschinen, alle Sprachversionen Ihrer Inhalte zu entdecken und zu indexieren.
@@ -703,7 +689,6 @@ export default function sitemap(): MetadataRoute.Sitemap {
 ```
 
 </Step>
-
 <Step number={13} title="Internationalisieren Sie Ihre robots.txt" isOptional={true}>
 
 Erstellen Sie eine robots.txt-Datei, die alle Sprachversionen Ihrer geschützten Routen korrekt behandelt. Dies stellt sicher, dass Suchmaschinen keine Admin- oder Dashboard-Seiten in irgendeiner Sprache indexieren.
@@ -738,7 +723,6 @@ export default function robots(): MetadataRoute.Robots {
 ```
 
 </Step>
-
 <Step number={14} title="Proxy für Locale Routing einrichten" isOptional={true}>
 
 Erstellen Sie einen Proxy, der automatisch die bevorzugte Locale des Benutzers erkennt und ihn zur entsprechenden URL mit Locale-Präfix weiterleitet. next-intl stellt eine praktische Proxy-Funktion bereit, die dies automatisch übernimmt.
@@ -760,7 +744,6 @@ export const config = {
 ```
 
 </Step>
-
 <Step number={15} title="TypeScript-Typen für die Locale einrichten" isOptional={true}>
 
 Die Einrichtung von TypeScript hilft Ihnen, Autovervollständigung und Typsicherheit für Ihre Schlüssel zu erhalten.
@@ -788,7 +771,6 @@ declare module "next-intl" {
 Dieser Code verwendet Module Augmentation, um die locales und messages zum next-intl AppConfig-Typ hinzuzufügen.
 
 </Step>
-
 <Step number={16} title="Automatisieren Sie Ihre Übersetzungen mit Intlayer" isOptional={true}>
 
 Intlayer ist eine **kostenlose** und **Open-Source**-Bibliothek, die entwickelt wurde, um den Lokalisierungsprozess in Ihrer Anwendung zu unterstützen. Während next-intl das Laden und Verwalten der Übersetzungen übernimmt, hilft Intlayer dabei, den Übersetzungsworkflow zu automatisieren.

package/blog/de/index.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 Willkommen in unserem Blog, der sich allen Themen der **Internationalisierung** für JavaScript-Anwendungen widmet! Hier erkunden wir die besten Praktiken, Strategien und Tools, um Entwicklern zu helfen, ihre digitalen Produkte weltweit auszubauen.
 
----
-
 ## Warum Internationalisierung (i18n) wichtig ist
 
 In der heutigen vernetzten Welt erwarten Nutzer nahtlose, lokalisierte Erfahrungen. Die Internationalisierung (i18n) stellt sicher, dass Ihre Webanwendung sich an verschiedene Sprachen und kulturelle Nuancen anpassen kann. Durch die Integration von i18n-Praktiken von Anfang an, eröffnen Sie zahlreiche Vorteile, wie:
@@ -31,8 +29,6 @@ In der heutigen vernetzten Welt erwarten Nutzer nahtlose, lokalisierte Erfahrung
 3. **Verbesserte Zugänglichkeit:** Gut strukturierte i18n entspricht oft den Zugänglichkeitsstandards und macht Ihre App inklusiver.
 4. **Bessere SEO-Leistung:** Lokalisierte Inhalte können Ihre Sichtbarkeit in regionalspezifischen Suchergebnissen verbessern.
 
----
-
 ## Open-Source Internationalisierungslösungen
 
 Der Aufbau einer internationalisierten Anwendung muss nicht kompliziert sein. Die Open-Source-Community bietet viele leistungsstarke, gut unterstützte Tools und Bibliotheken, die die Lokalisierung vereinfachen. Beliebte Lösungen wie **react-intl**, **i18next** und **FormatJS** bieten flexible APIs und eine einfache Integration mit modernen JavaScript-Frameworks wie React, Vue und Angular.
@@ -43,8 +39,6 @@ Der Aufbau einer internationalisierten Anwendung muss nicht kompliziert sein. Di
 - **Kosteneinsparungen:** Keine Lizenzgebühren, was es einfacher macht, Ihre Anwendung zu testen oder zu skalieren.
 - **Community-Support:** Große Communities bedeuten oft mehr Tutorials, Dokumentation und fertige Plugins.
 
----
-
 ## Ankündigungen und Ausblick
 
 Wir freuen uns, kommende Tutorials, Best Practices und **Fallstudien** anzukündigen, wie Sie Ihre JavaScript-Anwendungen für globale Zielgruppen optimieren können. Hier ein kleiner Vorgeschmack:
@@ -55,8 +49,6 @@ Wir freuen uns, kommende Tutorials, Best Practices und **Fallstudien** anzukünd
 
 Bleiben Sie dran für diese Updates und mehr!
 
----
-
 ## Tragen Sie zu unserem Blog bei!
 
 Wir glauben an gemeinschaftlich getriebenen Wissensaustausch. Wenn Sie eine großartige Idee für einen Blogbeitrag zur Internationalisierung, **SEO** oder einem anderen relevanten Thema haben, würden wir uns freuen, von Ihnen zu hören. Sie können einen Pull Request einreichen, indem Sie Ihren vorgeschlagenen Blogbeitrag in unser GitHub-Repository hinzufügen:
@@ -65,6 +57,4 @@ Wir glauben an gemeinschaftlich getriebenen Wissensaustausch. Wenn Sie eine gro
 
 Ihre Beiträge helfen uns, diese Plattform zu bereichern und Entwickler weltweit zu unterstützen. Lassen Sie uns gemeinsam eine Community globaler Anwendungen aufbauen.
 
----
-
 **Vielen Dank fürs Lesen und willkommen in unserer i18n-Community!** Bleiben Sie dran für weitere Einblicke, Tipps und Best Practices, wie Sie Ihre JavaScript-Anwendungen international erfolgreich machen können.

package/blog/de/internationalization_and_SEO.md

@@ -21,16 +21,12 @@ author: aymericzip
 
 Möchten Sie mehr Nutzer weltweit erreichen? Ihre Website mehrsprachig zu gestalten, ist eine der besten Möglichkeiten, Ihr Publikum zu erweitern und Ihr SEO (Suchmaschinenoptimierung) zu verbessern. In diesem Blogbeitrag erläutern wir die Grundlagen des internationalen SEO, häufig als **i18n** (kurz für "Internationalisierung") bezeichnet, in klar verständlichen Begriffen. Sie erfahren, welche wichtigen Entscheidungen Sie treffen müssen, wie Sie technische Elemente wie `hreflang` verwenden und warum Werkzeuge wie **Intlayer** Ihre mehrsprachigen Next.js-Projekte vereinfachen können.
 
----
-
 ## 1. Was bedeutet es, Ihre Website mehrsprachig zu machen?
 
 Eine mehrsprachige Website bietet ihren Inhalt in mehr als einer Sprache an. Zum Beispiel könnten Sie eine englische Version (`example.com/en/`), eine französische Version (`example.com/fr/`) und eine spanische Version (`example.com/es/`) haben. Dieser Ansatz ermöglicht es Suchmaschinen, die richtige Sprachversion basierend auf den Vorlieben oder dem geografischen Standort der Nutzer anzuzeigen.
 
 Wenn Sie dies richtig machen, schaffen Sie ein benutzerfreundlicheres Erlebnis für Nicht-Englischsprachige, was zu besserem Engagement, höheren Konversionsraten und verbessertem SEO in verschiedenen Regionen führt.
 
----
-
 ## 2. Die richtige URL-Struktur wählen
 
 Wenn Sie sich entscheiden, mehrere Sprachversionen zu haben, benötigen Sie einen klaren, konsistenten Weg, um die URLs Ihrer Website zu organisieren. Jede Sprache (oder Region) sollte ihre eigene einzigartige „Adresse“ im Internet haben. Im Folgenden finden Sie drei gängige Möglichkeiten, mehrsprachige Websites zu strukturieren:
@@ -52,8 +48,6 @@ Wenn Sie sich entscheiden, mehrere Sprachversionen zu haben, benötigen Sie eine
 
 > **Tipp:** Wenn Sie eine globale Marke haben und die Dinge einfacher halten möchten, funktionieren Subverzeichnisse oft am besten. Wenn Sie nur ein oder zwei Hauptländer ansprechen und jedes wirklich betonen möchten, könnten ccTLDs der Weg sein.
 
----
-
 ## 3. Sprache gezielt ansprechen mit Hreflang
 
 ### 3.1. Was ist Hreflang?
@@ -84,8 +78,6 @@ In Ihrem HTML fügen Sie etwas wie folgendes hinzu:
 
 > **Kurze Anmerkung:** Stellen Sie sicher, dass die URLs in diesen Tags direkt auf die endgültige Seite zeigen, ohne zusätzliche Weiterleitungen.
 
----
-
 ## 4. Inhalte wirklich „lokal“ machen (nicht nur übersetzen)
 
 ### 4.1. Lokalisierung vs. Übersetzung
@@ -97,8 +89,6 @@ In Ihrem HTML fügen Sie etwas wie folgendes hinzu:
 
 Selbst bei guten Übersetzungen können Suchmaschinen Ihre Website wegen doppelter Inhalte kennzeichnen, wenn sie zu ähnlich in der Struktur erscheint. Hreflang hilft klarzustellen, dass diese Seiten keine Duplikate sind, sondern Sprachvarianten.
 
----
-
 ## 5. Technisches SEO – Must-Haves
 
 ### 5.1. Sprachdeklarationen (`lang` und `dir`)
@@ -127,8 +117,6 @@ Kanonische Tags teilen Suchmaschinen mit, welche Seite die „originale“ oder
 <link rel="canonical" href="https://example.com/fr/produits" />
 ```
 
----
-
 ## 6. On-Page SEO in mehreren Sprachen
 
 ### 6.1. Titel & Meta-Beschreibungen
@@ -145,8 +133,6 @@ Ihre Überschriften sollten die **lokalen Phrasen** oder **Keywords** jeder Regi
 - Lokalisiert den Alt-Text, Bildunterschriften und Dateinamen, falls nötig.
 - Verwenden Sie visuelle Darstellungen, die mit der Zielkultur resonieren.
 
----
-
 ## 7. Sprachwechsel & Benutzererfahrung
 
 ### 7.1. Auto-Redirect oder einen Sprachwechsler?
@@ -226,8 +212,6 @@ const LocaleSwitcher: FC = () => {
 - Speichern Sie die Sprachwahl Ihres Nutzers in einem **Cookie** oder einer **Sitzung**.
 - Bei ihrem nächsten Besuch auf Ihrer Website können Sie automatisch ihre bevorzugte Sprache laden.
 
----
-
 ## 8. Lokale Backlinks aufbauen
 
 **Backlinks** (Links von externen Seiten zu Ihrer) bleiben ein wichtiger SEO-Faktor. Wenn Sie eine mehrsprachige Seite betreiben, sollten Sie Folgendes in Betracht ziehen:
@@ -235,8 +219,6 @@ const LocaleSwitcher: FC = () => {
 - Kontaktieren Sie lokale Nachrichtenwebsites, Blogs oder Foren. Zum Beispiel kann eine `.fr`-Domain, die auf Ihr französisches Unterverzeichnis verweist, Ihr lokales französisches SEO steigern.
 - Überwachen Sie Backlinks pro Sprache, um zu sehen, welche Regionen mehr PR-/Marketingbemühungen benötigen.
 
----
-
 ## 9. Überwachung und Pflege Ihrer mehrsprachigen Website
 
 ### 9.1. Google Analytics & Search Console
@@ -249,8 +231,6 @@ const LocaleSwitcher: FC = () => {
 - Halten Sie Übersetzungen aktuell. Wenn Sie eine Produktbeschreibung auf Englisch ändern, aktualisieren Sie diese auch in Französisch, Spanisch usw.
 - Veraltete Übersetzungen können für Kunden verwirrend sein und das Vertrauen der Nutzer untergraben.
 
----
-
 ## 10. Häufige Fallstricke, die zu vermeiden sind
 
 1. **Maschinenübersetzte Inhalte**
@@ -265,14 +245,10 @@ const LocaleSwitcher: FC = () => {
 4. **Kulturelle Nuancen ignorieren**
    Ein Witz oder eine Phrase, die in einem Land funktioniert, könnte in einem anderen beleidigend oder bedeutungslos sein.
 
----
-
 ## Überprüfen Sie Ihre Website mit dem Intlayer SEO Scanner
 
 Um sicherzustellen, dass Ihre mehrsprachige App perfekt optimiert ist, empfehlen wir die Verwendung des [Intlayer SEO Scanners](https://intlayer.org/i18n-seo-scanner). Es handelt sich um ein spezielles Tool zur Überprüfung mehrsprachiger Websites, das Ihnen hilft, fehlende hreflang-Tags, defekte Links und andere SEO-Probleme auf all Ihren lokalisierten Seiten zu identifizieren.
 
----
-
 ## Zusammenfassung
 
 Ihre Website mehrsprachig zu gestalten, bedeutet mehr als nur Text zu übersetzen. Es geht darum, URLs effektiv zu strukturieren, `hreflang`-Tags zu verwenden, um Suchmaschinen zu helfen, die richtige Version auszuliefern, und ein hervorragendes Benutzererlebnis zu bieten, voll mit lokalisierten Grafiken, Sprachwechslern und konsistenten Navigationsmöglichkeiten. Wenn Sie diese bewährten Praktiken befolgen, sind Sie für den Erfolg in globalen Märkten gerüstet, steigern die Zufriedenheit der Nutzer und erzielen letztendlich bessere SEO-Ergebnisse in den verschiedenen Regionen.

package/blog/de/intlayer_with_i18next.md

@@ -64,7 +64,6 @@ Diese Anleitung zeigt Ihnen, wie Sie das überlegene Inhaltsdeklarationssystem v
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit i18next
 
 <Steps>
-
 <Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete:
@@ -111,7 +110,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Inhaltsdeklarationen in ein mit i18next kompatibles JSON-Format
 
 </Step>
-
 <Step number={2} title="Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen">
 
 Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:

package/blog/de/intlayer_with_next-i18next.md

@@ -52,12 +52,9 @@ Während Intlayer eine ausgezeichnete eigenständige i18n-Lösung bietet (siehe
 
 Dieser Leitfaden zeigt Ihnen, wie Sie das überlegene Inhaltsdeklarationssystem von Intlayer nutzen können, während Sie die Kompatibilität mit next-i18next beibehalten.
 
----
-
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit next-i18next
 
 <Steps>
-
 <Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete mit Ihrem bevorzugten Paketmanager:
@@ -104,7 +101,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin zum Synchronisieren von Intlayer-Inhaltsdeklarationen im i18next JSON-Format
 
 </Step>
-
 <Step number={2} title="Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen">
 
 Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:

package/blog/de/intlayer_with_next-intl.md

@@ -58,7 +58,6 @@ Dieser Leitfaden zeigt Ihnen, wie Sie das überlegene Content-Deklarationssystem
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit next-intl
 
 <Steps>
-
 <Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete:
@@ -105,7 +104,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Content-Deklarationen in ein mit next-intl kompatibles JSON-Format
 
 </Step>
-
 <Step number={2} title="Implementieren Sie das Intlayer-Plugin zum Verpacken des JSON">
 
 Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:
@@ -144,7 +142,6 @@ Wenn Änderungen über die CLI zur Übersetzung des JSON oder über das CMS vorg
 Für weitere Details zum `syncJSON`-Plugin siehe bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
 
 </Step>
-
 <Step number={3} title="Implementierung von JSON-Übersetzungen pro Komponente" isOptional={true}>
 
 Standardmäßig lädt, verbindet und synchronisiert Intlayer sowohl JSON- als auch Inhaltsdeklarationsdateien. Weitere Details finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine komponentenbezogene Verwaltung von JSON-Übersetzungen implementieren, die überall in Ihrem Codebasis lokalisiert sind.

package/blog/de/intlayer_with_react-i18next.md

@@ -58,7 +58,6 @@ Diese Anleitung zeigt Ihnen, wie Sie das überlegene Inhaltsdeklarationssystem v
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit react-i18next
 
 <Steps>
-
 <Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete:
@@ -105,7 +104,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Inhaltsdeklarationen in ein mit react-i18next kompatibles JSON-Format
 
 </Step>
-
 <Step number={2} title="Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen">
 
 Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:
@@ -143,7 +141,6 @@ Wenn Änderungen über die CLI zur Übersetzung des JSON oder über das CMS vorg
 Um weitere Details zum `syncJSON`-Plugin zu erfahren, lesen Sie bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
 
 </Step>
-
 <Step number={3} title="Implementierung von JSON-Übersetzungen pro Komponente" isOptional={true}>
 
 Standardmäßig lädt, kombiniert und synchronisiert Intlayer sowohl JSON- als auch Inhaltsdeklarationsdateien. Weitere Informationen finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine Verwaltung von JSON-Übersetzungen pro Komponente implementieren, die überall in Ihrem Codebasis lokalisiert sind.

package/blog/de/intlayer_with_react-intl.md

@@ -56,7 +56,6 @@ Diese Anleitung zeigt Ihnen, wie Sie das überlegene Inhaltsdeklarationssystem v
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit react-intl
 
 <Steps>
-
 <Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete:
@@ -103,7 +102,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Inhaltsdeklarationen in ein mit react-intl kompatibles JSON-Format
 
 </Step>
-
 <Step number={2} title="Implementieren Sie das Intlayer-Plugin zum Verpacken des JSON">
 
 Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:
@@ -142,7 +140,6 @@ Wenn Änderungen über die CLI zur Übersetzung des JSON vorgenommen werden oder
 Um weitere Details zum `syncJSON`-Plugin zu erfahren, lesen Sie bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
 
 </Step>
-
 <Step number={3} title="Implementierung von JSON-Übersetzungen pro Komponente" isOptional={true}>
 
 Standardmäßig lädt, kombiniert und synchronisiert Intlayer sowohl JSON- als auch Inhaltsdeklarationsdateien. Weitere Informationen finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine Verwaltung von JSON-Übersetzungen pro Komponente implementieren, die überall in Ihrem Code lokalisiert sind.

package/blog/de/intlayer_with_vue-i18n.md

@@ -53,12 +53,9 @@ Während Intlayer eine hervorragende eigenständige i18n-Lösung bietet (siehe u
 
 Diese Anleitung zeigt Ihnen, wie Sie das überlegene Content-Deklarationssystem von Intlayer nutzen können, während Sie die Kompatibilität mit vue-i18n beibehalten.
 
----
-
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit vue-i18n
 
 <Steps>
-
 <Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die erforderlichen Pakete mit Ihrem bevorzugten Paketmanager:
@@ -105,7 +102,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin zum Synchronisieren von Intlayer-Content-Deklarationen mit dem vue-i18n JSON-Format
 
 </Step>
-
 <Step number={2} title="Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen">
 
 Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen festzulegen:
@@ -144,7 +140,6 @@ Wenn Änderungen über die CLI zur Übersetzung des JSON vorgenommen werden oder
 Um weitere Details zum `syncJSON`-Plugin zu sehen, lesen Sie bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
 
 </Step>
-
 <Step number={3} title="Implementierung von komponentenbezogenen JSON-Übersetzungen" isOptional={true}>
 
 Standardmäßig lädt, kombiniert und synchronisiert Intlayer sowohl JSON- als auch Content-Deklarationsdateien. Weitere Informationen finden Sie in der [Content-Deklarationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine komponentenbezogene Verwaltung von JSON implementieren, das überall in Ihrem Code lokalisiert ist.

package/blog/de/list_i18n_technologies/frameworks/angular.md

@@ -23,16 +23,12 @@ author: aymericzip
 
 In der heutigen vernetzten Welt kann das Angebot Ihrer Website in mehreren Sprachen Ihre Reichweite erheblich erweitern und das Benutzererlebnis verbessern. Für Entwickler, die mit Angular arbeiten, ist die Implementierung von Internationalisierung (i18n) entscheidend, um Übersetzungen effizient zu verwalten und gleichzeitig die Anwendungsstruktur, SEO und Leistung zu erhalten. In diesem Artikel werden wir verschiedene i18n-Ansätze untersuchen – von den integrierten Lösungen in Angular bis hin zu beliebten Bibliotheken von Drittanbietern –, um Ihnen zu helfen, die beste Lösung für Ihr Projekt zu bestimmen.
 
----
-
 ## Was ist Internationalisierung (i18n)?
 
 Internationalisierung, oft als i18n bezeichnet, ist der Prozess, Ihre Anwendung so zu gestalten und vorzubereiten, dass sie mehrere Sprachen und kulturelle Kontexte unterstützt. In Angular bedeutet dies, Ihre App so zu konfigurieren, dass Texte, Daten, Zahlen und sogar UI-Layouts sich nahtlos an verschiedene Lokalisierungen anpassen können. Eine ordnungsgemäße Grundlage dafür zu legen, stellt sicher, dass die Integration zukünftiger Übersetzungen organisiert und effizient bleibt.
 
 Erfahren Sie mehr über die Grundlagen von i18n, indem Sie unseren Artikel lesen: [Was ist Internationalisierung (i18n)? Definition und Herausforderungen](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/what_is_internationalization.md).
 
----
-
 ## Die Übersetzungsherausforderung für Angular-Anwendungen
 
 Die Übersetzung einer Angular-Anwendung bringt mehrere Herausforderungen mit sich:
@@ -43,8 +39,6 @@ Die Übersetzung einer Angular-Anwendung bringt mehrere Herausforderungen mit si
 - **Routing und Zustand**: Die Gewährleistung, dass die richtige Sprache beim Navigieren zwischen Routen beibehalten wird, erfordert ein Zustandsmanagement und möglicherweise benutzerdefinierte Routenwächter oder Interceptors.
 - **Skalierbarkeit und Wartung**: Übersetzungsdateien können schnell wachsen, und es kann eine laufende Aufgabe sein, sie organisiert, versioniert und mit der Evolution Ihrer Anwendung synchron zu halten.
 
----
-
 ## Führende i18n-Lösungen für Angular
 
 Angular bietet ein integriertes i18n-Framework, und es gibt mehrere Bibliotheken von Drittanbietern, die dazu entwickelt wurden, Ihre mehrsprachige Einrichtung zu vereinfachen. Nachfolgend sind einige der beliebtesten Lösungen aufgeführt.
@@ -69,8 +63,6 @@ Angular bietet ein integriertes i18n-Framework, und es gibt mehrere Bibliotheken
 
 - **Gemeinschaft & Ökosystem:** Obwohl es wächst, ist das Ökosystem neuer, sodass von der Gemeinschaft betriebene Plugins und Tools möglicherweise im Vergleich zu etablierten Lösungen begrenzter sind.
 
----
-
 ### 2. Angulars integriertes i18n
 
 **Überblick**  
@@ -89,8 +81,6 @@ Angular wird mit einem **integrierten i18n**-System geliefert, das Werkzeuge zum
 - **Dynamische Inhalte**: Der Umgang mit Echtzeit- oder nutzergenerierten Inhalten kann maßgeschneiderte Logik erfordern, da die integrierte Lösung von Angular stark auf Übersetzungen zur Kompilierungszeit ausgerichtet ist.
 - **Begrenzte Laufzeitflexibilität**: Sprachen im Handumdrehen zu wechseln (ohne die App neu zu laden) kann problematisch sein, da die Übersetzungen zur Kompilierungszeit in die Anwendung integriert werden.
 
----
-
 ### 3. ngx-translate
 
 Website: [https://github.com/ngx-translate/core](https://github.com/ngx-translate/core)
@@ -111,8 +101,6 @@ Website: [https://github.com/ngx-translate/core](https://github.com/ngx-translat
 - **SEO & SSR**: Wenn Sie serverseitiges Rendern mit Angular Universal benötigen, erfordert ngx-translate zusätzliche Konfigurationen, um sicherzustellen, dass die richtigen Übersetzungen beim ersten Laden an Crawler und Browser geliefert werden.
 - **Leistung**: Während es zur Laufzeit flexibel ist, kann die Handhabung vieler Übersetzungen auf großen Seiten Leistungsauswirkungen haben, weshalb Caching-Strategien empfohlen werden.
 
----
-
 ### 4. Transloco
 
 Website: [https://ngneat.github.io/transloco/](https://ngneat.github.io/transloco/)