価格のフォーマット

問題

価格を表示するには、数値と通貨の両方が必要です。米国の価格は$1,200.50ですが、ドイツでは同じ値がユーロで1 200,50 €となる場合があります。通貨記号の位置、小数点区切り文字、桁区切り文字はすべて変化し、すべての言語に対してこれらのルールをハードコーディングすることは管理不可能です。

解決策

react-intlのFormattedNumberコンポーネントを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: 3文字の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 €」が表示されます。