Tuonti sivuston juuresta NextJS:ssä

Tässä oppitunnissa jatkamme NextJS:n tuontien opiskelua. Mutta nyt opimme ominaisuuden, joka on NextJS:ssä, mutta puuttuu NodeJS:stä.

Asia on niin, että NodeJS:ssä tuonnissa voimme käyttää joko suhteellisia polkuja (ilman aloitusta kauttaviivaa), tai absoluuttisia polkuja käyttöjärjestelmän juuresta (luo ongelmia projektin siirrossa toiselle tietokoneelle).

Todellisessa elämässä tarvitsemme kuitenkin toisen tyyppisen tuonnin - projektin juuresta. Tätä tuontia ei ole sisäänrakennettu NodeJS:ään, mutta se on NextJS:ssä.

Tämä tuonti otetaan käyttöön NextJS:n asennuksen yhteydessä. Muistatteko, siellä oli kysymys Would you like to customize the default import alias? Jos siihen vastataan Yes, saamme mahdollisuuden määrittää tuonnit projektin juuresta.

Katsotaanpa, kuinka se tehdään. Olkoon esimerkiksi meillä seuraava tiedostorakenne:

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

Kuten näette, tiedosto data.js sijaitsee kaukana tiedostosta page.jsx. Tuodaanpa datatiedostomme sivutiedostoon. Käytetään tähän suhteellista polkua:

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

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

Kuten näette, tuonti suhteellisen polun kautta ei ole kovin kätevä, koska meidän on aloitettava polku ../. Samalla, jos siirrämme komponenttimme toiseen paikkaan, polku datatiedostoon hajoaa.

Mukavampaa olisi määrittää polku datatiedostoon projektin juuresta (jota pidetään src-kansiona). Tätä varten polun alkuun on kirjoitettava merkki @. Tehdään se:

import data from '@/data.js';

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

Korostan vielä, että tällainen tuonti on mahdollista nimenomaan NextJS:ssä ja vain, jos asennuksen yhteydessä vastasit oikein kyseiseen kysymykseen. Pelkässä NodeJS:ssä tai puhtaassa JavaScriptissä tämä ei toimi.

Annettu seuraava tiedostorakenne:

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

Tuokaa datatiedosto Test-komponenttiin. Määrittäkää tuonnissa polku projektin juuresta.

Vaihtakaa tiedostorakenteenne seuraavaan:

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

Varmistakaa, että tuonti projektin juuresta toimii edelleen ilman ongelmia.