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

Problème

Les applications doivent souvent afficher des informations de devise sans montrer de prix réel. Un sélecteur de devises peut lister les devises disponibles, une documentation peut référencer des 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 de devises 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 directement le code. Cette approche garantit que les références de devises sont à la fois claires et correctement localisées sans travail de traduction manuel.

Étapes

1. Créer une fonction utilitaire pour extraire les symboles de devises

Utilisez Intl.NumberFormat avec formatToParts pour extraire le symbole de devise 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". Cette fonction utilitaire renvoie le symbole localisé pour n'importe quel code de devise.

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

Créez un composant qui affiche les informations de devise dans différents formats en fonction du 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 la devise localisé. Le composant adapte sa sortie en fonction de la propriété display.

3. Utiliser le composant dans différents contextes

Appliquez le composant d'affichage de devise là où vous devez afficher des informations sur les devises sans les 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, tels que "Dollar américain ($)" en français ou "US Dollar ($)" en anglais, s'adaptant automatiquement aux paramètres régionaux de l'utilisateur.