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

Problema

Las aplicaciones a menudo necesitan mostrar información de divisas sin mostrar un precio real. Un selector de divisas podría enumerar 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" resulta 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

Utiliza las capacidades de formateo de react-intl para mostrar información de divisas en el formato que se ajuste a tu contexto. Para nombres completos de divisas, usa formatDisplayName con el tipo de moneda, que automáticamente localiza 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 determinado. Para códigos ISO, muestra el código directamente. Este enfoque asegura que las referencias a divisas sean claras y estén correctamente localizadas sin trabajo manual de traducción.

Pasos

1. Crear 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. Crear un componente de visualización de moneda

Construye un componente que muestre información de divisas 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 localizado de la moneda. El componente adapta su salida según la propiedad display.

3. Usa el componente en diferentes contextos

Aplica el componente de visualización de moneda 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 monedas localizados con sus símbolos, como "Dólar estadounidense ($)" en español o "Dollar américain ($)" en francés, adaptándose automáticamente a la configuración regional del usuario.