# General Translation Changelog: gt-next 6.15.0: `<RelativeTime>` dans tous les package React
URL: https://generaltranslation.com/fr/blog/gt-next_v6_15_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Archie McKenzie
Published: 2026-04-01

## Vue d’ensemble

Un nouveau composant [`<RelativeTime>`](/docs/react/reference/components/relative-time) est désormais disponible dans tous les packages React de GT. Il affiche des expressions de temps relatif localisées, comme « il y a 2 heures » ou « dans 3 jours », à l’aide de l’API `Intl.RelativeTimeFormat` intégrée au navigateur.

| Package              | Version | Export                                                                                                                             |
| -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `gt-next`            | 6.15.0  | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (client + serveur)                                              |
| `gt-react`           | 10.16.0 | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (client)                                                        |
| `gt-tanstack-start`  | 0.3.0   | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (client)                                                        |
| `generaltranslation` | 8.2.0   | [`formatRelativeTimeFromDate()`](/docs/platform/core/reference/utility-functions/formatting/format-relative-time-from-date) (core) |
| `gt` (CLI)           | 2.14.0  | détection du composant [`RelativeTime`](/docs/react/reference/components/relative-time)                                            |

## Utilisation

### Sélection automatique de l’unité à partir d’une Date

Passez une `Date` et le composant sélectionne automatiquement l’unité la plus appropriée (secondes, minutes, heures, jours, semaines, mois ou années).

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

export default function PostTimestamp({ post }) {
  return <RelativeTime>{post.createdAt}</RelativeTime>;
  // "il y a 2 heures", "il y a 3 jours", "dans 5 minutes", etc.
}
```


### Valeur et unité explicites

Spécifiez une valeur et une unité exactes, comme dans `Intl.RelativeTimeFormat`.

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

export default function Reminder() {
  return (
    <p>
      Your trial ends <RelativeTime value={3} unit="day" />.
    </p>
  );
  // "Votre essai se termine dans 3 jours."
}
```


### Dans le contenu traduit

Encapsulez [`<RelativeTime>`](/docs/react/reference/components/relative-time) dans un composant [`<T>`](/docs/react/reference/components/t) pour l’inclure dans des phrases traduites.

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

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

### Fonction principale

En dehors des composants, utilisez la fonction autonome :

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

const label = formatRelativeTimeFromDate(someDate, {
  locales: ['en-US'],
  baseDate: new Date(),
});
// "il y a 2 heures"
```


## Sécurité de l’hydratation

[`<RelativeTime>`](/docs/react/reference/components/relative-time) calcule le temps relatif localement, ce qui peut provoquer des incohérences d’hydratation dans les applications rendues côté serveur. Fixez `baseDate` et `locales` pour garder le serveur et le client synchronisés :

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

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

## Liens

* [PR #1153 — feat : ajouter le composant `<RelativeTime>`](https://github.com/generaltranslation/gt/pull/1153)
* [docs de `<RelativeTime>`](/docs/react/reference/components/relative-time)

## Sitemap

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