Імпарт ад кораня сайта ў 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. Давайце імпартаваць наш файл з данымі к файлу са старонкай. Выкарыстаем для гэтага адносны шлях:

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

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

Як вы бачыце, імпарт праз адносны шлях не вельмі зручны, так як нам даводзіцца пачынаць шлях з ../. Пры гэтым, калі мы перамесцім наш кампанент у іншае месца, то шлях к файлу з данымі зломіцца.

Больш зручна будзе паказаць шлях к файлу з данымі ад кораня праекта (ім лічыцца папка src). Для гэтага ў пачатку шляху трэба напісаць сімвал @. Зробім гэта:

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

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

Яшчэ раз падкрэсліў, што такі імпарт магчымы менавіта ў NextJS і толькі, калі пры ўстаноўцы вы правільна адказалі на патрэбнае пытанне. Проста ў NodeJS або ў чыстым JavaScript гэта працаваць не будзе.