Ներմուծում կայքի արմատից 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 ֆայլից հեռու։ Եկեք ներմուծենք մեր տվյալների ֆայլը էջի ֆայլի մեջ։ Դրա համար օգտագործենք հարաբերական ուղի.

src/app/test/page.jsximport data from '../../data.js';

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

Ինչպես տեսնում եք, հարաբերական ուղով ներմուծումը շատ հարմար չէ, քանի որ մենք ստիպված ենք սկսել ուղին ../-ով։ Ընդ որում, եթե մենք տեղափոխենք մեր կոմպոնենտը այլ տեղ, ապա ուղին դեպի տվյալների ֆայլը կխախտվի։

Ավելի հարմար կլինի նշել ֆայլի ուղին տվյալների ֆայլի դեպի նախագծի արմատից (որը համարվում է src պանակը)։ Դրա համար ուղու սկզբում պետք է գրել @ նշանը։ Եկեք անենք դա.

src/app/test/page.jsximport data from '@/data.js';

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

Կրկին ընդգծեմ, որ նման ներմուծում հնարավոր է հենց NextJS-ում և միայն այն դեպքում, եթե տեղադրման ժամանակ դուք ճիշտ եք պատասխանել անհրաժեշտ հարցին։ Պարզապես NodeJS-ում կամ մաքրով JavaScript-ում սա աշխատելու չէ։