Importas iš šakninio katalogo NextJS

Šioje pamokoje mes toliau tyrinėsime importus NextJS. Bet dabar išnagrinėsime funkciją, kuri yra NextJS, bet trūksta NodeJS.

Faktas yra tas, kad NodeJS, importuojant, mes galime naudoti arba santykinius kelius (be pradinio pasvirimo brūkšnio), arba absoliučius kelius nuo operacinės sistemos šaknies (sukuria problemas perkeliant projektą į kitą kompiuterį).

Realiame gyvenime, tačiau, mums reikia dar vieno importo tipo - nuo projekto šaknies. NodeJS neturi įdiegto tokio importo, tačiau jis yra NextJS.

Šis importas įjungiamas diegiant NextJS. Ar atsimenate, ten buvo klausimas Ar norite tinkinti numatytąjį importo pseudonimą? Jei atsakyti Taip, tada mes gausime galimybę nustatyti importus nuo projekto šaknies.

Pažiūrėkime, kaip tai daroma. Tarkime, pavyzdžiui, kad turime tokią failų struktūrą:

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

Kaip matote, failas data.js yra toli nuo failo page.jsx. Importuokime mūsų duomenų failą į puslapio failą. Naudokime tam santykinį kelią:

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

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

Kaip matote, importas naudojant santykinį kelią nėra labai patogus, nes mes turime pradėti kelią su ../. Be to, jei mes perkelsime mūsų komponentą į kitą vietą, tuomet kelias į duomenų failą sulūš.

Patogiau būtų nurodyti kelią į failą su duomenimis nuo projekto šaknies (laikoma, kad tai src katalogas). Tam reikia kelio pradžioje parašyti simbolį @. Padarykime tai:

import data from '@/data.js';

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

Dar kartą pabrėžiu, kad toks importas įmanomas būtent NextJS ir tik jei diegimo metu teisingai atsakėte į reikiamą klausimą. Tiesiog NodeJS arba gryname JavaScript tai neveiks.

Duota tokia failų struktūra:

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

Importuokite duomenų failą į komponentą Test. Importuodami nurodykite kelią nuo projekto šaknies.

Pakeiskite savo failų struktūrą į tokią:

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

Įsitikinkite, kad importas nuo projekto šaknies vis tiek veiks be problemų.