Sprachbasiertes Routing

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

Problem

Eine einzelne URL wie /about ist von Natur aus mehrdeutig, wenn eine Anwendung mehrere Sprachen unterstützt. Benutzer, die diese URL besuchen, erhalten Inhalte in einer Standardsprache, haben jedoch keine Möglichkeit, eine Version dieser Seite in einer anderen Sprache zu verlinken oder als Lesezeichen zu speichern. Diese Mehrdeutigkeit verwirrt Suchmaschinen, die möglicherweise nicht alle Sprachversionen indizieren oder diese vermischen könnten.

Lösung

Integrieren Sie eine Sprachkennung direkt in den URL-Pfad, wie z.B. /en/about oder /fr/about. Dies macht jeden Pfad eindeutig für eine bestimmte Sprache und löst die Mehrdeutigkeit sowohl für Benutzer als auch für Suchmaschinen.

Schritte

1. Erstellen Sie ein dynamisches Sprachsegment

Im Next.js App Router behandeln Sie das Sprachrouting, indem Sie einen dynamischen Segmentordner im Stammverzeichnis Ihres app-Verzeichnisses erstellen. Erstellen Sie einen neuen Ordner namens [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 über URLs wie /en oder /fr zugreifen.

2. Aktualisieren Sie das Root-Layout

Ihr Root-layout.tsx sollte ebenfalls in den Ordner app/[lang] verschoben werden. Es erhält auch den lang-Parameter, den Sie verwenden sollten, um das lang-Attribut im <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 verfasst ist.

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 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 Anwendung /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 Anwendung werden jetzt 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 zugänglich sind. Der lang-Parameter ist auf allen Seiten verfügbar, wenn Sie ihn benötigen, um den korrekten übersetzten Inhalt abzurufen.