Wie man Übersetzungen aus Dateien in Next.js (Pages Router) v16 lädt

Problem

Die direkte Hardcodierung von benutzerorientierten Zeichenketten in Komponenten erzeugt eine enge Kopplung zwischen Inhalt und Code. Bei jeder Änderung des Textes müssen Entwickler die Implementierungsdateien lokalisieren und modifizieren. Die Unterstützung einer zweiten Sprache erfordert das Auffinden jeder hartcodierten Zeichenkette und deren Einbettung in bedingte Logik. Eine dritte Sprache erweitert diese Logik weiter. Dieser Ansatz macht Übersetzungsworkflows abhängig von Code-Deployments und verhindert, dass nicht-technische Teammitglieder Inhalte unabhängig aktualisieren können.

Mit dem Wachstum der Anwendung wird die Verwaltung von Übersetzungen zunehmend schwieriger. Zeichenketten, die über Dutzende von Komponenten verstreut sind, lassen sich schwer prüfen, duplizieren oder konsistent aktualisieren. Übersetzer können nicht parallel mit Entwicklern arbeiten, da sie Zugriff auf die Codebasis selbst benötigen.

Lösung

Speichern Sie alle benutzerorientierten Texte in externen Ressourcendateien, organisiert nach Sprache, mit einer JSON-Datei pro Locale. Jede Nachricht wird durch einen eindeutigen Schlüssel anstelle ihres wörtlichen Textes identifiziert. Komponenten referenzieren diese Schlüssel anstelle von hartcodierten Zeichenketten.

Laden Sie die entsprechende Übersetzungsdatei basierend auf dem von Next.js empfangenen Locale und übergeben Sie die Nachrichten an den Provider von react-intl. Die Anwendung kann dann Sprachen wechseln, indem sie eine andere Datei lädt, ohne den Komponentencode zu ändern. Dies entkoppelt Inhalt von der Implementierung und ermöglicht Übersetzern, in Standard-JSON-Dateien zu arbeiten, während Entwickler stabile Nachrichtenschlüssel referenzieren.

Schritte

1. Erstellen Sie nach Locale organisierte Übersetzungsdateien

Legen Sie Übersetzungsnachrichten in JSON-Dateien ab, die nach Locale getrennt sind. Jede Datei enthält Schlüssel-Wert-Paare, wobei Schlüssel stabile Identifikatoren und Werte die übersetzten Zeichenketten für diese Sprache sind.

{
"welcome": "Willkommen zurück",
"greeting": "Hallo, {name}",
"itemCount": "Sie haben {count, plural, one {# Artikel} other {# Artikel}}"
}

Erstellen Sie eine Datei pro unterstütztem Locale (zum Beispiel messages/en.json, messages/es.json, messages/fr.json) in einem messages-Verzeichnis im Stammverzeichnis Ihres Projekts. Verwenden Sie die gleichen Schlüssel in allen Dateien, damit react-intl die korrekte Übersetzung für das aktive Locale nachschlagen kann.

2. Nachrichten in getStaticProps laden

Lesen Sie die Übersetzungsdatei basierend auf dem von Next.js in getStaticProps empfangenen Gebietsschema. Dies stellt sicher, dass Nachrichten serverseitig verfügbar sind und als Props an die Seite übergeben werden.

import { GetStaticProps } from "next";

export const getStaticProps: GetStaticProps = async (context) => {
  const locale = context.locale || "en";
  const messages = (await import(`../messages/${locale}.json`)).default;

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

Der dynamische Import lädt nur die Datei für das aktuelle Gebietsschema. Next.js stellt den Wert locale automatisch basierend auf der URL oder den Benutzereinstellungen bereit.

3. Übergeben von Nachrichten an IntlProvider in _app

Umschließen Sie Ihre Hauptkomponente mit IntlProvider und konfigurieren Sie sie mit dem aktuellen Gebietsschema des Benutzers und den entsprechenden übersetzten Nachrichten. Greifen Sie auf die Nachrichten aus pageProps zu, damit jede Seite ihre eigenen Übersetzungen bereitstellen kann.

import { AppProps } from "next/app";
import { IntlProvider } from "react-intl";
import { useRouter } from "next/router";

export default function App({ Component, pageProps }: AppProps) {
  const { locale, defaultLocale } = useRouter();

  return (
    <IntlProvider
      locale={locale || "en"}
      defaultLocale={defaultLocale || "en"}
      messages={pageProps.messages}
    >
      <Component {...pageProps} />
    </IntlProvider>
  );
}

Der Provider macht die Nachrichten für alle Komponenten im Baum verfügbar. Jede Seite lädt ihre eigene Nachrichtendatei über getStaticProps, und _app erhält diese Nachrichten über pageProps.

4. Referenzieren von Nachrichten nach Schlüssel in Komponenten

Verwenden Sie die FormattedMessage-Komponente oder den useIntl-Hook von react-intl, um übersetzten Text anzuzeigen. Referenzieren Sie Nachrichten anhand ihres Schlüssels, anstatt Zeichenketten fest zu codieren.

import { FormattedMessage, useIntl } from "react-intl";

export default function HomePage() {
  const intl = useIntl();
  const userName = "Alice";

  return (
    <div>
      <h1>
        <FormattedMessage id="welcome" />
      </h1>
      <p>
        <FormattedMessage id="greeting" values={{ name: userName }} />
      </p>
      <input placeholder={intl.formatMessage({ id: "searchPlaceholder" })} />
    </div>
  );
}

React-intl sucht und formatiert die übersetzte Nachricht mit der angegebenen ID. Wenn eine Übersetzung fehlt, wird auf die defaultMessage zurückgegriffen, falls angegeben. Variablen, die in der values-Prop übergeben werden, werden in die Nachrichtenzeichenfolge interpoliert.