Wie man lokalisierungsbasiertes Routing in Next.js (Pages Router) v16 implementiert

Problem

Beim Aufbau einer mehrsprachigen Anwendung prägt eine grundlegende Entscheidung alles andere: Wie soll die Anwendung wissen, welche Sprache angezeigt werden soll? Ohne einen expliziten Mechanismus wird die URL /about mehrdeutig – sie könnte Inhalte in jeder Sprache darstellen. Benutzer können keine Links zu spezifischen Sprachversionen teilen, und Suchmaschinen haben Schwierigkeiten zu verstehen, welche Version zu welchem Publikum gehört. Diese Mehrdeutigkeit schafft Probleme sowohl für die Benutzererfahrung als auch für SEO, da es keine klare Möglichkeit gibt, Inhalte in einer bestimmten Sprache zu identifizieren oder zu bookmarken.

Lösung

Platzieren Sie eine Sprachkennung direkt in den URL-Pfad, indem Sie die integrierte i18n-Routing-Unterstützung von Next.js konfigurieren. Deklarieren Sie die Sprachen, die Sie unterstützen möchten, und eine Standardsprache in Ihrer Next.js-Konfiguration. Next.js wird das Routing automatisch verwalten und Pfade wie /fr/about und /nl-NL/about verfügbar machen, während die Standardsprache kein Präfix hat. Dies macht jeden Pfad eindeutig für eine bestimmte Sprache und beseitigt die Mehrdeutigkeit sowohl für Benutzer als auch für Suchmaschinen.

Schritte

1. Fügen Sie die i18n-Konfiguration zu next.config.js hinzu

Fügen Sie die i18n-Konfiguration zu Ihrer next.config.js-Datei hinzu, um zu deklarieren, welche Sprachen Ihre Anwendung unterstützt.

module.exports = {
  i18n: {
    locales: ["en-US", "fr", "nl-NL"],
    defaultLocale: "en-US",
  },
};

Locales sind UTS Locale Identifiers, ein standardisiertes Format zur Definition von Sprachen, das in der Regel aus einer Sprache, Region und einem Skript besteht, die durch einen Bindestrich getrennt sind. Die defaultLocale wird verwendet, wenn ein Pfad ohne Sprachpräfix besucht wird.

2. Zugriff auf Sprachinformationen in Seiten

Verwenden Sie den useRouter()-Hook, um auf Sprachinformationen in Ihren Seitenkomponenten zuzugreifen.

import { useRouter } from "next/router";

export default function AboutPage() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    <div>
      <h1>About Us</h1>
      <p>Current locale: {locale}</p>
    </div>
  );
}

Die Eigenschaft locale enthält die aktuell aktive Sprache, locales enthält alle konfigurierten Sprachen und defaultLocale enthält die konfigurierte Standardsprache.

3. Zugriff auf Locale in Datenabruffunktionen

Beim Pre-Rendering von Seiten mit getStaticProps oder getServerSideProps werden die Locale-Informationen im Kontext bereitgestellt.

import { GetStaticProps } from "next";

export const getStaticProps: GetStaticProps = async (context) => {
  const { locale } = context;

  const messages = await import(`../messages/${locale}.json`);

  return {
    props: {
      messages: messages.default,
    },
  };
};

Dies ermöglicht es Ihnen, locale-spezifische Daten zur Build-Zeit oder zur Anforderungszeit basierend auf der aktiven Locale zu laden.

4. Verknüpfung zwischen Locales

Verwenden Sie next/link mit einer locale-Eigenschaft, um zu einer anderen Locale zu wechseln.

import Link from "next/link";

export default function LanguageSwitcher() {
  return (
    <nav>
      <Link href="/about" locale="en-US">
        English
      </Link>
      <Link href="/about" locale="fr">
        Français
      </Link>
      <Link href="/about" locale="nl-NL">
        Nederlands
      </Link>
    </nav>
  );
}

Wenn keine locale-Eigenschaft angegeben wird, wird bei Client-Übergängen die aktuell aktive Locale verwendet. Die locale-Eigenschaft ermöglicht es Benutzern, die Sprache zu wechseln, während sie auf derselben logischen Seite bleiben.

5. Generieren statischer Pfade für alle Locales

Bei der Nutzung von getStaticPaths werden die konfigurierten Locales im Kontextparameter unter locales und die konfigurierte defaultLocale unter defaultLocale bereitgestellt.

import { GetStaticPaths } from "next";

export const getStaticPaths: GetStaticPaths = async (context) => {
  const { locales } = context;

  const paths = locales.flatMap((locale) => [
    { params: { slug: "getting-started" }, locale },
    { params: { slug: "advanced" }, locale },
  ]);

  return {
    paths,
    fallback: false,
  };
};

Dies stellt sicher, dass alle Locale-Versionen Ihrer dynamischen Seiten zur Build-Zeit vorgerendert werden.