Как отображать информацию о валюте в Next.js (Pages Router) v16

Проблема

Приложениям часто нужно показывать информацию о валюте без отображения фактической цены. Например, селектор валют может перечислять доступные валюты, в документации могут упоминаться курсы обмена, а в платёжной форме — указываться, какие валюты принимаются. Просто показывать «USD» — непонятно для нетехнических пользователей, а жёстко прописывать «доллар США» требует ручного перевода и поддержки. Символы валют, такие как «$», неоднозначны — этот символ используют доллары США, Канады и Австралии. Подходящее отображение зависит и от контекста, и от языка пользователя.

Решение

Используйте возможности форматирования react-intl, чтобы показывать информацию о валюте в нужном формате для вашего контекста. Для полного названия валюты используйте formatDisplayName с типом валюты — это автоматически локализует названия вроде «доллар США» на язык пользователя. Для символов используйте Intl.NumberFormat с formatToParts, чтобы получить локализованный символ по коду валюты. Для ISO-кодов просто выводите сам код. Такой подход делает ссылки на валюты понятными и локализованными без ручного перевода.

Шаги

1. Создайте хелпер для извлечения символов валют

Используйте Intl.NumberFormat с formatToParts, чтобы получить символ валюты из отформатированного числа.

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

Опция currencyDisplay управляет формой: «symbol», «narrowSymbol», «code» или «name». Этот хелпер возвращает локализованный символ для любого кода валюты.

2. Создайте компонент для отображения валюты

Соберите компонент, который показывает информацию о валюте в разных форматах в зависимости от режима отображения.

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

Метод formatDisplayName с type: 'currency' возвращает локализованное название валюты. Компонент адаптирует вывод в зависимости от свойства display.

3. Используйте компонент в разных контекстах

Применяйте компонент отображения валюты там, где нужно показать информацию о валюте без цен.

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

Это отображает локализованные названия валют с их символами, например, «Доллар США ($)» на английском или «Dollar américain ($)» на французском, автоматически подстраиваясь под язык пользователя.