Wie man Datumsangaben für verschiedene Locales in Next.js (Pages Router) v16 formatiert

Problem

Datumsangaben haben kein universelles schriftliches Format. Die Sequenz 10/12/2025 bedeutet in den Vereinigten Staaten den 12. Oktober, im Vereinigten Königreich jedoch den 10. Dezember. Die Schreibweise "Oct 12, 2025" setzt englische Monatsnamen und eine bestimmte Reihenfolge voraus. Jede Region hat ihre eigenen Erwartungen an das Datumsformat, einschließlich der Reihenfolge der Komponenten, Trennzeichen und ob Monatsnamen als Wörter oder Zahlen erscheinen.

Wenn Datumsangaben in einem einzigen Format angezeigt werden, wirkt die Anwendung für Benutzer außerhalb der Region dieses Formats fremd. Benutzer könnten Datumsangaben falsch interpretieren oder sie schwerer lesbar finden. Ein Datum, das für eine Zielgruppe klar ist, kann für eine andere verwirrend oder mehrdeutig sein.

Lösung

Formatieren Sie Datumsangaben basierend auf dem Gebietsschema des Benutzers und wandeln Sie Datumswerte in Zeichenketten um, die den regionalen Regeln für Reihenfolge, Trennzeichen und Monatsnamen folgen. Die Intl.DateTimeFormat-API des Browsers übernimmt die gebietsschemaspezifischen Formatierungsregeln automatisch, wenn ein Gebietsschema und optionale Formatierungseinstellungen angegeben werden.

react-intl bietet Komponenten und Hooks, die diese API umschließen und in den Gebietsschema-Kontext der Anwendung integrieren. Durch die Übergabe von Datumswerten und Formatierungsoptionen an diese Tools werden Datumsangaben auf eine Weise dargestellt, die für die Sprache und Region des Benutzers sowohl klar als auch natürlich ist.

Schritte

1. Erstellen einer Datumsformatierungskomponente mit FormattedDate

Die FormattedDate-Komponente akzeptiert einen Datumswert und Formatierungsoptionen, die mit Intl.DateTimeFormatOptions konform sind. Erstellen Sie eine Komponente, die ein Datum mit dem gewünschten Detailgrad anzeigt.

import { FormattedDate } from "react-intl";

interface EventDateProps {
  date: Date;
}

export function EventDate({ date }: EventDateProps) {
  return (
    <time dateTime={date.toISOString()}>
      <FormattedDate value={date} year="numeric" month="long" day="numeric" />
    </time>
  );
}

FormattedDate liest das Gebietsschema aus dem IntlProvider-Kontext und formatiert das Datum entsprechend. Die Komponente zeigt "October 12, 2025" für en-US und "12 October 2025" für en-GB an.

2. Formatieren von Datumsangaben imperativ mit useIntl

Für Fälle, in denen keine React-Komponente verwendet werden kann, wie z.B. beim Setzen von Textattributen, verwenden Sie den useIntl-Hook, um auf die formatDate-Methode zuzugreifen.

import { useIntl } from "react-intl";

interface ArticleImageProps {
  src: string;
  publishedAt: Date;
}

export function ArticleImage({ src, publishedAt }: ArticleImageProps) {
  const intl = useIntl();

  const formattedDate = intl.formatDate(publishedAt, {
    year: "numeric",
    month: "short",
    day: "numeric",
  });

  return <img src={src} alt={`Artikel veröffentlicht am ${formattedDate}`} />;
}

Die formatDate-Methode gibt eine formatierte Datumszeichenfolge zurück und akzeptiert Optionen, die mit DateTimeFormatOptions konform sind. Dieser Ansatz ist nützlich für Attribute, serverseitigen Code oder leistungskritische Szenarien.

3. Anpassen der Formatierungsdetails mit Standardoptionen

Steuern Sie die Darstellung von Datumskomponenten, indem Sie Optionen wie year, month, day und weekday mit Werten wie "numeric", "2-digit", "long", "short" oder "narrow" angeben.

import { FormattedDate } from "react-intl";

export function FullEventDate({ date }: { date: Date }) {
  return (
    <FormattedDate
      value={date}
      weekday="long"
      year="numeric"
      month="long"
      day="numeric"
    />
  );
}

export function CompactDate({ date }: { date: Date }) {
  return (
    <FormattedDate value={date} year="2-digit" month="2-digit" day="2-digit" />
  );
}

Die FullEventDate-Komponente rendert "Monday, October 12, 2025" in en-US und "Montag, 12. Oktober 2025" in de-DE. Die CompactDate-Komponente erzeugt kürzere numerische Formate, die für Tabellen oder kompakte Layouts geeignet sind.

4. Erstellen eines wiederverwendbaren Datumsformatierers

Für eine konsistente Datumsformatierung über mehrere Seiten hinweg erstellen Sie eine Hilfsfunktion, die gängige Formatierungsmuster kapselt.

import { useIntl } from "react-intl";

export function useDateFormatters() {
  const intl = useIntl();

  return {
    formatShortDate: (date: Date) =>
      intl.formatDate(date, {
        year: "numeric",
        month: "short",
        day: "numeric",
      }),

    formatLongDate: (date: Date) =>
      intl.formatDate(date, {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric",
      }),

    formatMonthYear: (date: Date) =>
      intl.formatDate(date, {
        year: "numeric",
        month: "long",
      }),
  };
}

Importieren und verwenden Sie diesen Hook in jeder Seitenkomponente, um Datumsangaben konsistent zu formatieren, ohne Optionen zu wiederholen.

5. Verwenden des Helpers in einer Seitenkomponente

Wenden Sie den Datumsformatierer-Helper in einer Next.js-Seite an, um sprachabhängige Datumsangaben anzuzeigen.

import { GetStaticProps } from "next";
import { useDateFormatters } from "../lib/useDateFormatters";

interface Post {
  title: string;
  publishedAt: string;
  content: string;
}

interface BlogPostPageProps {
  post: Post;
}

export default function BlogPostPage({ post }: BlogPostPageProps) {
  const { formatLongDate } = useDateFormatters();
  const publishedDate = new Date(post.publishedAt);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>Published: {formatLongDate(publishedDate)}</p>
      <div>{post.content}</div>
    </article>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const post = {
    title: "Understanding Internationalization",
    publishedAt: "2025-10-12T00:00:00Z",
    content: "Content here...",
  };

  return {
    props: { post },
  };
};

Die Seite zeigt das Veröffentlichungsdatum im Locale-Format des Benutzers an, wodurch das Datum für Leser in jeder Region sofort verständlich und vertraut wird.