یکی از قابلیت های این سیستم، Dynamic Routing هست. این قابلیت به طور ثابت برای هر پست ما یک آدرس دینامیک بر اساس نام فایل در نظر می گیره. برای ساخت این مسیر های دینامیک، نیاز به تابع ()getStaticPaths داریم.
با استفاده از این تابع می تونیم مسیر دهی های دینامیک هر پست رو بسازیم و مدیریت کنیم. برای این کار فایلی به نام [slug].js رو در مسیر pages/posts/ ایجاد کنید:
شما می تونید برای نام گذاری این فایل، به جای کلمه slug از هر کلمه دیگه ای مثل id, name, title و... استفاده کنید اما نامی که انتخاب می کنید باید درون [ ] قرار بگیره وگرنه به مشکل بر می خورید.
درون js.[slug] تابع ()getStaticPaths رو به این صورت ایجاد کنید:
درون این تابع هم نام فایل ها رو گرفتیم. بعد با استفاده از حلقه map پسوند فایل ها رو از نامشون جدا کردیم و درون یک آبجکت با خصوصیت params که دارای خصوصیتی به نام slug هست قرار دادیم و همه این آبجکت ها رو در آرایه paths ذخیره کردیم. در نهایت آرایه paths رو به همراه خصوصیت fallback درون یک آبجکت پاس دادیم.
نام خصوصیت slug وابسته به نام فایل هست. یعنی اگر شما نام فایل تون رو [id].js قرار دادید، باید نام این خصوصیت رو هم id قرار بدید.
کاربرد خصوصیت fallback برای ساخت مسیرها در زمان build time برنامه هست. وقتی برنامه رو در حالت تولید اجرا می کنیم، اگر این خصوصیت برابر false باشه، Nextjs فقط برای مسیر هایی توسط ()getStaticPaths پاس داده شدن، مسیر ایجاد می کنه و برای مسیر های ناشناخته، صفحه 404 نمایش میده. اما اگر برابر با true باشه برای تمام مسیر ها یک مسیر جداگانه ایجاد می کنه. درنتیجه برای صفحه هایی که وجود ندارن، صفحه 404 نمایش داده نمیشه. اگر تعداد مسیر های دینامیک تون زیاد بود، باید از این قابلیت استفاده کنید و مقدارش رو false بذارید. در اینجا برای اینکه باهاش آشنا بشین از این خصوصیت استفاده کردم.
حالا که آدرس های دینامیک رو داریم، باید محتوای هر مسیر رو به آدرس مشخص شده ارسال کنیم. برای این کار تابع ()getStaticProps رو به این صورت در انتهای [slug].js ایجاد کنید:
در اینجا با استفاده از خصوصیت params که از ()getStaticPaths دریافت شده، محتویات فایل markdown مرتبط به مسیر رو در متغیر fileContent قرار دادیم. بعد مثل دفعه قبل بخش frontmatter به همراه محتوای اصلی که درون خصوصیت content قرار گرفته، بیرون کشیدیم. در نهایت مقادیر آبجکت data و متغیر content رو درون یک آبجکت پاس دادیم.
حالا وقتشه که این این مقادیر درون صفحه استفاده کنیم:
حالا اگر روی هر پست کلیک کنید، محتوای اون پست به صورت کامل نمایش داده میشه. اما مشکلی که وجود داره اینه که محتویات متغیر content با سینتکس اولیه فایل markdown نمایش داده میشه:
فریم ورک Nextjs برای این مشکل از دو پکیج remark-html / remark استفاده کرده اما من از پکیج marked برای ساده تر شدن کار استفاده می کنم. بریم که نصبش کنیم:
npm
npm i marked
yarn
yarn add marked
این پیکج رو در [slug].js فراخوانی کنید:
حالا از این پکیج در جایی که از متغیر content استفاده شده، به این صورت استفاده کنید:
خروجی با سینتکس html به نمایش در میاد:
