Wie man Währungsinformationen in Next.js (Pages Router) v16 anzeigt

Problem

Anwendungen müssen häufig Währungsinformationen anzeigen, ohne einen tatsächlichen Preis anzuzeigen. Ein Währungsauswahlelement könnte verfügbare Währungen auflisten, Dokumentationen könnten Wechselkurse referenzieren oder ein Zahlungsformular könnte anzeigen, welche Währungen akzeptiert werden. Die einfache Anzeige von "USD" ist für nicht-technische Benutzer kryptisch, während das Hardcoding von "US Dollar" manuelle Übersetzung und Wartung erfordert. Währungssymbole wie "$" sind mehrdeutig – dasselbe Symbol repräsentiert US-, kanadische und australische Dollar. Die angemessene Darstellung hängt sowohl vom Kontext als auch von der Sprache des Benutzers ab.

Lösung

Nutzen Sie die Formatierungsfunktionen von react-intl, um Währungsinformationen in dem Format anzuzeigen, das Ihrem Kontext entspricht. Verwenden Sie für vollständige Währungsnamen formatDisplayName mit dem Währungstyp, der Namen wie "US Dollar" automatisch in die Sprache des Benutzers übersetzt. Für Symbole verwenden Sie Intl.NumberFormat mit formatToParts, um das lokalisierte Symbol für einen bestimmten Währungscode zu extrahieren. Für ISO-Codes zeigen Sie den Code direkt an. Dieser Ansatz stellt sicher, dass Währungsreferenzen sowohl klar als auch ordnungsgemäß lokalisiert sind, ohne manuelle Übersetzungsarbeit.

Schritte

1. Erstellen Sie einen Helfer zum Extrahieren von Währungssymbolen

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. Erstellen Sie eine Währungsanzeigekomponente

Bauen Sie eine Komponente, die Währungsinformationen in verschiedenen Formaten basierend auf dem Anzeigemodus anzeigt.

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

Setzen Sie die Währungsanzeige-Komponente ein, wo immer 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 "US Dollar ($)" auf Englisch oder "Dollar américain ($)" auf Französisch, und passt sich automatisch an die Sprache des Benutzers an.