# gt-next: General Translation Next.js SDK: RelativeTime
URL: https://generaltranslation.com/it/docs/next/api/components/relativetime.mdx
---
title: RelativeTime
description: Riferimento API per il componente RelativeTime
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica invece il template in content/docs-templates/. */}


## Panoramica

Il componente `<RelativeTime>` esegue il rendering di una stringa localizzata di tempo relativo, come &quot;2 ore fa&quot; o &quot;tra 3 giorni&quot;.
Supporta due modalità di utilizzo: seleziona automaticamente l&#39;unità più adatta a partire da un `Date`, oppure consente di specificare esplicitamente un valore e un&#39;unità.

```jsx
<RelativeTime>{someDate}</RelativeTime>
// Output: "2 ore fa"
```

Tutta la formattazione viene gestita localmente tramite l&#39;API [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).

<Callout type="warn">
  `<RelativeTime>` può causare **errori di idratazione** nelle app con rendering lato server. Vedi [Come evitare gli errori di idratazione](#avoiding-hydration-errors) più sotto.
</Callout>


## Riferimento

### Props

<TypeTable
  type={{
  "children?": {
      description: 'Un oggetto Date da cui calcolare il tempo relativo.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "date?": {
      description: 'Un oggetto Date da cui calcolare il tempo relativo. Ha la precedenza su children.',
      type: 'Date',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      description: 'Valore numerico esplicito per il tempo relativo. Richiede unit.',
      type: 'number',
      optional: true,
      default: 'undefined',
  },
  "unit?": {
      description: "L'unità di tempo. Obbligatoria quando si usa value.",
      type: 'Intl.RelativeTimeFormatUnit',
      optional: true,
      default: 'undefined',
  },
  "baseDate?": {
      description: 'Data di riferimento per calcolare il tempo relativo. Per impostazione predefinita usa new Date() al momento del rendering.',
      type: 'Date',
      optional: true,
      default: 'new Date()',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.RelativeTimeFormatOptions',
      optional: true,
      default: "{ numeric: 'auto', style: 'long' }",
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descrizione

| Nome della prop | Descrizione                                                                                                                                                                                                                                                                                                                                                   |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`      | Un oggetto `Date`. Il componente seleziona automaticamente l&#39;unità più adatta (secondi, minuti, ore, giorni, settimane, mesi o anni) e formatta il tempo relativo rispetto a `baseDate`.                                                                                                                                                                  |
| `date`          | Un oggetto `Date` da cui calcolare il tempo relativo. Se vengono forniti sia `date` che `children`, `date` ha la precedenza.                                                                                                                                                                                                                                  |
| `value`         | Un valore numerico esplicito per il tempo relativo (ad esempio `-1` per &quot;ieri&quot;). Deve essere usato insieme a `unit`.                                                                                                                                                                                                                                |
| `unit`          | L&#39;unità di tempo (ad esempio `'second'`, `'minute'`, `'hour'`, `'day'`, `'week'`, `'month'`, `'year'`). Obbligatoria quando si usa `value`.                                                                                                                                                                                                               |
| `baseDate`      | La data di riferimento per calcolare il tempo relativo. Per impostazione predefinita è `new Date()` al momento del rendering. **Imposta esplicitamente questo valore per evitare errori di idratazione** — vedi [sotto](#avoiding-hydration-errors).                                                                                                          |
| `options`       | Opzioni di formattazione facoltative conformi alla specifica [`Intl.RelativeTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). Per impostazione predefinita, usa `numeric: 'auto'` e `style: 'long'`.                                                                             |
| `locales`       | Impostazioni regionali facoltative per specificare l&#39;impostazione regionale di formattazione. Se non vengono fornite, viene usata l&#39;impostazione regionale dell&#39;utente. Leggi di più su come specificare le impostazioni regionali [qui](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument). |

### Restituisce

`JSX.Element` contenente il tempo relativo formattato sotto forma di stringa, oppure `null` se non viene fornita alcuna data o valore.

***

## Esempi

### Selezione automatica dell&#39;unità a partire da una Date

Passa un `Date` come elemento figlio e il componente seleziona automaticamente l&#39;unità più adatta.

```jsx title="PostTimestamp.jsx" copy
import { RelativeTime } from 'gt-next';

export default function PostTimestamp({ post }) {
    return (
        <RelativeTime>{post.createdAt}</RelativeTime> // [!code highlight]
    );
    // Output: "2 ore fa", "3 giorni fa", "tra 5 minuti", ecc.
}
```


### Uso della prop `date`

Puoi anche passare la data tramite la prop `date` invece di `children`.

```jsx title="PostTimestamp.jsx" copy
import { RelativeTime } from 'gt-next';

export default function PostTimestamp({ post }) {
    return (
        <RelativeTime date={post.createdAt} /> // [!code highlight]
    );
}
```


### Valore e unità espliciti

Specifica un valore e un&#39;unità esatti, come nell&#39;API `Intl.RelativeTimeFormat`.

```jsx title="Reminder.jsx" copy
import { RelativeTime } from 'gt-next';

export default function Reminder() {
    return (
        <p>
            Your trial ends <RelativeTime value={3} unit="day" />. // [!code highlight]
        </p>
    );
    // Output: "La tua prova termina tra 3 giorni."
}
```


### Specificare le impostazioni regionali

Visualizza il tempo relativo per una specifica impostazione regionale.

```jsx title="FrenchTimestamp.jsx" copy
import { RelativeTime } from 'gt-next';

export default function FrenchTimestamp({ date }) {
    return (
        <RelativeTime locales={['fr-FR']}>{date}</RelativeTime> // [!code highlight]
    );
    // Output: "il y a 2 heures"
}
```


### Tradurre RelativeTime

Avvolgi `<RelativeTime>` in un componente `<T>` per includerlo in una frase tradotta.

```jsx title="Comment.jsx" copy
import { T, RelativeTime } from 'gt-next';

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


### Opzioni di formattazione personalizzate

Controlla il formato di output con le opzioni di `Intl.RelativeTimeFormat`.

```jsx title="NumericTimestamp.jsx" copy
import { RelativeTime } from 'gt-next';

export default function NumericTimestamp({ date }) {
    return (
        <RelativeTime
            options={{
                numeric: 'always', // [!code highlight]
                style: 'narrow', // [!code highlight]
            }}
        >
            {date}
        </RelativeTime>
    );
    // Con numeric: 'always', restituisce "1 giorno fa" invece di "ieri"
}
```

***


## Evitare gli errori di idratazione

Poiché `<RelativeTime>` calcola il tempo relativo localmente, può produrre **output diversi lato server e lato client**. Quando React confronta l&#39;HTML renderizzato sul server con il rendering del client e i due non corrispondono, si verifica un errore di idratazione.

In genere questo accade quando:

* **`baseDate` usa `new Date()` come valore predefinito al momento del rendering.** Il server esegue il rendering in un dato momento, poi il client esegue l&#39;idratazione alcuni secondi (o più) dopo. Se il tempo relativo passa all&#39;unità successiva tra questi due momenti (ad esempio, &quot;59 seconds ago&quot; → &quot;1 minute ago&quot;), l&#39;output non corrisponderà.
* **L&#39;impostazione regionale predefinita è diversa nei vari ambienti.** Se l&#39;impostazione regionale predefinita del server non corrisponde a quella del client, la stringa formattata potrebbe essere diversa (ad esempio, &quot;hace 2 horas&quot; vs &quot;2 hours ago&quot;).

### Come risolvere

**Imposta un `baseDate` esplicito** per garantire che server e client calcolino lo stesso tempo relativo:

```jsx
const now = new Date(); // calcolato una volta, passato sia al server che al client

<RelativeTime baseDate={now}>{post.createdAt}</RelativeTime>
```

**Specifica `locales` in modo esplicito** per evitare discrepanze tra impostazioni regionali:

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

Fissando sia l&#39;impostazione regionale sia la data di riferimento, il server e il client produrranno sempre la stessa stringa formattata.


## Note

* Il componente `<RelativeTime>` è un componente variabile che formatta valori temporali relativi.
* Quando usi la modalità automatica (con un `Date`), il componente seleziona automaticamente l&#39;unità più appropriata.
* Il componente usa [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat) internamente.
* Le opzioni di formattazione predefinite sono `numeric: 'auto'` e `style: 'long'`.

## Passaggi successivi

* Per maggiori dettagli ed esempi d&#39;uso del componente `<RelativeTime>` e di altri componenti variabili come `<DateTime>`, `<Currency>`, `<Num>` e `<Var>`, consulta la documentazione [Utilizzo dei componenti variabili](/docs/next/guides/variables).