كيفية تنسيق التواريخ للغات المختلفة في Next.js (Pages Router) الإصدار 16

المشكلة

التواريخ ليس لها تنسيق كتابي عالمي موحد. التسلسل 10/12/2025 يعني 12 أكتوبر في الولايات المتحدة لكنه يعني 10 ديسمبر في المملكة المتحدة. كتابة "Oct 12, 2025" تفترض أسماء الأشهر الإنجليزية واتفاقية ترتيب معينة. كل منطقة لها توقعاتها الخاصة حول تنسيق التاريخ، بما في ذلك ترتيب المكونات والفواصل وما إذا كانت أسماء الأشهر تظهر كلمات أو أرقام.

عرض التواريخ بتنسيق واحد يجعل التطبيق يبدو غريباً للمستخدمين خارج منطقة ذلك التنسيق. قد يسيء المستخدمون تفسير التواريخ أو يجدون صعوبة في قراءتها. التاريخ الواضح لجمهور معين يمكن أن يكون مربكاً أو غامضاً لجمهور آخر.

الحل

تنسيق التواريخ بناءً على لغة المستخدم، وتحويل قيم التاريخ إلى نصوص تتبع القواعد الإقليمية للترتيب والفواصل وأسماء الأشهر. واجهة Intl.DateTimeFormat API في المتصفح تتعامل مع قواعد التنسيق الخاصة باللغة تلقائياً عند إعطائها لغة وتفضيلات تنسيق اختيارية.

توفر مكتبة react-intl مكونات ودوال تغلف هذه الواجهة وتتكامل مع سياق اللغة في التطبيق. من خلال تمرير قيم التاريخ وخيارات التنسيق إلى هذه الأدوات، تُعرض التواريخ بطريقة واضحة وطبيعية للغة المستخدم ومنطقته.

الخطوات

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 وينسق التاريخ وفقاً لذلك. سيعرض المكون "October 12, 2025" للغة en-US و"12 October 2025" للغة en-GB.

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 "Monday, October 12, 2025" في en-US و"Montag, 12. Oktober 2025" في de-DE. ينتج مكون 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 },
  };
};

ستعرض الصفحة تاريخ النشر بتنسيق اللغة المحلية للمستخدم، مما يجعل التاريخ واضحاً ومألوفاً على الفور للقراء في أي منطقة.