تحسين صفحة الفهرس

الآن، لنقم بتحديث صفحة الفهرس الخاصة بنا (pages/index.js). نحتاج إلى إضافة روابط لكل صفحة مقال باستخدام مكون Link.

افتح ملف pages/index.js وأضف الاستيرادات التالية في أعلى الملف لمكون Link و Date:

import Link from 'next/link';
import Date from '../components/date';

ثم، بالقرب من الجزء السفلي لمكون Home في نفس الملف، استبدل وسم li بما يلي:

<li className={utilStyles.listItem} key={id}>
  <Link href={`/posts/${id}`}>{title}</Link>
  <br />
  <small className={utilStyles.lightText}>
    <Date dateString={date} />
  </small>
</li>

إذا انتقلت إلى http://localhost:3000، ستجد أن الصفحة الآن تحتوي على روابط لكل مقال:

إذا كان هناك شيء لا يعمل، تأكد من أن الكود الخاص بك يبدو هكذا.

هذا كل شيء! قبل أن ننهي هذا الدرس، لنتحدث عن بعض النصائح حول المسارات الديناميكية في الصفحة التالية.