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) in verschiedenen Sprachen erheblich. Eine einfache Zeichenkettenverkettung (z.B. '2' + ' ' + 'Tage zuvor') erzeugt keine grammatikalisch korrekte 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') und formatiert diese automatisch in eine sprachspezifische, grammatikalisch korrekte Zeichenkette wie 'vor 2 Tagen', 'hace 2 días' oder 'gestern'.

Schritte

1. Erstellen einer Client-Komponente für relative Zeit

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" erlaubt "gestern" oder "morgen"
      style="long"
    />
  );
}

2. Formatierungsoptionen übergeben

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 der Bibliothek, Wörter wie "gestern" oder "morgen" anstelle von "vor 1 Tag" oder "in 1 Tag" zu verwenden.

3. Verwenden der Komponente auf einer Seite

Sie können diese Komponente jetzt 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".