Импортировать псевдоним модуля с помощью `babel-plugin-module-resolver` в NextJs

Проблема

Вы разрабатываете проект с разветвленной структурой каталогов и у вас есть масса импорта. Где-то там вы, вероятно, заметили, что пишете такой код:

import compose from '../../src/components/utils/compose';
import { isDesktopView } from '../../src/components/utils/desktop-only';
import { TEXT_PALETTE } from '../../src/theme/common';

Это беспорядочно, глядя на ../../../, вы не можете сказать вам, где находится импорт, кроме того, что он далеко. Хуже того, если вы когда-нибудь решите переместить папки или захотите скопировать и вставить импорт в другой файл, настройка количества ../ записей становится огромной проблемой.

Давайте воспользуемся плагином babel для разрешения пользовательских модулей в Next JS.

Реализация

Обновление:

В последней версии NextJs 9.4.4 вам не нужно устанавливать плагин babel.

Просто сделайте jsconfig.json (проекты JS) или tsconfig.json (проекты TS).

И добавьте следующую конфигурацию (при условии, что папка src существует в корне проекта)

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
       "@utils/*": ["src/components/utils/*"],
       "@components/*": ["src/components"]
    }
  }
}

Также нет необходимости создавать отдельный файл `.babelrc`

̶I̶n̶s̶t̶a̶l̶l̶ ̶b̶a̶b̶e̶l̶-̶p̶l̶u̶g̶i̶n̶-̶m̶o̶d̶u̶l̶e̶-̶r̶e̶s̶o̶l̶v̶e̶r̶ ̶a̶s̶ ̶y̶o̶u̶r̶ ̶d̶e̶p̶e̶n̶d̶e̶n̶c̶y̶ ̶i̶n̶ ̶y̶o̶u̶r̶ ̶N̶e̶x̶t̶ ̶J̶S̶ ̶p̶r̶o̶j̶e̶c̶t̶.̶

̶A̶d̶d̶ ̶.̶b̶a̶b̶e̶l̶r̶c̶ ̶f̶i̶l̶e̶ ̶i̶n̶ ̶y̶o̶u̶r̶ ̶N̶e̶x̶t̶J̶S̶ ̶p̶r̶o̶j̶e̶c̶t̶

̶N̶o̶t̶e̶-̶ ̶N̶e̶x̶t̶J̶S̶ ̶f̶i̶l̶e̶ ̶d̶o̶e̶s̶ ̶n̶o̶t̶ ̶n̶e̶e̶d̶ ̶.̶b̶a̶b̶e̶l̶r̶c̶ ̶b̶y̶ ̶d̶e̶f̶a̶u̶l̶t̶.̶ ̶I̶t̶ ̶u̶s̶e̶s̶ ̶”̶n̶e̶x̶t̶/̶b̶a̶b̶e̶l̶”̶ ̶p̶r̶e̶s̶e̶t̶ ̶t̶o̶ ̶t̶r̶a̶n̶s̶p̶i̶l̶e̶.̶

̶A̶d̶d̶ ̶f̶o̶l̶l̶o̶w̶i̶n̶g̶ ̶i̶n̶ ̶y̶o̶u̶r̶ ̶.̶b̶a̶b̶e̶l̶r̶c̶

И это все.

Вы можете начать импорт модулей, используя этот псевдоним.