숫자 형식 지정 - Next.js i18n

문제

10000.5와 같은 큰 숫자는 독일에서는 10.000,5로, 미국에서는 10,000.5로 표기됩니다. 한 지역의 표기 규칙을 사용하여 숫자를 표시하면 다른 지역의 사용자가 잘못된 소수점 및 그룹 구분 기호로 인해 값을 잘못 해석할 수 있어 혼란을 초래합니다.

해결 방법

react-intl의 FormattedNumber와 같은 전용 포맷팅 컴포넌트를 사용하세요. 이 컴포넌트는 프로바이더로부터 현재 언어를 자동으로 읽어 number 원시 타입을 올바른 로케일별 소수점 및 그룹 구분 기호를 사용하는 문자열로 포맷합니다.

단계

1. 숫자용 클라이언트 컴포넌트 생성

다른 react-intl 컴포넌트와 마찬가지로 FormattedNumber는 클라이언트 컴포넌트 내에서 사용해야 합니다.

포맷된 숫자를 표시할 새 컴포넌트 app/components/ProductInfo.tsx를 생성하세요.

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

import { FormattedNumber } of 'react-intl';

type Props = {
  reviewCount: number;
  averageRating: number;
};

export default function ProductInfo({ reviewCount, averageRating }: Props) {
  return (
    <div>
      <h3>Product details</h3>
      <p>
        Total reviews:
        {/* Basic number formatting */}
        <FormattedNumber value={reviewCount} />
      </p>
      <p>
        Average rating:
        {/* Formatting with options */}
        <FormattedNumber
          value={averageRating}
          minimumFractionDigits={1}
          maximumFractionDigits={1}
        />
      </p>
    </div>
  );
}

2. 형식 지정 옵션 전달

FormattedNumber 컴포넌트는 출력을 제어하는 옵션을 허용합니다:

value는 포맷할 number입니다.
minimumFractionDigits 및 maximumFractionDigits는 소수점 한 자리를 강제로 표시하는 데 사용됩니다(예: 4.0).

3. 페이지에서 컴포넌트 사용

이제 제품 정보를 표시하는 모든 페이지에서 이 컴포넌트를 사용할 수 있습니다.

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

export default function Home() {
  const product = {
    reviews: 1234567,
    rating: 4.0,
  };

  return (
    <div>
      <h1>Welcome</h1>
      <ProductInfo
        reviewCount={product.reviews}
        averageRating={product.rating}
      />
    </div>
  );
}

/en를 방문하는 사용자는 "Total reviews: 1,234,567" 및 "Average rating: 4.0"을 보게 됩니다. /es를 방문하는 사용자는 "Total reviews: 1.234.567" 및 "Average rating: 4,0"을 보게 됩니다.