Sprachbasiertes Routing

Einrichtung von sprachbasiertem Routing in Next.js (App Router)

Problem

Eine einzelne URL, wie z. B. /about, ist grundsätzlich mehrdeutig, wenn eine Anwendung mehrere Sprachen unterstützt. Benutzer, die diese URL aufrufen, erhalten Inhalte in einer Standardsprache, haben jedoch keine Möglichkeit, auf eine Version dieser Seite in einer anderen Sprache zu verlinken oder diese als Lesezeichen zu speichern. Diese Mehrdeutigkeit verwirrt Suchmaschinen, die möglicherweise nicht alle Sprachversionen indexieren oder diese vermischen.

Lösung

Integrieren Sie eine Sprachkennung direkt in den URL-Pfad, wie z. B. /en/about oder /fr/about. Dadurch wird jeder Pfad eindeutig einer bestimmten Sprache zugeordnet, wodurch die Mehrdeutigkeit sowohl für Benutzer als auch für Suchmaschinen aufgelöst wird.

Schritte

1. Erstellen Sie ein dynamisches Sprachsegment

Im Next.js App Router handhaben Sie das Sprach-Routing, indem Sie einen dynamischen Segmentordner im Stammverzeichnis Ihres app-Verzeichnisses erstellen. Erstellen Sie einen neuen Ordner mit dem Namen [lang] innerhalb von app und verschieben Sie Ihre Haupt-page.tsx-Datei hinein.

// app/[lang]/page.tsx

export default function Home({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>Home page</h1>
      <p>Current language: {params.lang}</p>
    </div>
  );
}

Dieser [lang]-Ordner erfasst den ersten Teil der URL (z. B. 'en' oder 'fr') und übergibt ihn als lang-Eigenschaft innerhalb des params-Objekts an Ihre Seitenkomponente. Sie können nun auf Ihre Seite unter URLs wie /en oder /fr zugreifen.

2. Aktualisieren Sie das Root-Layout

Ihr Root-layout.tsx sollte ebenfalls in den app/[lang]-Ordner verschoben werden. Es erhält ebenfalls den lang-Parameter, den Sie verwenden sollten, um das lang-Attribut am <html>-Tag für Barrierefreiheit und SEO zu setzen.

// app/[lang]/layout.tsx

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

Dieses Layout umschließt nun alle Seiten innerhalb einer bestimmten Sprache. Das Setzen des lang-Attributs hier informiert Browser darüber, in welcher Sprache der Seiteninhalt vorliegt.

3. Unterstützte Sprachen definieren

Um Next.js mitzuteilen, welche Sprachsegmente gültig sind, können Sie eine generateStaticParams-Funktion aus dem Root-Layout exportieren. Dies ermöglicht es Next.js, diese Routen zur Build-Zeit statisch zu generieren.

// app/[lang]/layout.tsx

export async function generateStaticParams() {
  return [{ lang: 'en' }, { lang: 'es' }, { lang: 'fr' }];
}

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

Diese Funktion informiert Next.js darüber, dass Ihre App /en, /es und /fr unterstützt. Anfragen für andere Pfade (wie /de) führen zu einer 404-Not-Found-Seite.

4. Verschachtelte Routen hinzufügen

Alle anderen Seiten in Ihrer App werden nun innerhalb des [lang]-Ordners erstellt. Um beispielsweise eine „Über uns"-Seite zu erstellen, würden Sie app/[lang]/about/page.tsx hinzufügen.

// app/[lang]/about/page.tsx

export default function AboutPage({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>About page</h1>
      <p>Current language: {params.lang}</p>
    </div>
  );
}

Diese Datei erstellt automatisch Routen, die unter /en/about, /es/about und /fr/about erreichbar sind. Der lang-Parameter ist auf allen Seiten verfügbar, falls Sie ihn benötigen, um den korrekten übersetzten Inhalt abzurufen.