NextJS හි වෙබ් අඩවියේ මූලයේ සිට ආයාත කිරීම

මෙම පාඩමෙන් අපි NextJS හි ආයාත කිරීම් අධ්‍යයනය කිරීම දිගටම කරගෙන යනු ඇත. නමුත් දැන් අපි NextJS හි ඇති නමුත් NodeJS හි නොමැති විශේෂාංගයක් අධ්‍යයනය කරනු ඇත.

කාරණය නම්, NodeJS හි ආයාත කිරීමේදී අපට සාපේක්ෂ මාර්ග භාවිතා කළ හැකිය (ආරම්භක ස්ලෑෂ් රහිතව), නැතහොත් මෙහෙයුම් පද්ධතියේ මූලයේ සිට නිරපේක්ෂ මාර්ග (වෙනත් පරිගණකයකට ව්‍යාපෘතිය මාරු කිරීමේදී ගැටළු සාදයි).

තථ්‍ය ජීවිතයේදී, කෙසේ වෙතත්, අපට තවත් එක් ආකාරයේ ආයාත කිරීමක් අවශ්‍ය වේ - ව්‍යාපෘතියේ මූලයේ සිට. NodeJS හි එවැනි ආයාත කිරීමක් අන්තර්ගත නොවේ, නමුත් NextJS හි එය ඇත.

මෙම ආයාත කිරීම NextJS ස්ථාපනය කිරීමේදී සක්‍රිය වේ. මතකද, එහි Would you like to customize the default import alias යන ප්‍රශ්නය තිබුණා? එයට Yes ලෙස පිළිතුරු දුන්නොත්, ව්‍යාපෘතියේ මූලයේ සිට ආයාත කිරීම් නියම කිරීමේ හැකියාව අපට ලැබේ.

එය කරන්නේ කෙසේදැයි බලමු. උදාහරණයක් ලෙස, අපට පහත ගොනු ව්‍යුහය ඇතැයි සිතමු:

/src/
- data.js
- /app/
  - /test/
    - page.jsx

ඔබට පෙනෙන පරිදි, data.js ගොනුව page.jsx ගොනුවෙන් බොහෝ දුරින් පිහිටා ඇත. දත්ත සහිත අපගේ ගොනුව පිටු ගොනුවට ආයාත කරමු. මේ සඳහා අපි සාපේක්ෂ මාර්ගය භාවිතා කරමු:

import data from '../../data.js';

export default function Test() {
	return <h1>Test</h1>;
}

ඔබට පෙනෙන පරිදි, සාපේක්ෂ මාර්ගය හරහා ආයාත කිරීම එතරම් පහසු නොවේ, මන්ද අපට මාර්ගය ආරම්භ කිරීමට ../ සමඟ ය. මේ අතර, අපි අපගේ සංරචකය වෙනත් ස්ථානයකට ගෙන ගියහොත්, දත්ත සහිත ගොනුවට වන මාර්ගය කඩා වැටේ.

දත්ත සහිත ගොනුවට මාර්ගය ව්‍යාපෘතියේ මූලයේ සිට (src ෆෝල්ඩරය ලෙස සැලකේ) නියම කිරීම වඩාත් පහසු වනු ඇත. මෙය සිදු කිරීම සඳහා, මාර්ගය ආරම්භයේදී @ සංකේතය ලිවිය යුතුය. අපි එය කරමු:

import data from '@/data.js';

export default function Test() {
	return <h1>Test</h1>;
}

නැවත වරක් අවධාරණය කරමින්, මෙවැනි ආයාත කිරීමක් සිදුවන්නේ NextJS හි පමණක් වන අතර, ස්ථාපනය කිරීමේදී ඔබ අවශ්‍ය ප්‍රශ්නයට නිවැරදිව පිළිතුරු දුන්නේ නම් පමණි. NodeJS හි හෝ පිරිසිදු JavaScript හි මෙය ක්‍රියා නොකරනු ඇත.

පහත ගොනු ව්‍යුහය ලබා දී ඇත:

/src/
- /app/
  - data.js
  - /test/
    - page.jsx

දත්ත සහිත ගොනුව Test සංරචකයට ආයාත කරන්න. ආයාත කිරීමේදී, ව්‍යාපෘතියේ මූලයේ සිට මාර්ගය නියම කරන්න.

ඔබගේ ගොනු ව්‍යුහය පහත පරිදි වෙනස් කරන්න:

/src/
- /app/
  - data.js
  - /test/
    - /sub/
      - page.jsx

ව්‍යාපෘතියේ මූලයේ සිට ආයාත කිරීම තවමත් ගැටළු නොමැතිව ක්‍රියාත්මක වන බවට වග බලා ගන්න.