相対時刻のフォーマット

問題

アプリケーションが「2日前に投稿」のようなタイムスタンプを表示します。これは英語では明確ですが、「2日前」と「2日後」（過去と未来）のロジックと文法は言語によって大きく異なります。単純な文字列連結（例：「2」+「 」+「日前」）では、文法的に正しい出力を生成できません。

解決策

react-intlのFormattedRelativeTimeのような専用コンポーネントを使用します。このコンポーネントは数値（例：-2）と単位（例：「day」）を受け取り、「2日前」、「hace 2 días」、「gestern」（昨日）などのロケールに対応した文法的に正しい文字列に自動的にフォーマットします。

手順

1. 相対時刻用のクライアントコンポーネントを作成する

FormattedRelativeTimeコンポーネントは、クライアントコンポーネント内で使用する必要があります。

新しいファイルapp/components/RelativeTime.tsxを作成します。

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

import { FormattedRelativeTime } from 'react-intl';

type Props = {
  value: number;
  unit: Intl.RelativeTimeFormatUnit;
};

export default function RelativeTime({ value, unit }: Props) {
  return (
    <FormattedRelativeTime
      value={value}
      unit={unit}
      numeric="auto" // "auto" allows "yesterday" or "tomorrow"
      style="long"
    />
  );
}

2. フォーマットオプションを渡す

FormattedRelativeTimeコンポーネントは、いくつかの重要なプロパティを受け取ります：

• value：単位の数。負の値（例：-2）は過去（「2日前」）を示し、正の値（2）は未来（「2日後」）を示します。
• unit：「day」、「hour」、「minute」、「second」などの時間の単位。
• numeric="auto"：これにより、ライブラリは「1日前」や「1日後」の代わりに「昨日」や「明日」のような言葉を使用できます。

3. ページでコンポーネントを使用する

このコンポーネントは、任意のページで使用できます。プロパティを渡す前に時間差を計算する責任があります。

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

export default function Home() {
  // You would calculate these values dynamically
  const daysSinceUpdate = -2;
  const hoursUntilEvent = 3;

  return (
    <div>
      <h1>Updates</h1>
      <p>
        File updated: <RelativeTime value={daysSinceUpdate} unit="day" />
      </p>
      <p>
        Event starts: <RelativeTime value={hoursUntilEvent} unit="hour" />
      </p>
    </div>
  );
}

/enにアクセスしたユーザーには「File updated: 2 days ago」と「Event starts: in 3 hours」が表示されます。/esにアクセスしたユーザーには「File updated: hace 2 días」と「Event starts: dentro de 3 horas」が表示されます。