# General Translation Changelog: gt-next 6.15.0: `<RelativeTime>` во всех React-пакетах
URL: https://generaltranslation.com/ru/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) теперь доступен во всех React-пакетах GT. Он отображает локализованные значения относительного времени, например &quot;2 часа назад&quot; или &quot;через 3 дня&quot;, с помощью встроенного браузерного API `Intl.RelativeTimeFormat`.

| Пакет                | Версия  | Экспорт                                                                                                                            |
| -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `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: add компонент `<RelativeTime>`](https://github.com/generaltranslation/gt/pull/1153)
* [Документация по `<RelativeTime>`](/docs/react/reference/components/relative-time)

## Sitemap

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