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

Problema

Las fechas no tienen un formato escrito universal. La secuencia 10/12/2025 significa 12 de octubre en Estados Unidos pero 10 de diciembre en Reino Unido. Escribir "Oct 12, 2025" asume nombres de meses en inglés y una convención de orden particular. Cada región tiene sus propias expectativas sobre el formato de fecha, incluyendo el orden de los componentes, los 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

Formatea las fechas según la configuración regional del usuario, convirtiendo valores de fecha en cadenas que siguen las reglas regionales de orden, separadores y nombres de meses. La API Intl.DateTimeFormat del navegador maneja las reglas de formato específicas de cada configuración regional automáticamente 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 que es clara y natural para el idioma y región del usuario.

Pasos

1. Crea un componente de formato 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 "October 12, 2025" para en-US.

2. Formatear fechas imperativamente con useIntl

Para casos donde no se puede usar un componente de React, como establecer atributos de texto, usa 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={`Article published on ${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 nivel de detalle del 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 una función auxiliar reutilizable para formatear fechas

Para un formateo de fechas consistente en múltiples páginas, crea una función auxiliar 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. Usar la función auxiliar en un componente de página

Aplica la función auxiliar de formateo de fechas en una página de Next.js para mostrar fechas adaptadas a la configuración regional.

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 de la configuración regional del usuario, haciendo que la fecha sea inmediatamente clara y familiar para los lectores de cualquier región.