Wie man Währungsbeträge in Next.js (Pages Router) v16 formatiert

Problem

Die Anzeige von Geldwerten erfordert die Koordination zweier unterschiedlicher Lokalisierungsaspekte: die Währung selbst und die Zahlenformatkonventionen der Region des Benutzers. Ein Preis von 1200.50 muss für US-englische Benutzer als "$1,200.50" erscheinen, aber als "1 200,50 €" für Benutzer in Deutschland. Die Position des Währungssymbols, das Dezimaltrennzeichen, das Gruppierungstrennzeichen und die Abstände variieren je nach Gebietsschema. Wenn diese Elemente nicht übereinstimmen oder hartcodiert sind, sehen Benutzer ungewohnte Formate, die Zweifel daran aufkommen lassen, ob der angezeigte Betrag korrekt ist, was das Vertrauen in Preisinformationen untergräbt.

Jenseits der visuellen Konsistenz 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 lesen, nicht als zwölfhundert. Ebenso kann ein falsch platziertes Währungssymbol dazu führen, dass Preise unprofessionell aussehen oder gänzlich die falsche Währung suggerieren. Die korrekte Währungsformatierung berücksichtigt sowohl den Währungscode als auch die gebietsspezifischen 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 dem aktiven Gebietsschema des Benutzers kombinieren, um eine regionsgerechte Zahlenformatierung zu erzeugen. Dieser Ansatz delegiert die Symbolplatzierung, die Auswahl der Trennzeichen und die Abstandsregeln an die Internationalisierungsbibliothek, die die korrekten Konventionen für jedes Gebietsschema-Währungspaar anwendet. Das Ergebnis ist eine Preisanzeige, die den Erwartungen der Benutzer entspricht, ohne manuelle Zeichenkettenmanipulation oder gebietsschemaspezifische Logik im Anwendungscode.

Schritte

1. Erstellen einer wiederverwendbaren Währungsformatierungskomponente

Bauen Sie eine Komponente, die einen numerischen Wert und einen Währungscode akzeptiert und dann den Preis unter Verwendung des aktuellen Gebietsschemas 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 vom nächsten IntlProvider und wendet sowohl das Währungssymbol als auch die gebietsschemaspezifischen Zahlenformatierungsregeln automatisch an.

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

Rendern Sie Preise, indem Sie numerische Beträge und Währungscodes an die Komponente übergeben, sodass die Formatierung sich an die Locale des Benutzers anpassen kann.

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 sie an die Price-Komponente, die den Betrag entsprechend der aktiven Locale formatiert.

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

Für Szenarien, in denen eine React-Komponente nicht verwendet werden kann, wie beim Setzen von Attributen oder bei der Vorbereitung von Daten für Nicht-JSX-Kontexte, stellen Sie eine Formatierungsfunktion bereit, die den useIntl-Hook verwendet.

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. Anwenden des Formatters in Attributkontexten

Verwenden Sie den imperativen Formatter, um HTML-Attribute zu füllen, die Klartext 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, um sicherzustellen, dass assistive Technologien Preise im korrekten Format für die Locale des Benutzers ankündigen.