Uingizaji wa programu kutoka kwa mzizi wa tovuti katika NextJS

Katika somo hili, tutaendelea kusoma uingizaji wa programu katika NextJS. Lakini sasa tutasoma kipengele ambacho kiko katika NextJS, lakini hakipo katika NodeJS.

Jambo ni kwamba katika NodeJS wakati wa kuagiza programu tunaweza kutumia njia za jamaa (bila mwanzo wa kukata), au njia kamili kutoka kwa mzizi wa mfumo wa uendeshaji (huleta matatizo ya kuhamisha mradi kwa kompyuta nyingine).

Katika maisha halisi, hata hivyo, tunahitaji aina nyingine ya uingizaji - kutoka kwa mzizi wa mradi. NodeJS haina uingizaji kama huo uliojengwa ndani, lakini upo katika NextJS.

Uingizaji huu huwezeshwa wakati wa kusakinisha NextJS. Kumbuka, kulikuwa na swali Would you like to customize the default import alias? Ikiwa utajibu Yes kwa swali hilo, basi tutakuwa na uwezo wa kuweka uingizaji wa programu kutoka kwa mzizi wa mradi.

Wacha tuone jinsi hii inafanyika. Wacha kwa mfano tuwe na muundo ufuatao wa faili:

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

Kama unavyoona, faili data.js iko mbali na faili page.jsx. Wacha tuingize faili yetu ya data kwa faili iliyo na ukurasa. Tumia kwa hili njia ya jamaa:

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

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

Kama unavyoona, uingizaji kupitia njia ya jamaa sio rahisi sana, kwani inatubidi tuanzishe njia kwa ../. Wakati huo huo, ikiwa tutahamisha kipengele chetu mahali pengine, basi njia kwa faili ya data itivunja.

Itakuwa rahisi zaidi kubainisha njia ya faili ya data kutoka kwa mzizi wa mradi (inachukuliwa kuwa folda src). Ili kufanya hivyo mwanzoni mwa njia unahitaji kuandika herufi @. Wacha tufanye hivi:

import data from '@/data.js';

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

Nasisitiza tena, uingizaji kama huo unaowezekana hasa katika NextJS na tu, ikiwa wakati wa usakinishaji ulijibu kwa usahihi swali linalohitajika. Tu katika NodeJS au katika JavaScript safi hii haitafanya kazi.

Imetolewa muundo ufuatao wa faili:

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

Ingiza faili ya data katika kipengele Test. Wakati wa uingizaji bainisha njia kutoka kwa mzizi wa mradi.

Badilisha muundo wako wa faili kuwa ufuatao:

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

Hakikisha kuwa uingizaji kutoka kwa mzizi wa mradi bado utafanya kazi bila matatizo.