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

المشكلة

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

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

الحل

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

توفر 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. ضبط تفاصيل التنسيق باستخدام الخيارات القياسية

تحكم في عرض مكونات التاريخ من خلال تحديد خيارات مثل السنة والشهر واليوم ويوم الأسبوع بقيم مثل "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 },
  };
};

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