Importi nga rrënja e faqes në NextJS

Në këtë mësim do të vazhdojmë të studiojmë importet në NextJS. Por tani do të studiojmë një veçori që ekziston në NextJS, por mungon në NodeJS.

Çështja është se në NodeJS kur importojmë mund të përdorim ose rrugë relative (pa shenjë pjerrësi fillestare), ose rrugë absolute nga rrënja e sistemit operativ (kjo krijon probleme kur transferojmë projektin në një kompjuter tjetër).

Në jetën reale, megjithatë, na duhet një lloj tjetër importi - nga rrënja e projektit. Ky import nuk është i integruar në NodeJS, por ekziston në NextJS.

Ky import aktivizohet kur instaloni NextJS. Mbani mend, aty kishte pyetjen Do të dëshironit të personalizoni alias-in e parazgjedhur të importit? Nëse i përgjigjemi Po, atëherë ne do të kemi mundësinë të përcaktojmë importet nga rrënja e projektit.

Le të shohim se si bëhet kjo. Le të themi për shembull se kemi strukturën e mëposhtme të skedarëve:

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

Siç e shihni, skedari data.js ndodhet larg nga skedari page.jsx. Le të importojmë skedarin tonë të të dhënave në skedarin e faqes. Le të përdorim për këtë një rrugë relative:

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

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

Siç e shihni, importi përmes rrugës relative nuk është shumë i përshtatshëm, pasi na duhet të fillojmë rrugën me ../. Në këtë rast, nëse e zhvendosim komponentin tonë në një vend tjetër, atëherë rruga në skedarin me të dhënat do të prishet.

Më e përshtatshme do të ishte të specifikohej rruga në skedarin me të dhëna nga rrënja e projektit (konsiderohet dosja src). Për ta bërë këtë, në fillim të rrugës duhet të shkruhet simboli @. Le ta bëjmë këtë:

import data from '@/data.js';

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

E theksoj përsëri, një import i tillë është i mundur pikërisht në NextJS dhe vetëm nëse gjatë instalimit ju iu përgjigjët saktë pyetjes së nevojshme. Thjesht në NodeJS ose në JavaScript të pastër kjo nuk do të funksionojë.

Është dhënë struktura e mëposhtme e skedarëve:

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

Importoni skedarin me të dhëna në komponentin Test. Gjatë importit specifikoni rrugën nga rrënja e projektit.

Ndryshoni strukturën tuaj të skedarëve në atë të mëposhtme:

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

Sigurohuni që importi nga rrënja e projektit të vazhdojë të funksionojë pa probleme.