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

Убедитесь, что импорт от корня проекта по прежнему будет работать без проблем.