Импорт од корена сајта у NextJS

У овом часу наставићемо са изучавањем импорта у NextJS. Али сада ћемо проучити функцију која постоји у NextJS, али недостаје у NodeJS.

Чињеница је да у NodeJS приликом импорта можемо користити или релативне путање (без почетне косе црте), или апсолутне путање од корена оперативног система (ствара проблеме при премештању пројекта на други рачунар).

У стварном животу, међутим, потребан нам је још један тип импорта - од корена пројекта. У NodeJS такав импорт није уграђен, али постоји у NextJS.

Овај импорт се укључује при инсталацији NextJS. Сећате ли се, било је питање Would you like to customize the default import alias? Ако на њега одговоримо са Yes, тада добијамо могућност да дефинишемо импорте од корена пројекта.

Хајде да погледамо како се то ради. Нека за пример имамо следећу структуру фајлова:

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

Као што видите, фајл data.js се налази далеко од фајла page.jsx. Хајде да импортујемо наш фајл са подацима у фајл са страницом. Користимо за то релативну путању:

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

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

Као што видите, импорт преко релативне путање није баш погодан, јер морамо да почнемо путању са ../. При томе, ако померимо наш компонент на друго место, тада ће се путања до фајла са подацима покварити.

Погодније би било навести путању до фајла са подацима од корена пројекта (за корен се сматра фолдер src). За то на почетку путање треба написати симбол @. Урадимо то:

import data from '@/data.js';

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

Још једном да нагласим да је овакав импорт могућ управо у NextJS и само ако сте приликом инсталације тачно одговорили на потребно питање. Једноставно, у NodeJS или у чистom JavaScript ово неће радити.

Дата је следећа фајлова структура:

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

Импортујте фајл са подацима у компонент Test. Приликом импорта наведите путању од корена пројекта.

Промените вашу фајлову структуру на следећу:

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

Уверите се да ће импорт од корена пројекта и даље радити без проблема.