How to display currency information in Next.js (Pages Router) v16

Problem

Applications often need to display currency information without showing an actual price. A currency selector might list available currencies, documentation might reference exchange rates, or a payment form might show which currencies are accepted. Simply displaying "USD" is cryptic for non-technical users, while hardcoding "US Dollar" requires manual translation and maintenance. Currency symbols like "$" are ambiguous—the same symbol represents US, Canadian, and Australian dollars. The appropriate representation depends on both the context and the user's language.

Solution

Use react-intl's formatting capabilities to display currency information in the format that matches your context. For full currency names, use formatDisplayName with the currency type, which automatically localizes names like "US Dollar" to the user's language. For symbols, use Intl.NumberFormat with formatToParts to extract the localized symbol for a given currency code. For ISO codes, display the code directly. This approach ensures currency references are both clear and properly localized without manual translation work.

Steps

1. Create a helper to extract currency symbols

Use Intl.NumberFormat with formatToParts to extract the currency symbol from a formatted number.

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

The currencyDisplay option controls the form: "symbol", "narrowSymbol", "code", or "name". This helper returns the localized symbol for any currency code.

2. Create a currency display component

Build a component that shows currency information in different formats based on the display mode.

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

The formatDisplayName method with type: 'currency' returns the localized currency name. The component adapts its output based on the display prop.

3. Use the component in different contexts

Apply the currency display component where you need to show currency information without prices.

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

This renders localized currency names with their symbols, such as "US Dollar ($)" in English or "Dollar américain ($)" in French, adapting automatically to the user's locale.