Импорт от корня сайта в 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

Уверете се, че импортът от корена на проекта все още ще работи без проблеми.