Comment formater les dates pour différentes locales dans Next.js (Pages Router) v16

Problème

Les dates n'ont pas de format écrit universel. La séquence 10/12/2025 signifie le 12 octobre aux États-Unis mais le 10 décembre au Royaume-Uni. Écrire « Oct 12, 2025 » suppose des noms de mois en anglais et une convention d'ordre particulière. Chaque région a ses propres attentes concernant le format de date, notamment l'ordre des composants, les séparateurs et si les noms de mois apparaissent sous forme de mots ou de chiffres.

Afficher les dates dans un format unique donne à l'application une impression étrangère pour les utilisateurs en dehors de la région de ce format. Les utilisateurs peuvent mal interpréter les dates ou les trouver plus difficiles à lire. Une date claire pour un public peut être confuse ou ambiguë pour un autre.

Solution

Formater les dates en fonction de la locale de l'utilisateur, en transformant les valeurs de date en chaînes qui suivent les règles régionales pour l'ordre, les séparateurs et les noms de mois. L'API Intl.DateTimeFormat du navigateur gère automatiquement les règles de formatage spécifiques à la locale lorsqu'on lui fournit une locale et des préférences de formatage optionnelles.

react-intl fournit des composants et des hooks qui encapsulent cette API et s'intègrent au contexte de locale de l'application. En passant des valeurs de date et des options de formatage à ces outils, les dates s'affichent d'une manière à la fois claire et naturelle pour la langue et la région de l'utilisateur.

Étapes

1. Créer un composant de formatage de date avec FormattedDate

Le composant FormattedDate accepte une valeur de date et des options de formatage conformes à Intl.DateTimeFormatOptions. Créez un composant qui affiche une date avec le niveau de détail souhaité.

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 lit la locale depuis le contexte IntlProvider et formate la date en conséquence. Le composant affichera « 12 octobre 2025 » pour fr-FR et « October 12, 2025 » pour en-US.

2. Formater les dates de manière impérative avec useIntl

Pour les cas où un composant React ne peut pas être utilisé, comme la définition d'attributs de texte, utilisez le hook useIntl pour accéder à la méthode formatDate.

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

La méthode formatDate renvoie une chaîne de date formatée et accepte des options conformes à DateTimeFormatOptions. Cette approche est utile pour les attributs, le code côté serveur ou les scénarios critiques en termes de performances.

3. Ajuster le niveau de détail du formatage avec les options standard

Contrôlez la présentation des composants de date en spécifiant des options telles que year, month, day et weekday avec des valeurs comme "numeric", "2-digit", "long", "short" ou "narrow".

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

Le composant FullEventDate affichera "Monday, October 12, 2025" en en-US et "Montag, 12. Oktober 2025" en de-DE. Le composant CompactDate produit des formats numériques plus courts adaptés aux tableaux ou aux mises en page compactes.

4. Créer une fonction d'aide de formatage de date réutilisable

Pour un formatage de date cohérent sur plusieurs pages, créez une fonction d'aide qui encapsule les modèles de formatage courants.

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",
      }),
  };
}

Importez et utilisez ce hook dans n'importe quel composant de page pour formater les dates de manière cohérente sans répéter les options.

5. Utiliser la fonction d'aide dans un composant de page

Appliquez la fonction d'aide de formatage de date dans une page Next.js pour afficher des dates adaptées à la locale.

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 },
  };
};

La page affichera la date de publication dans le format de la locale de l'utilisateur, rendant la date immédiatement claire et familière pour les lecteurs de toutes les régions.