Implementierung von Locale-basiertem Routing in Next.js (Pages Router) v16

Problem

Beim Aufbau einer mehrsprachigen Anwendung prägt eine grundlegende Entscheidung alles andere: Wie erfährt die Anwendung, 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 bestimmten Sprachversionen teilen, und Suchmaschinen haben Schwierigkeiten zu verstehen, welche Version zu welcher Zielgruppe 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 als Lesezeichen zu speichern.

Lösung

Fügen Sie eine Sprachkennung direkt in den URL-Pfad ein, indem Sie die integrierte i18n-Routing-Unterstützung von Next.js konfigurieren. Deklarieren Sie die Locales, die Sie unterstützen möchten, und eine Standard-Locale in Ihrer Next.js-Konfiguration. Next.js übernimmt automatisch das Routing und stellt Pfade wie /fr/about und /nl-NL/about bereit, während die Standard-Locale kein Präfix erhält. Dadurch wird jeder Pfad eindeutig einer bestimmten Sprache zugeordnet, wodurch die Mehrdeutigkeit sowohl für Benutzer als auch für Suchmaschinen beseitigt wird.

Schritte

1. i18n-Konfiguration zu next.config.js hinzufügen

Fügen Sie die i18n-Konfiguration zu Ihrer next.config.js-Datei hinzu, um zu deklarieren, welche Locales 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 Locales, das im Allgemeinen aus einer Sprache, einer Region und einer Schrift besteht, die durch einen Bindestrich getrennt sind. Die defaultLocale wird verwendet, wenn ein Pfad ohne Locale-Präfix aufgerufen wird.

2. Auf Locale-Informationen in Pages zugreifen

Verwenden Sie den useRouter()-Hook, um in Ihren Page-Komponenten auf Locale-Informationen 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 Locale, locales enthält alle konfigurierten Locales und defaultLocale enthält die konfigurierte Standard-Locale.

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 Request-Zeit 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 die aktuell aktive Locale während Client-Transitionen verwendet. Die locale-Eigenschaft ermöglicht es Benutzern, die Sprache zu wechseln, während sie auf derselben logischen Seite bleiben.

5. Statische Pfade für alle Locales generieren

Bei Verwendung 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 pre-gerendert werden.