Absolute import Next.Js

سلام امیدوارم حالتون خوب باشه

تو این پست میخوایم راجب absolute import تو next.js حرف بزنیم

این نوع import ها همچین حالتی دارن

که خب هم باعث خوانایی و هم تمیزی و سادگی کد میشه و این کار تو next.js بسیار راحتتره نسبت به React

پ.ن: اگه از تایپ اسکریپت استفاده میکنید میتونید از مرحله اول رد بشید

پ.ن ۲: با توجه به اینکه این پست برای next.js کاربرد داره فقط و اگه از react استفاده میکنین آموزشش قبلا گذاشتم میتونین از این لینک واردش بشید و استفاده کنین

مرحله اول

داخل root پروژه یه فایل ایجاد کنید با اسم jsconfig.json و این کد رو copy و paste کنید تو همون jsconfig.json

{
   &quotcompilerOptions&quot:{}
}

مرحله دوم

داخل فایل tsconfig.json ( همون jsconfig.json که الان درست کردیم ) یه بخشی هست به اسم compilerOptions تو این آبجکت یه پراپرتی اضافه کنید با کلید paths و value یه آبجکت خالی ، این شکلی میشه بعد اینکه اضافه کردین

{
   &quotcompilerOptions&quot:{
      &quotpaths&quot : {}
   }
// other codes
}

مرحله سوم

اینجا نوبت به آدرس دهی میرسه

آبجکت paths پراپرتی هایی که میگیره از key های اون برای آدرس دهی موقه import استفاده میکنیم و value هاش هم آدرس واقعیه اون فولدر نسبت به فایل tsconfig/jsconfig.json هست

مثلا تو root پروژه یه فولدر داریم با اسم Ui و میخوایم این فولدر رو آدرس دهی کنیم

به سادگی میایم تو آبجکت paths یه پراپرتی اضافه میکنیم به این صورت

{
   &quotcompilerOptions&quot:{
      &quotpaths&quot : {
            &quot@/Ui/*&quot: [&quot./Ui/*&quot] 
      }
   }
// other codes
}

یه پراپرتی دیگه ای که compilerOptions قبول میکنه baseUrl هست که برای اینکه بتونیم آدرس دهی رو کوتاه تر کنیم

اگه baseUrl رو اضافه کنیم این شکلی میشه کد

{
   &quotcompilerOptions&quot:{
      &quotbaseUrl&quot: &quot./&quot
      &quotpaths&quot : {
            &quot@/Ui/*&quot: [&quotUi/*&quot] 
      }
   }
// other codes
}

اینطوریه که اون baseUrl میاد اول همه valueهای پراپرتیای داخل آبجکت paths میشینه و از تکرار جلوگیری میکنه

اینم یه نمونه از کد که دارم استفاده میکنیم