Comment afficher les informations de devise dans Next.js (Pages Router) v16

Problème

Les applications doivent souvent afficher des informations sur les devises sans montrer un prix réel. Un sélecteur de devise peut lister les devises disponibles, la documentation peut faire référence aux taux de change, ou un formulaire de paiement peut indiquer quelles devises sont acceptées. Afficher simplement "USD" est cryptique pour les utilisateurs non techniques, tandis que coder en dur "Dollar américain" nécessite une traduction et une maintenance manuelles. Les symboles monétaires comme "$" sont ambigus—le même symbole représente les dollars américains, canadiens et australiens. La représentation appropriée dépend à la fois du contexte et de la langue de l'utilisateur.

Solution

Utilisez les capacités de formatage de react-intl pour afficher les informations de devise dans le format qui correspond à votre contexte. Pour les noms complets de devises, utilisez formatDisplayName avec le type de devise, qui localise automatiquement les noms comme "Dollar américain" dans la langue de l'utilisateur. Pour les symboles, utilisez Intl.NumberFormat avec formatToParts pour extraire le symbole localisé pour un code de devise donné. Pour les codes ISO, affichez le code directement. Cette approche garantit que les références aux devises sont à la fois claires et correctement localisées sans travail de traduction manuel.

Étapes

1. Créer un helper pour extraire les symboles de devise

Utilisez Intl.NumberFormat avec formatToParts pour extraire le symbole monétaire d'un nombre formaté.

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

L'option currencyDisplay contrôle la forme : "symbol", "narrowSymbol", "code" ou "name". Ce helper renvoie le symbole localisé pour n'importe quel code de devise.

2. Créer un composant d'affichage de devise

Construisez un composant qui affiche les informations de devise dans différents formats selon le mode d'affichage.

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

La méthode formatDisplayName avec type: 'currency' renvoie le nom de devise localisé. Le composant adapte sa sortie en fonction de la prop d'affichage.

3. Utiliser le composant dans différents contextes

Appliquez le composant d'affichage de devise là où vous avez besoin d'afficher des informations de devise sans prix.

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

Cela affiche les noms de devises localisés avec leurs symboles, comme "US Dollar ($)" en anglais ou "Dollar américain ($)" en français, s'adaptant automatiquement à la locale de l'utilisateur.