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

Problème

L'affichage des valeurs monétaires nécessite de coordonner deux aspects distincts de la 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 milliers 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 inhabituels qui créent un doute quant à l'exactitude du montant affiché, sapant ainsi la confiance dans les informations de tarification.

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 douze cents. De même, un symbole monétaire mal placé peut donner aux prix un aspect peu professionnel ou suggérer une devise totalement différente. Un formatage approprié 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 ni logique spécifique à la locale dans le code de l'application.

Étapes

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

Créez un composant qui accepte une valeur numérique et un code de devise, puis formate le prix en utilisant la locale actuelle du contexte de 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 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 tarification dynamiques

Affichez les prix en passant 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 produit incluant 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 de devises

Pour les scénarios où un composant React ne peut pas être utilisé, comme la définition d'attributs ou la préparation de 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 retourne 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.