So zeigen Sie Währungsinformationen in Next.js (Pages Router) v16 an

Problem

Anwendungen müssen häufig Währungsinformationen anzeigen, ohne einen tatsächlichen Preis darzustellen. Ein Währungsselektor könnte verfügbare Währungen auflisten, in der Dokumentation könnten Wechselkurse referenziert werden oder ein Zahlungsformular zeigt an, welche Währungen akzeptiert werden. Die reine Anzeige von "USD" ist für nicht-technische Nutzer:innen unverständlich, während das Hardcoden von "US Dollar" manuelle Übersetzung und Pflege erfordert. Währungssymbole wie "$" sind mehrdeutig – dasselbe Symbol steht für US-, kanadische und australische Dollar. Die passende Darstellung hängt sowohl vom Kontext als auch von der Sprache der Nutzer:innen ab.

Lösung

Nutzen Sie die Formatierungsfunktionen von react-intl, um Währungsinformationen im passenden Format für Ihren Kontext anzuzeigen. Für vollständige Währungsnamen verwenden Sie formatDisplayName mit dem Währungstyp. Damit werden Namen wie "US Dollar" automatisch in die Sprache der Nutzer:innen lokalisiert. Für Symbole nutzen Sie Intl.NumberFormat mit formatToParts, um das lokalisierte Symbol für einen bestimmten Währungscode zu extrahieren. ISO-Codes können Sie direkt anzeigen. Dieser Ansatz stellt sicher, dass Währungsangaben klar und korrekt lokalisiert sind, ohne dass manuelle Übersetzungen notwendig sind.

Schritte

1. Helfer zum Extrahieren von Währungssymbolen erstellen

Verwenden Sie Intl.NumberFormat mit formatToParts, um das Währungssymbol aus einer formatierten Zahl zu extrahieren.

export function getCurrencySymbol(
  currencyCode: string,
  locale: string,
): string {
  const parts = new Intl.NumberFormat(locale, {
    style: "currency",
    currency: currencyCode,
    currencyDisplay: "narrowSymbol",
  }).formatToParts(0);

  const currencyPart = parts.find((part) => part.type === "currency");
  return currencyPart ? currencyPart.value : currencyCode;
}

Die Option currencyDisplay steuert die Form: "symbol", "narrowSymbol", "code" oder "name". Dieser Helfer gibt das lokalisierte Symbol für jeden Währungscode zurück.

2. Komponente zur Anzeige von Währungsinformationen erstellen

Erstellen Sie eine Komponente, die Währungsinformationen je nach Anzeigemodus in verschiedenen Formaten darstellt.

import { useIntl } from "react-intl";
import { useRouter } from "next/router";
import { getCurrencySymbol } from "../utils/getCurrencySymbol";

interface CurrencyDisplayProps {
  currencyCode: string;
  display: "symbol" | "name" | "code";
}

export default function CurrencyDisplay({
  currencyCode,
  display,
}: CurrencyDisplayProps) {
  const intl = useIntl();
  const router = useRouter();
  const locale = router.locale || "en";

  if (display === "symbol") {
    const symbol = getCurrencySymbol(currencyCode, locale);
    return <span>{symbol}</span>;
  }

  if (display === "name") {
    const name = intl.formatDisplayName(currencyCode, { type: "currency" });
    return <span>{name}</span>;
  }

  return <span>{currencyCode}</span>;
}

Die Methode formatDisplayName mit type: 'currency' gibt den lokalisierten Währungsnamen zurück. Die Komponente passt ihre Ausgabe basierend auf der display-Eigenschaft an.

3. Verwenden Sie die Komponente in verschiedenen Kontexten

Wenden Sie die Währungsanzeige-Komponente dort an, wo Sie Währungsinformationen ohne Preise anzeigen müssen.

import CurrencyDisplay from "../components/CurrencyDisplay";

export default function PaymentOptions() {
  const acceptedCurrencies = ["USD", "EUR", "GBP", "JPY"];

  return (
    <div>
      <h2>Accepted Currencies</h2>
      <ul>
        {acceptedCurrencies.map((code) => (
          <li key={code}>
            <CurrencyDisplay currencyCode={code} display="name" />
            {" ("}
            <CurrencyDisplay currencyCode={code} display="symbol" />
            {")"}
          </li>
        ))}
      </ul>
    </div>
  );
}

Dies rendert lokalisierte Währungsnamen mit ihren Symbolen, wie z. B. "US-Dollar ($)" auf Englisch oder "Dollar américain ($)" auf Französisch, und passt sich automatisch an die Locale des Benutzers an.