18) نحوه جدا کردن منطق پروژه

تا به الان پروژه مون تکمیل شده و به خوبی کار می کنه اما می تونیم بهتر از این عمل کنیم. به فایل [slug] یه نگاهی بندازید:

در این قسمت قراره کد ها رو تمیز تر کنیم و قرار نیست چیز جدیدی به پروژه اضافه بکنیم؛ پس اگر نیازی تمیز کردن کدها نمی بینید، می تونید این قسمت رو نادیده بگیرید

این صفحه بیش از حد شلوغ شده. ممکنه فعلا مشکلی نباشه اما بعدا اگر بخوایم قسمت جدیدی به پروژه ایجاد کنیم، برامون دردسر ایجاد می کنه. برای تمیزتر شدن این صفحه، می تونیم منطقش رو به صفحه دیگه ای انتقال بدیم و از اونجا فراخوانی اش کنیم. برای این کار پوشه ای به نام /lib در مسیر اصلی پروژه ایجاد کنید و posts.js رو درونش ایجاد می کنم:

حالا posts.js رو به این صورت کدنویسی می کنم:

کارهایی که در این فایل انجام دادیم بدین شرحه:

• ماژول های fs, path, gray-matter رو درونش فراخوانی کردیم
• لیست تمام پست ها رو درون متغیر files ذخیره و export کردیم
• در ()getPost اطلاعات هر پست رو با استفاده از پارامتر slug دریافت کردیم و پاس دادیم
• در ()getSlugs با استفاده از متغیر files لیست تمام slug ها رو درون یک آرایه ذخیره کردیم و پاس دادیم

حالا از این توابع درون [slug] به این صورت استفاده می کنم:

از ()getSlugs به همراه کلمه کلیدی await برای دریافت مسیر ها و و از ()getPost برای دریافت اطلاعات پست مورد نظر استفاده کردم. اگر پروژه رو در مرورگر اجرا کنید، میبینید که همه چیز به درستی کار می کنه.

ممکنه که تغییرات، حجم کد ها رو کمتر نکرده باشه اما با جداکردن منطق این صفحه، اون رو تغییر پذیرتر و در نتیجه تمیزتر کردیم.

همین کار رو می تونیم با posts/index.js بکنیم:

می تونیم منطق ()getStaticProps رو درون lib/posts.js انتقال بدیم. برای اینکار ()getPosts رو به این صورت در بالای lib/posts.js اضافه کنید:

در این تابع تمام منطق تابع ()getStaticProps آورده شده و فقط کافیه که در posts/index.js فراخوانی و استفادش کنیم:

خب این قسمت هم تموم شد.