Uvoz iz korena spletnega mesta v NextJS

V tej lekciji bomo nadaljevali s preučevanjem uvozov v NextJS. Zdaj pa bomo preučili funkcijo, ki je na voljo v NextJS, vendar manjka v NodeJS.

Dejstvo je, da v NodeJS pri uvozu lahko uporabimo relativne poti (brez začetne poševnice) ali absolutne poti iz korena operacijskega sistema (kar ustvarja težave pri prenosu projekta na drug računalnik).

V resničnem življenju pa potrebujemo še eno vrsto uvoza - iz korena projekta. Tovrsten uvoz ni vgrajen v NodeJS, vendar je na voljo v NextJS.

Ta uvoz je omogočen ob namestitvi NextJS. Se spomnite, tam je bilo vprašanje Would you like to customize the default import alias? Če odgovorimo z Yes, bomo dobili možnost nastavljanja uvozov iz korena projekta.

Poglejmo, kako se to naredi. Za primer imamo naslednjo strukturo datotek:

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

Kot lahko vidite, datoteka data.js leži daleč od datoteke page.jsx. Uvažajmo našo podatkovno datoteko v datoteko s stranjo. Uporabimo za to relativno pot:

src/app/test/page.jsximport data from '../../data.js';

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

Kot lahko vidite, uvoz prek relativne poti ni zelo priročen, saj moramo začeti pot z ../. Poleg tega, če premaknemo naš komponent drugam, se pot do podatkovne datoteke pokvari.

Bolj priročno bi bilo navesti pot do datoteke s podatki iz korena projekta (za katerega se šteje mapa src). Za to je treba na začetku poti napisati simbol @. Naredimo to:

src/app/test/page.jsximport data from '@/data.js';

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

Še enkrat poudarjam, da je tak uvoz možen natančno v NextJS in le, če ste med namestitvijo pravilno odgovorili na ustrezno vprašanje. Preprosto v NodeJS ali v čistem JavaScript to ne bo delovalo.