Formatierung relativer Zeitangaben

Problem

Eine Anwendung zeigt einen Zeitstempel wie "Vor 2 Tagen gepostet" an. Während dies im Englischen klar ist, unterscheiden sich die Logik und Grammatik für "vor 2 Tagen" gegenüber "in 2 Tagen" (Vergangenheit vs. Zukunft) erheblich zwischen den Sprachen. Eine einfache String-Verkettung (z. B. "2" + " " + "Tage her") führt nicht zu grammatikalisch korrekter Ausgabe.

Lösung

Verwenden Sie eine dedizierte Komponente wie FormattedRelativeTime aus react-intl. Diese Komponente nimmt einen numerischen Wert (z. B. -2) und eine Einheit (z. B. "day") entgegen und formatiert diese automatisch in einen sprachbewussten, grammatikalisch korrekten String wie "vor 2 Tagen", "hace 2 días" oder "gestern".

Schritte

1. Erstellen Sie eine Client-Komponente für relative Zeitangaben

Die FormattedRelativeTime-Komponente muss innerhalb einer Client-Komponente verwendet werden.

Erstellen Sie eine neue Datei 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" allows "yesterday" or "tomorrow"
      style="long"
    />
  );
}

2. Übergeben Sie Formatierungsoptionen

Die FormattedRelativeTime-Komponente akzeptiert mehrere wichtige Props:

• value: Die Anzahl der Einheiten. Ein negativer Wert (z. B. -2) zeigt die Vergangenheit an ("vor 2 Tagen"), und ein positiver Wert (2) zeigt die Zukunft an ("in 2 Tagen").
• unit: Die Zeiteinheit, wie "day", "hour", "minute" oder "second".
• numeric="auto": Dies ermöglicht es der Bibliothek, Wörter wie "gestern" oder "morgen" anstelle von "vor 1 Tag" oder "in 1 Tag" zu verwenden.

3. Verwenden Sie die Komponente auf einer Seite

Sie können diese Komponente nun auf jeder Seite verwenden. Sie sind dafür verantwortlich, die Zeitdifferenz zu berechnen, bevor Sie die Props übergeben.

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

Ein Benutzer, der /en besucht, sieht „File updated: 2 days ago" und „Event starts: in 3 hours". Ein Benutzer, der /es besucht, sieht „File updated: hace 2 días" und „Event starts: dentro de 3 horas".