Cómo mostrar información de moneda en Next.js (Pages Router) v16

Problema

Las aplicaciones a menudo necesitan mostrar información de moneda sin mostrar un precio real. Un selector de moneda podría listar las monedas disponibles, la documentación podría hacer referencia a tipos de cambio, o un formulario de pago podría mostrar qué monedas se aceptan. Simplemente mostrar "USD" es críptico para usuarios no técnicos, mientras que codificar "dólar estadounidense" requiere traducción y mantenimiento manual. Los símbolos de moneda como "$" son ambiguos: el mismo símbolo representa dólares estadounidenses, canadienses y australianos. La representación apropiada depende tanto del contexto como del idioma del usuario.

Solución

Usa las capacidades de formato de react-intl para mostrar información de moneda en el formato que coincida con tu contexto. Para nombres completos de moneda, usa formatDisplayName con el tipo de moneda, que localiza automáticamente nombres como "dólar estadounidense" al idioma del usuario. Para símbolos, usa Intl.NumberFormat con formatToParts para extraer el símbolo localizado para un código de moneda dado. Para códigos ISO, muestra el código directamente. Este enfoque garantiza que las referencias de moneda sean claras y estén correctamente localizadas sin trabajo de traducción manual.

Pasos

1. Crea un helper para extraer símbolos de moneda

Usa Intl.NumberFormat con formatToParts para extraer el símbolo de moneda de un número formateado.

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

La opción currencyDisplay controla la forma: "symbol", "narrowSymbol", "code" o "name". Este helper devuelve el símbolo localizado para cualquier código de moneda.

2. Crea un componente de visualización de moneda

Construye un componente que muestre información de moneda en diferentes formatos según el modo de visualización.

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

El método formatDisplayName con type: 'currency' devuelve el nombre de moneda localizado. El componente adapta su salida según la prop display.

3. Usa el componente en diferentes contextos

Aplica el componente de visualización de divisas donde necesites mostrar información de divisas sin precios.

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

Esto renderiza nombres de divisas localizados con sus símbolos, como "US Dollar ($)" en inglés o "Dollar américain ($)" en francés, adaptándose automáticamente a la configuración regional del usuario.