13) نمایش لیست پست ها

در این قسمت قراره با استفاده از ()getStaticProps لیستی از پست ها رو درون صفحه نمایش بدیم. قبل از شروع، پوشه ای به نام posts در مسیر اصلی پروژه ایجاد کنید و این فایل ها رو درونش قرار بدید:

این فایل های markdown محتوای پست هایی که قراره نمایش بدیم رو درون خودشون دارن. می خوایم این چهار پست رو درون صفحه posts به صورت لیست نمایش بدیم. برای این کار، نیاز به پکیج gray-matter داریم. برای نصب این پکیج دستور زیر رو اجرا کنید:

npm

npm i gray-matter

yarn

yarn add gray-matter

در مسیر /pages یک پوشه به نام posts بسازید و posts.js رو به این پوشه انتقال بدید. نام posts.js رو به index.js تغییر بدید. اگه به مسیر localhost:3000/posts برید، می بینید که صفحه posts به خوبی کار می کنه.

درون /components فایل Post.js رو به این صورت ایجاد کنید:

این کامپوننت، اطلاعات هر پست رو درون آبجکت post به صورت props دریافت می کنه و در صفحه نمایش میده. در انتهای posts.js تابع ()getStaticProps رو به این صورت تعریف کنید:

در بالای صفحه این ماژول ها رو فراخوانی کنید:

توضیح کارهایی که انجام دادیم:

• در اینجا ما نام تمام فایل های داخل پوشه posts رو درون آرایه files ذخیره کردیم.
• روی آرایه files حلقه map اجرا کردیم. درون این حلقه، نام هر فایل رو از پسوندش جدا کردیم و درون متغیر slug قرار دادیم.
• بعد با استفاده از ماژول fs و path محتوای درون هر فایل markdown رو در متغیر fileContents ذخیره کردیم.

اما ما به تمام محتوای پست ها نیاز نداریم. تنها به بخش frontmatter هر پست نیاز داریم:

این قسمت که در بالای تمام فایل های markdown ما قرار داره، متادیتای اون پست هست که شامل عنوان، تاریخ انتشار توضیحات و... هر پست میشه. برای نوشتن این قسمت باید اطلاعات رو به صورت key: value بنویسید و بین --- قرار بدید.

• با استفاده از تابع ()matter اطلاعات فایل درون یک آبجکت قرار دادیم و از طریق destructuring بخش frontmatter رو که درون خصوصیت data قرار گرفته، بیرون کشیدیم. مقادیر data و متغیر slug رو درون یک آبجکت پاس دادیم. در نهایت متغیر posts که آرایه ای از آبجکت های شامل اطلاعاتfrontmatter هر پست و متغیر slug هست رو درون خصوصیت props پاس دادیم.

حالا تابع posts رو به این صورت ویرایش کنید:

در اینجا آرایه posts رو دریافت کردیم و با استفاده از حلقه map تک تک پست ها رو به کامپوننت Post به صورت props پاس دادیم. در نهایت پست ها به این صورت در خروجی نمایش داده میشن:

اگر روی هر پست کلیک کنید، مسیر به این صورت تغییر می کنه:

 localhost:3000/posts/slug

اما با صفحه ی 404 روبرو میشین:

دلیلش اینه که ما فقط لیست پست ها رو در صفحه posts نمایش دادیم. باید برای هر نمایش محتوای پست، صفحه جدیدی در یک مسیر جداگانه ایجاد بشه. Nextjs قابلیتی به نام Dynamic Routes داره که این کار رو به راحتی انجام میده.

با استفاده از قابلیت Dynamic Routing می تونیم کاری کنیم تا هر وقت روی هر پست کلیک شد، محتوای پست ها در صفحه جدیدی نمایش داده بشه. در قسمت بعد در مورد این قابلیت صحبت می کنیم.