Форматирование цен

Проблема

Отображение цены включает и число, и валюту. Цена в США — это $1,200.50, а та же сумма в евро в Германии будет 1 200,50 €. Положение символа валюты, разделитель дробной части и разделитель групп разрядов различаются, и прописывать эти правила вручную для каждого языка невозможно.

Решение

Используйте компонент FormattedNumber из react-intl с опцией style: 'currency'. Этот компонент получает текущую локаль из своего провайдера и форматирует число как цену, автоматически расставляя символы, разделители и группы в зависимости от локали и выбранной валюты.

Шаги

1. Создайте клиентский компонент для цен

Форматирующие компоненты из react-intl должны использоваться только внутри клиентских компонентов.

Создайте новый компонент app/components/ProductPrice.tsx.

// app/components/ProductPrice.tsx
'use client';

import { FormattedNumber } from 'react-intl';

type Props = {
  price: number;
  currencyCode: string; // e.g., "USD", "EUR", "JPY"
};

export default function ProductPrice({ price, currencyCode }: Props) {
  return (
    <FormattedNumber
      value={price}
      style="currency"
      currency={currencyCode}
    />
  );
}

2. Передайте параметры форматирования

Компонент FormattedNumber управляется следующими пропсами:

• value: числовое значение цены.
• style: 'currency': указывает компоненту форматировать число как валюту, а не как обычное десятичное число.
• currency: трёхбуквенный код валюты по ISO (например, 'USD', 'EUR'). Обязателен при использовании style: 'currency'.

3. Используйте компонент на странице

Теперь вы можете использовать этот компонент в серверных или клиентских компонентах для отображения цен.

// app/[lang]/page.tsx
import ProductPrice from '@/app/components/ProductPrice';

export default function Home() {
  const product = {
    price: 1299.99,
    currency: 'USD',
  };

  const productInEuros = {
    price: 1199.5,
    currency: 'EUR',
  };

  return (
    <div>
      <h1>Product</h1>
      <p>
        Price (USD): <ProductPrice price={product.price} currencyCode={product.currency} />
      </p>
      <p>
        Price (EUR): <ProductPrice price={productInEuros.price} currencyCode={productInEuros.currency} />
      </p>
    </div>
  );
}

Пользователь, который зайдёт на /en, увидит «Price (USD): $1,299.99» и «Price (EUR): €1,199.50». А пользователь на /es увидит «Price (USD): 1299,99 US$» и «Price (EUR): 1199,50 €».