Cómo formatear fechas para diferentes locales en Next.js (Pages Router) v16

Problema

Las fechas no tienen un formato escrito universal. La secuencia 10/12/2025 significa 10 de octubre en Estados Unidos pero 10 de diciembre en el Reino Unido. Escribir "Oct 12, 2025" asume nombres de meses en inglés y una convención de ordenamiento particular. Cada región tiene sus propias expectativas sobre el formato de fecha, incluyendo el orden de los componentes, separadores, y si los nombres de los meses aparecen como palabras o números.

Mostrar fechas en un único formato hace que la aplicación se sienta extraña para usuarios fuera de la región de ese formato. Los usuarios pueden malinterpretar las fechas o encontrarlas más difíciles de leer. Una fecha que es clara para una audiencia puede ser confusa o ambigua para otra.

Solución

Formatear fechas basándose en la configuración regional del usuario, convirtiendo valores de fecha en cadenas que siguen las reglas regionales para el orden, separadores y nombres de meses. La API Intl.DateTimeFormat del navegador maneja automáticamente las reglas de formato específicas de la configuración regional cuando se le proporciona una configuración regional y preferencias de formato opcionales.

react-intl proporciona componentes y hooks que envuelven esta API y se integran con el contexto de configuración regional de la aplicación. Al pasar valores de fecha y opciones de formato a estas herramientas, las fechas se renderizan de una manera clara y natural para el idioma y región del usuario.

Pasos

1. Crear un componente de formateo de fecha usando FormattedDate

El componente FormattedDate acepta un valor de fecha y opciones de formato que se ajustan a Intl.DateTimeFormatOptions. Crea un componente que muestre una fecha con el nivel de detalle deseado.

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 lee la configuración regional del contexto IntlProvider y formatea la fecha en consecuencia. El componente mostrará "12 de octubre de 2025" para es-ES y "12 October 2025" para en-GB.

2. Formatear fechas imperativamente con useIntl

Para casos donde no se puede utilizar un componente React, como al establecer atributos de texto, utiliza el hook useIntl para acceder al método 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={`Artículo publicado el ${formattedDate}`} />;
}

El método formatDate devuelve una cadena de fecha formateada y acepta opciones que se ajustan a DateTimeFormatOptions. Este enfoque es útil para atributos, código del lado del servidor o escenarios críticos de rendimiento.

3. Ajustar el detalle de formato con opciones estándar

Controla la presentación de los componentes de fecha especificando opciones como year, month, day y weekday con valores como "numeric", "2-digit", "long", "short" o "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" />
  );
}

El componente FullEventDate renderizará "Monday, October 12, 2025" en en-US y "Montag, 12. Oktober 2025" en de-DE. El componente CompactDate produce formatos numéricos más cortos apropiados para tablas o diseños compactos.

4. Crear un helper reutilizable para formatear fechas

Para un formato de fecha consistente en múltiples páginas, crea una función helper que encapsule patrones de formato comunes.

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

Importa y usa este hook en cualquier componente de página para formatear fechas de manera consistente sin repetir opciones.

5. Utiliza el helper en un componente de página

Aplica el helper de formato de fecha en una página de Next.js para mostrar fechas adaptadas al idioma local.

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 página mostrará la fecha de publicación en el formato local del usuario, haciendo que la fecha sea inmediatamente clara y familiar para los lectores de cualquier región.