Імпарт ад кораня сайта ў 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

Упэўніцеся, што імпарт ад кораня праекта па-ранейшаму будзе працаваць без праблем.