Formatage des temps relatifs

Problème

Une application affiche un horodatage comme 'Publié il y a 2 jours.' Bien que ce soit clair en anglais, la logique et la grammaire pour 'il y a 2 jours' par rapport à 'dans 2 jours' (passé vs futur) diffèrent considérablement selon les langues. Une simple concaténation de chaînes (par exemple, '2' + ' ' + 'jours auparavant') ne produit pas un résultat grammaticalement correct.

Solution

Utilisez un composant dédié comme FormattedRelativeTime de react-intl. Ce composant prend une valeur numérique (par exemple, -2) et une unité (par exemple, 'day'), et la formate automatiquement en une chaîne adaptée à la locale et grammaticalement correcte comme 'il y a 2 jours', 'hace 2 días', ou 'gestern' (hier).

Étapes

1. Créer un composant client pour le temps relatif

Le composant FormattedRelativeTime doit être utilisé à l'intérieur d'un composant client.

Créez un nouveau fichier 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" permet "hier" ou "demain"
      style="long"
    />
  );
}

2. Passer les options de formatage

Le composant FormattedRelativeTime accepte plusieurs propriétés clés :

• value : Le nombre d'unités. Une valeur négative (par exemple, -2) indique le passé ("il y a 2 jours"), et une valeur positive (2) indique le futur ("dans 2 jours").
• unit : L'unité de temps, comme 'day', 'hour', 'minute', ou 'second'.
• numeric="auto" : Cela permet à la bibliothèque d'utiliser des mots comme "hier" ou "demain" au lieu de "il y a 1 jour" ou "dans 1 jour".

3. Utiliser le composant sur une page

Vous pouvez maintenant utiliser ce composant sur n'importe quelle page. Vous êtes responsable du calcul de la différence de temps avant de passer les props.

// 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>
  );
}

Un utilisateur visitant /en verra "File updated: 2 days ago" et "Event starts: in 3 hours". Un utilisateur visitant /es verra "File updated: hace 2 días" et "Event starts: dentro de 3 horas".