Импорт од коренот на веб-страницата во 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 или во чист JavaScript ова нема да работи.

Дадена е следнава структура на датотеки:

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

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

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

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

Проверете дали импортот од коренот на проектот се уште ќе работи без проблеми.