Comment formater les montants de devises dans Next.js (Pages Router) v16

Problème

L'affichage des valeurs monétaires nécessite de coordonner deux préoccupations distinctes de localisation : la devise elle-même et les conventions de format numérique de la région de l'utilisateur. Un prix de 1200.50 doit apparaître comme "$1,200.50" pour les utilisateurs anglophones américains mais comme "1 200,50 €" pour les utilisateurs en Allemagne. La position du symbole monétaire, le séparateur décimal, le séparateur de groupement et l'espacement varient tous selon la locale. Lorsque ces éléments sont mal alignés ou codés en dur, les utilisateurs voient des formats non familiers qui créent un doute quant à l'exactitude du montant affiché, sapant ainsi la confiance dans les informations de prix.

Au-delà de la cohérence visuelle, un formatage incorrect des devises peut causer une réelle confusion. Un utilisateur habitué aux virgules comme séparateurs de milliers peut mal interpréter "1.200" comme un virgule deux, et non mille deux cents. De même, un symbole monétaire mal placé peut donner aux prix un aspect non professionnel ou suggérer une devise totalement différente. Un formatage correct des devises respecte à la fois le code de devise et les conventions numériques spécifiques à la locale de l'utilisateur, garantissant que les prix sont immédiatement clairs et dignes de confiance.

Solution

Formatez les valeurs monétaires en combinant le code de devise ISO 4217 avec la locale active de l'utilisateur pour produire un formatage numérique adapté à la région. Cette approche délègue le placement des symboles, la sélection des séparateurs et les règles d'espacement à la bibliothèque d'internationalisation, qui applique les conventions correctes pour chaque paire locale-devise. Le résultat est un affichage de prix qui correspond aux attentes des utilisateurs sans manipulation manuelle de chaînes ou logique spécifique à la locale dans le code de l'application.

Étapes

1. Créer un composant réutilisable de formatage de devise

Construisez un composant qui accepte une valeur numérique et un code de devise, puis formate le prix en utilisant la locale actuelle du contexte react-intl.

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} />;
}

Le composant FormattedNumber lit la locale depuis le IntlProvider le plus proche et applique automatiquement à la fois le symbole monétaire et les règles de formatage numérique spécifiques à la locale.

2. Utiliser le composant dans une page avec des données de prix dynamiques

Affichez les prix en transmettant des montants numériques et des codes de devise au composant, permettant au formatage de s'adapter à la locale de l'utilisateur.

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,
    },
  };
};

La page récupère les données du produit, y compris le code de devise, et les transmet au composant Price, qui formate le montant selon la locale active.

3. Créer un helper pour le formatage impératif des devises

Pour les scénarios où un composant React ne peut pas être utilisé, comme pour définir des attributs ou préparer des données pour des contextes non-JSX, exposez une fonction de formatage en utilisant le hook useIntl.

import { useIntl } from "react-intl";

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

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

Ce hook renvoie une fonction qui formate les valeurs monétaires sous forme de chaînes de caractères, utile pour les labels aria, les balises meta ou d'autres contextes textuels où les composants ne sont pas appropriés.

4. Appliquer le formateur dans les contextes d'attributs

Utilisez le formateur impératif pour remplir les attributs HTML qui nécessitent du texte brut plutôt que des éléments React.

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>
  );
}

Le formateur produit une chaîne de devise localisée qui peut être intégrée dans l'attribut aria-label, garantissant que les technologies d'assistance annoncent les prix dans le format correct pour la locale de l'utilisateur.