在通过ZEIT Now部署的Next.js应用程序中使用绝对导入

老丝Pro2020-03-23

在Next.js 9教程中，建议的导入共享组件的方法是通过相对路径，例如

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

我想使用绝对导入，例如

import Header from 'components/Header';

如何在本地以及使用Now CLI进行部署时如何进行这项工作？

使用教程中建议的设置，我的项目结构为：

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

村村2020/03/23 11:56:27

有多种方法可以实现此目的，但是一种方法-不需要其他依赖项，也不需要太多配置-是将环境变量NODE_PATH设置为当前目录，即NODE_PATH=.。

1.使其在本地工作

我认为NODE_PATH=.在package.json本地（例如$ npm run dev或$ yarn dev）运行dev / build脚本时，最简单的设置方法是将其添加到的每个脚本中package.json：

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

当您部署到ZEIT Now时，NODE_PATH必须以其他方式进行设置。

您可以通过添加文件来添加部署配置（该now.json文件应与放在同一目录中package.json）。如果您还没有now.json文件，请创建它并添加以下内容：

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

这告诉Now NODE_PATH=.在构建应用程序时使用（请参阅build.env）。

（它还告诉Now，我们使用的是Now平台版本 2，它是当前的最新版本（请参见version。当您使用部署时，忽略该版本会向您发出警告$ now。）

Newest Answer