Impordid saidi juurkaustast NextJS-is

Selles õppetükis jätkame importide uurimist NextJS-is. Kuid nüüd uurime funktsiooni, mis on olemas NextJS-is, kuid puudub NodeJS-is.

Asjaolu on selles, et NodeJS-is saame impordimisel kasutada kas suhtelisi teid (alguseta kaldkriipsuta) või absoluutseid teid operatsioonisüsteemi juurkaustast (loob probleeme projekti teise arvuti viimisega).

Reaalses elus vajame aga veel üht tüüpi importi - projekti juurkaustast. See import ei ole sisse ehitatud NodeJS-i, kuid see on olemas NextJS-is.

See import lubatakse NextJS-i installimisel. Mäletate, seal oli küsimus Would you like to customize the default import alias? Kui sellele vastata Yes, siis saame võimaluse määrata impordid projekti juurkaustast.

Vaatame, kuidas seda tehakse. Olgu meil näiteks järgmine failide struktuur:

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

Nagu näete, fail data.js asub kaugeI failist page.jsx. Importigem oma andmete faili lehe faili. Kasutame selleks suhtelist teed:

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

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

Nagu näete, import suhtelise teega ei ole väga mugav, kuna me peame algustama tee ../-ga. Kui me teisaldame oma komponendi teise kohta, siis tee andmete failini katkeb.

Mugavam oleks määrata tee failini andmetega projekti juurkaustast (loetakse kaustaks src). Selleks tuleb tee algusesse kirjutada sümbol @. Teeme selle:

import data from '@/data.js';

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

Rõhutan veelkord, et selline import on võimalik täpselt NextJS-is ja ainult siis, kui installimise ajal vastasite õigelt vajalikule küsimusele. Lihtsalt NodeJS-is või puhtas JavaScript-is see ei tööta.

Antud on järgmine failistruktuur:

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

Importige andmete fail komponenti Test. Impordi ajal määrake tee projekti juurkaustast.

Muutke oma failistruktuuri järgmiseks:

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

Veenduge, et import projekti juurkaustast jätkab töötamist probleemideta.