# General Translation Changelog: gt-next 6.15.0: すべてのReactパッケージに対応した`<RelativeTime>`
URL: https://generaltranslation.com/ja/blog/gt-next_v6_15_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Archie McKenzie
Published: 2026-04-01

## 概要

新しい [`<RelativeTime>`](/docs/react/reference/components/relative-time) コンポーネントが、すべての GT React パッケージで利用できるようになりました。ブラウザーに組み込まれている `Intl.RelativeTimeFormat` API を使用して、&quot;2 hours ago&quot; や &quot;in 3 days&quot; のようなローカライズされた相対時間文字列をレンダリングします。

| パッケージ                | バージョン   | エクスポート                                                                                                                           |
| -------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `gt-next`            | 6.15.0  | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (クライアント + サーバー)                                               |
| `gt-react`           | 10.16.0 | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (クライアント)                                                      |
| `gt-tanstack-start`  | 0.3.0   | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (クライアント)                                                      |
| `generaltranslation` | 8.2.0   | [`formatRelativeTimeFromDate()`](/docs/platform/core/reference/utility-functions/formatting/format-relative-time-from-date) (コア) |
| `gt` (CLI)           | 2.14.0  | [`RelativeTime`](/docs/react/reference/components/relative-time) コンポーネントの検出                                                      |

## 使い方

### Date から単位を自動選択

`Date` を渡すと、コンポーネントが最適な単位 (秒、分、時間、日、週、月、年) を自動的に選択します。

```tsx
import { RelativeTime } from 'gt-next';

export default function PostTimestamp({ post }) {
  return <RelativeTime>{post.createdAt}</RelativeTime>;
  // "2時間前"、"3日前"、"5分後" など
}
```


### 明示的な値と単位

`Intl.RelativeTimeFormat` に直接対応する形で、正確な値と単位を指定します。

```tsx
import { RelativeTime } from 'gt-next';

export default function Reminder() {
  return (
    <p>
      Your trial ends <RelativeTime value={3} unit="day" />.
    </p>
  );
  // "トライアルは3日後に終了します。"
}
```


### 翻訳対象のコンテンツ内

[`<RelativeTime>`](/docs/react/reference/components/relative-time) を翻訳文に含めるには、[`<T>`](/docs/react/reference/components/t) コンポーネントで囲みます。

```tsx
import { T, RelativeTime } from 'gt-next';

export default function Comment({ comment }) {
  return (
    <T id="commentPosted">
      Posted <RelativeTime>{comment.createdAt}</RelativeTime>
    </T>
  );
}
```

### コア関数

コンポーネント以外のコンテキストでは、スタンドアロン関数を使用します。

```ts
import { formatRelativeTimeFromDate } from 'generaltranslation';

const label = formatRelativeTimeFromDate(someDate, {
  locales: ['en-US'],
  baseDate: new Date(),
});
// "2時間前"
```


## ハイドレーションの安全性

[`<RelativeTime>`](/docs/react/reference/components/relative-time) は相対時間をローカルで計算するため、サーバーレンダリングされたアプリではハイドレーションの不整合が発生することがあります。サーバーとクライアントの同期を保つため、`baseDate` と `locales` を固定してください。

```tsx
const now = new Date();

<RelativeTime baseDate={now} locales={['en-US']}>
  {post.createdAt}
</RelativeTime>
```

## リンク

* [PR #1153 — feat: `<RelativeTime>` コンポーネントの追加](https://github.com/generaltranslation/gt/pull/1153)
* [`<RelativeTime>` docs](/docs/react/reference/components/relative-time)

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.