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:

import 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:

import 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.

Podana je naslednja struktura datotek:

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

Uvozite podatkovno datoteko v komponento Test. Pri uvozu navedite pot iz korena projekta.

Spremenite svojo strukturo datotek v naslednjo:

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

Prepričajte se, da bo uvoz iz korena projekta še vedno deloval brez težav.