تنسيق التواريخ والأوقات

المشكلة

عرض التاريخ بصيغته الخام، مثل 10/12/2025، يعتبر غامضًا. فالمستخدم في الولايات المتحدة يراه كـ 12 أكتوبر، بينما يراه المستخدم في المملكة المتحدة كـ 10 ديسمبر. إن مجرد برمجة صيغة واحدة ثابتة (مثل 'Oct 12, 2025') يخلق تجربة تبدو غير طبيعية أو غير مقروءة للمستخدمين في مناطق مختلفة.

الحل

استخدم مكون تنسيق مخصص من مكتبة مثل react-intl. مكون مثل FormattedDate يقرأ تلقائيًا اللغة الحالية من المزود الخاص به. يقوم بتنسيق كائن Date إلى سلسلة نصية صحيحة ومقروءة للإنسان وفقًا لقواعد لغة المستخدم، مع التعامل مع الترتيب والفواصل وأسماء الأشهر.

الخطوات

1. إنشاء مكون عميل للتاريخ

نظرًا لأن مكونات react-intl تتطلب IntlProvider، يجب استخدامها داخل مكونات العميل.

قم بإنشاء مكون جديد، app/components/PostDetails.tsx، سيعرض تاريخًا منسقًا.

// app/components/PostDetails.tsx
'use client';

import { FormattedDate } from 'react-intl';

type Props = {
  publishDate: Date;
};

export default function PostDetails({ publishDate }: Props) {
  return (
    <div>
      Posted on:
      <FormattedDate
        value={publishDate}
        dateStyle="long"
        timeStyle="short"
      />
    </div>
  );
}

يقبل هذا المكون كائن Date كخاصية. ثم يستخدم FormattedDate لعرضه.

2. تمرير خيارات التنسيق

يقبل مكون FormattedDate خيارات للتحكم في المخرجات. في المثال أعلاه:

• value هو كائن Date المراد تنسيقه.
• dateStyle="long" يطلب تنسيقًا مثل "December 10, 2025". الخيارات الأخرى تشمل "full" و"medium" و"short".
• timeStyle="short" يطلب تنسيقًا مثل "3:00 PM".

3. استخدام المكون في صفحة

الآن، يمكنك استخدام المكون الجديد في أي صفحة، مثل الصفحة الرئيسية.

// app/[lang]/page.tsx
import PostDetails from '@/app/components/PostDetails';

export default function Home() {
  // This could come from a database or API
  const myPostDate = new Date('2025-12-10T15:00:00Z');

  return (
    <div>
      <h1>My blog post</h1>
      <PostDetails publishDate={myPostDate} />
      <p>This is the content of the post...</p>
    </div>
  );
}

سيرى المستخدم الذي يزور /en "Posted on: December 10, 2025 at 3:00 PM". بينما سيرى المستخدم الذي يزور /es "Posted on: 10 de diciembre de 2025, 15:00".