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

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

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

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

import Header from 'components/Header';

Как заставить это работать как локально, так и при развертывании с использованием CLI Now?

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

my-project
├── components
├── pages
└── package.json
Источник

1 ответ

Решение

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

1. Заставьте это работать локально

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

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

2. Сделайте так, чтобы вы работали при развертывании

При развертывании в ZEIT сейчас, NODE_PATH должен быть установлен по-другому.

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

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

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

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

Источник

В Next.js 9.4 это можно сделать, добавив baseUrl config для jsconfig.json (JS-проекты) или tsconfig.json (ТС проекты).

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

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

Источник

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

//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
Источник
Другие вопросы по тегам