Währungsbeträge in Next.js (Pages Router) v16 formatieren

Problem

Die Anzeige von Geldbeträgen erfordert die Koordination zweier unterschiedlicher Lokalisierungsaspekte: der Währung selbst und der Zahlenformatkonventionen der Region des Benutzers. Ein Preis von 1200,50 muss für Benutzer in den USA als "$1,200.50" erscheinen, für Benutzer in Deutschland jedoch als "1.200,50 €". Die Position des Währungssymbols, das Dezimaltrennzeichen, das Tausendertrennzeichen und die Abstände variieren je nach Locale. Wenn diese Elemente nicht aufeinander abgestimmt oder fest codiert sind, sehen Benutzer ungewohnte Formate, die Zweifel daran aufkommen lassen, ob der angezeigte Betrag korrekt ist, was das Vertrauen in Preisinformationen untergräbt.

Über die visuelle Konsistenz hinaus kann eine falsche Währungsformatierung zu echter Verwirrung führen. Ein Benutzer, der an Kommas als Tausendertrennzeichen gewöhnt ist, könnte "1.200" als eins Komma zwei statt als zwölfhundert missverstehen. Ebenso kann ein falsch platziertes Währungssymbol Preise unprofessionell wirken lassen oder die falsche Währung suggerieren. Eine korrekte Währungsformatierung respektiert sowohl den Währungscode als auch die locale-spezifischen Zahlenkonventionen des Benutzers und stellt sicher, dass Preise sofort klar und vertrauenswürdig sind.

Lösung

Formatieren Sie Währungswerte, indem Sie den ISO-4217-Währungscode mit der aktiven Locale des Benutzers kombinieren, um eine regionsgerechte Zahlenformatierung zu erzeugen. Dieser Ansatz delegiert die Symbolplatzierung, Trennzeichenauswahl und Abstandsregeln an die Internationalisierungsbibliothek, die die korrekten Konventionen für jedes Locale-Währungs-Paar anwendet. Das Ergebnis ist eine Preisanzeige, die den Erwartungen der Benutzer entspricht, ohne manuelle String-Manipulation oder locale-spezifische Logik im Anwendungscode.

Schritte

1. Wiederverwendbare Währungsformatierungskomponente erstellen

Erstellen Sie eine Komponente, die einen numerischen Wert und einen Währungscode akzeptiert und dann den Preis unter Verwendung der aktuellen Locale aus dem Kontext von react-intl formatiert.

import { FormattedNumber } from "react-intl";

interface PriceProps {
  value: number;
  currency: string;
}

export default function Price({ value, currency }: PriceProps) {
  return <FormattedNumber value={value} style="currency" currency={currency} />;
}

Die FormattedNumber-Komponente liest das Gebietsschema aus dem nächstgelegenen IntlProvider und wendet sowohl das Währungssymbol als auch die gebietsschemaspezifischen Zahlenformatierungsregeln automatisch an.

2. Verwenden Sie die Komponente auf einer Seite mit dynamischen Preisdaten

Rendern Sie Preise, indem Sie numerische Beträge und Währungscodes an die Komponente übergeben, sodass sich die Formatierung an das Gebietsschema des Benutzers anpasst.

import { GetServerSideProps } from "next";
import Price from "../components/Price";

interface Product {
  id: string;
  name: string;
  price: number;
  currency: string;
}

interface ProductPageProps {
  product: Product;
}

export default function ProductPage({ product }: ProductPageProps) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>
        <Price value={product.price} currency={product.currency} />
      </p>
    </div>
  );
}

export const getServerSideProps: GetServerSideProps = async () => {
  const product = {
    id: "1",
    name: "Wireless Headphones",
    price: 1299.99,
    currency: "USD",
  };

  return {
    props: {
      product,
    },
  };
};

Die Seite ruft Produktdaten einschließlich des Währungscodes ab und übergibt diese an die Price-Komponente, die den Betrag entsprechend dem aktiven Gebietsschema formatiert.

3. Erstellen Sie einen Helper für imperative Währungsformatierung

Für Szenarien, in denen eine React-Komponente nicht verwendet werden kann, wie z. B. das Setzen von Attributen oder das Vorbereiten von Daten für Nicht-JSX-Kontexte, stellen Sie eine Formatierungsfunktion mithilfe des useIntl-Hooks bereit.

import { useIntl } from "react-intl";

export function useCurrencyFormatter() {
  const intl = useIntl();

  return (value: number, currency: string): string => {
    return intl.formatNumber(value, {
      style: "currency",
      currency,
    });
  };
}

Dieser Hook gibt eine Funktion zurück, die Währungswerte als Strings formatiert, nützlich für Aria-Labels, Meta-Tags oder andere reine Textkontexte, in denen Komponenten nicht geeignet sind.

4. Wenden Sie den Formatter in Attributkontexten an

Verwenden Sie den imperativen Formatter, um HTML-Attribute zu befüllen, die reinen Text anstelle von React-Elementen erfordern.

import { useCurrencyFormatter } from "../hooks/useCurrencyFormatter";

interface ProductCardProps {
  name: string;
  price: number;
  currency: string;
  imageUrl: string;
}

export default function ProductCard({
  name,
  price,
  currency,
  imageUrl,
}: ProductCardProps) {
  const formatCurrency = useCurrencyFormatter();
  const priceLabel = formatCurrency(price, currency);

  return (
    <article aria-label={`${name}, ${priceLabel}`}>
      <img src={imageUrl} alt={name} />
      <h2>{name}</h2>
      <p>{priceLabel}</p>
    </article>
  );
}

Der Formatter erzeugt einen lokalisierten Währungsstring, der in das aria-label-Attribut eingebettet werden kann, wodurch sichergestellt wird, dass assistive Technologien Preise im korrekten Format für das Gebietsschema des Benutzers ansagen.