Next.js(Pages Router) v16에서 다양한 로케일에 맞게 날짜 형식을 지정하는 방법

문제

날짜는 보편적인 표기 형식이 없습니다. 10/12/2025라는 숫자 배열은 미국에서는 10월 12일을 의미하지만 영국에서는 12월 10일을 의미합니다. "Oct 12, 2025"라고 쓰는 것은 영어 월 이름과 특정 순서 규칙을 전제로 합니다. 모든 지역은 구성 요소의 순서, 구분 기호, 월 이름을 단어로 표시할지 숫자로 표시할지 등에 대한 고유한 기대치를 가지고 있습니다.

단일 형식으로 날짜를 표시하면 해당 형식의 지역 외부 사용자에게 애플리케이션이 낯설게 느껴집니다. 사용자는 날짜를 잘못 해석하거나 읽기 어렵다고 느낄 수 있습니다. 한 사용자에게는 명확한 날짜가 다른 사용자에게는 혼란스럽거나 모호할 수 있습니다.

솔루션

사용자의 로케일을 기반으로 날짜 형식을 지정하여 날짜 값을 순서, 구분 기호, 월 이름에 대한 지역 규칙을 따르는 문자열로 변환합니다. 브라우저의 Intl.DateTimeFormat API는 로케일과 선택적 형식 기본 설정이 제공되면 로케일별 형식 규칙을 자동으로 처리합니다.

react-intl은 이 API를 래핑하고 애플리케이션의 로케일 컨텍스트와 통합하는 컴포넌트와 훅을 제공합니다. 이러한 도구에 날짜 값과 형식 옵션을 전달하면 사용자의 언어와 지역에 맞게 명확하고 자연스러운 방식으로 날짜가 렌더링됩니다.

단계

1. FormattedDate를 사용하여 날짜 형식 지정 컴포넌트 생성

FormattedDate 컴포넌트는 날짜 값과 Intl.DateTimeFormatOptions를 준수하는 형식 옵션을 받습니다. 원하는 수준의 세부 정보로 날짜를 표시하는 컴포넌트를 생성합니다.

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는 IntlProvider 컨텍스트에서 로케일을 읽고 그에 따라 날짜 형식을 지정합니다. 이 컴포넌트는 en-US의 경우 "October 12, 2025"를, en-GB의 경우 "12 October 2025"를 표시합니다.

2. useIntl을 사용하여 명령형으로 날짜 형식 지정

텍스트 속성 설정과 같이 React 컴포넌트를 사용할 수 없는 경우, useIntl 훅을 사용하여 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}`} />;
}

formatDate 메서드는 형식이 지정된 날짜 문자열을 반환하며 DateTimeFormatOptions를 준수하는 옵션을 허용합니다. 이 접근 방식은 속성, 서버 측 코드 또는 성능이 중요한 시나리오에 유용합니다.

3. 표준 옵션으로 형식 세부 정보 조정

year, month, day, weekday와 같은 옵션을 "numeric", "2-digit", "long", "short" 또는 "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" />
  );
}

FullEventDate 컴포넌트는 en-US에서 "Monday, October 12, 2025"를, de-DE에서 "Montag, 12. Oktober 2025"를 렌더링합니다. CompactDate 컴포넌트는 테이블이나 좁은 레이아웃에 적합한 더 짧은 숫자 형식을 생성합니다.

4. 재사용 가능한 날짜 포맷터 헬퍼 생성

여러 페이지에서 일관된 날짜 형식을 지정하려면 일반적인 형식 패턴을 캡슐화하는 헬퍼 함수를 생성하세요.

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

옵션을 반복하지 않고 일관되게 날짜 형식을 지정하려면 모든 페이지 컴포넌트에서 이 훅을 가져와 사용하세요.

5. 페이지 컴포넌트에서 헬퍼 사용

Next.js 페이지에서 날짜 포맷터 헬퍼를 적용하여 로케일 인식 날짜를 표시하세요.

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

페이지는 사용자의 로케일 형식으로 게시 날짜를 표시하여 모든 지역의 독자에게 날짜를 즉시 명확하고 친숙하게 만듭니다.