Используйте абсолютный импорт в приложении Next.js, развернутом с помощью ZEIT Now

В руководстве по Next.js 9 предлагается способ импортировать общие компоненты находятся по относительным путям, например

import Header from '../components/Header';

Я хочу использовать абсолютный импорт, например

import Header from 'components/Header';

Как сделать это как локально, так и при развертывании с помощью интерфейса командной строки Now?

Используя предложенную настройку из учебника, моя структура проекта:

my-project
├── components
├── pages
└── package.json

next.js vercel
person ArneHugo    schedule 27.07.2019    source источник

Ответы (3)


arrow_upward
19
arrow_downward

Next.js 9.4 и новее

Если вы используете Next.js 9.4 или новее, см. ответ Блэка.

Next.js 9.3 или более ранней версии

Есть разные способы достижения этой цели, но только один. - это не требует дополнительных зависимостей и не слишком большой конфигурации - это установить переменная среды NODE_PATH в текущий каталог, т.е. NODE_PATH=..

1. Сделайте так, чтобы он работал локально

Я думаю, что самый простой способ установить NODE_PATH=. при запуске сценариев разработки / сборки в вашем package.json локально (например, $ npm run dev или $ yarn dev) - это добавить его к каждому сценарию в package.json:

"scripts": {
  "dev": "NODE_PATH=. next",
  "build": "NODE_PATH=. next build",
  "start": "next start"
},

2. Заставьте его работать при развертывании

При развертывании в ZEIT Now NODE_PATH необходимо настроить по-другому.

Вы можете добавить конфигурацию развертывания, добавив now.json файл (он должен быть в том же каталог как ваш package.json). Если у вас еще нет now.json файла, создайте его и добавьте следующее содержимое:

{
  "version": 2,
  "build": {
    "env": {
      "NODE_PATH": "."
    }
  }
}

Это указывает Now использовать NODE_PATH=. при сборке вашего приложения (см. build.env).

(Это также говорит о том, что теперь мы используем версию платформы Now 2, которая в настоящее время является новейшей версией (см. версию). Если вы не укажете версию, вы получите предупреждение при развертывании с использованием $ now.)

person ArneHugo    schedule 27.07.2019
comment
Спасибо за этот ответ, я еще нигде не видел этого четко задокументированного - я обнаружил, что решение для преобразования веб-пакетов продолжало давать сбой. Одна небольшая поправка, которую я внес в этот ответ: поскольку я уже устанавливал некоторые другие значения в файле .env, я включил туда NODE_PATH=".". Затем я использую библиотеку dotenv и вызываю require('dotenv').config() в верхней части next.config.js файла корневого уровня. Это устанавливает значение без изменения команд сценария в package.json. - person allanlasser; 22.02.2020
comment
Я также добавил jsconfig.json: { "compilerOptions": { "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": { "components": ["./components/"] } }, "exclude": ["node_modules"] } - person Brunno Vodola Martins; 12.04.2020
comment
Я использую это решение, но недавнее обновление пакета создало некоторую несовместимость с этим решением. Я разместил здесь stackoverflow.com/q/61857093/2700303. Теперь каждая страница отображается пустой, и в консоли javascript появляется ошибка парсера json. - person MiguelSlv; 17.05.2020

arrow_upward
4
arrow_downward

В Next.js 9.4 это можно сделать, добавив конфигурацию baseUrl в jsconfig.json (проекты JS) или tsconfig.json (проекты TS).

// jsconfig.json or tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

Это позволит импортировать из корневого каталога. Он также хорошо интегрируется с IDE, например с VS Code. См. документацию для дополнительной информации.

person Black    schedule 13.05.2020
comment
Спасибо за обновления. Я использую NextJS 9.4. также и мне все еще пришлось добавить NODE_PATH в мой файл .env.production, чтобы мой конвейер конвейера gitlab работал (исполнитель докеров с изображением node12-alpine). Несколько разных способов установки псевдонима модулей webpack в next.config.js не помогли. Моя локальная сборка прошла без установки NODE_PATH или настройки разрешения модуля в next's-config, установив baseUrl в tsconfig.json. Я хотел бы знать, как правильно установить псевдоним через конфигурацию веб-пакета, вместо того, чтобы позволить NextJs делать свое дело. - person mowtheone; 15.05.2020

arrow_upward
0
arrow_downward

Измените конфигурацию веб-пакета:

//next.config.js file
module.exports = {  
    webpack(config) {
      config.resolve.modules.push(__dirname)
      return config;
    },
}

Затем используйте это так:

import TopBar from 'components/TopBar' // for components
import "public/baseLine.css" // for any public resources
person MiguelSlv    schedule 17.05.2020