So formatieren Sie Datumsangaben für verschiedene Gebietsschemata in Next.js (Pages Router) v16

Problem

Datumsangaben haben kein universelles Schreibformat. Die Sequenz 10/12/2025 bedeutet 12. Oktober in den Vereinigten Staaten, aber 10. Dezember im Vereinigten Königreich. Die Schreibweise "Oct 12, 2025" setzt englische Monatsnamen und eine bestimmte Reihenfolgekonvention 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.

Die Anzeige von Datumsangaben in einem einzigen Format lässt die Anwendung für Benutzer außerhalb der Region dieses Formats fremd wirken. Benutzer können 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 Zeichenfolgen um, die regionalen Regeln für Reihenfolge, Trennzeichen und Monatsnamen folgen. Die Intl.DateTimeFormat-API des Browsers verarbeitet 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 Gebietsschemakontext der Anwendung integrieren. Durch Übergabe von Datumswerten und Formatierungsoptionen an diese Tools werden Datumsangaben auf eine Weise gerendert, die sowohl klar als auch natürlich für die Sprache und Region des Benutzers ist.

Schritte

1. Erstellen Sie eine Datumsformatierungskomponente mit FormattedDate

Die FormattedDate-Komponente akzeptiert einen Datumswert und Formatierungsoptionen, die Intl.DateTimeFormatOptions entsprechen. 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 "12. Oktober 2025" für de-DE und "October 12, 2025" für en-US an.

2. Datumsangaben imperativ mit useIntl formatieren

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={`Article published on ${formattedDate}`} />;
}

Die formatDate-Methode gibt einen formatierten Datumsstring zurück und akzeptiert Optionen, die DateTimeFormatOptions entsprechen. Dieser Ansatz ist nützlich für Attribute, serverseitigen Code oder leistungskritische Szenarien.

3. Formatierungsdetails mit Standardoptionen anpassen

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. Eine wiederverwendbare Datumsformatierer-Hilfsfunktion erstellen

Erstellen Sie für eine konsistente Datumsformatierung über mehrere Seiten hinweg 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. Die Hilfsfunktion in einer Seitenkomponente verwenden

Wenden Sie die Datumsformatierer-Hilfsfunktion in einer Next.js-Seite an, um locale-bewusste 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 klar und vertraut wird.