Uvoz od korena sajta u NextJS

U ovoj lekciji nastavićemo da proučavamo uvoze u NextJS. Ali sada ćemo proučiti funkciju koja postoji u NextJS, ali nedostaje u NodeJS.

Stvar je u tome što u NodeJS pri uvozu možemo koristiti ili relativne putanje (bez početne kose crte), ili apsolutne putanje od korena operativnog sistema (stvara probleme sa premeštanjem projekta na drugi računar).

U stvarnom životu, međutim, potreban nam je još jedan tip uvoza - od korena projekta. U NodeJS takav uvoz nije ugrađen, ali postoji u NextJS.

Ovaj uvoz se uključuje prilikom instalacije NextJS. Sećate li se, postojało je pitanje Would you like to customize the default import alias? Ako odgovorite sa Yes, tada ćemo dobiti mogućnost da zadajemo uvoze od korena projekta.

Hajde da pogledamo kako se to radi. Neka za primer imamo sledeću strukturu fajlova:

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

Kao što vidite, fajl data.js se nalazi daleko od fajla page.jsx. Hajde da importujemo naš fajl sa podacima u fajl sa stranicom. Koristimo za to relativnu putanju:

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

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

Kao što vidite, uvoz preko relativne putanje nije baš zgodan, jer moramo da počnemo putanju sa ../. Pritim, ako premestimo naš komponent na drugo mesto, onda će se putanja do fajla sa podacima pokvariti.

Praktičnije bi bilo da navedemo putanju do fajla sa podacima od korena projekta (smatra se da je to fascikla src). Za ovo na početku putanje treba napisati simbol @. Uradimo ovo:

import data from '@/data.js';

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

Još jednom da naglasim, da je ovakav uvoz moguć upravo u NextJS i samo, ako ste pri instalaciji pravilno odgovorili na potrebno pitanje. Samo u NodeJS ili u čistom JavaScript ovo neće raditi.

Data je sledeća struktura fajlova:

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

Importujte fajl sa podacima u komponentu Test. Prilikom uvoza navedite putanju od korena projekta.

Promenite vašu strukturu fajlova na sledeću:

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

Uverite se da će uvoz od korena projekta i dalje raditi bez problema.