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

Question

在Next.js 9教程中，建议的import shared components方法是通过相对路径，例如

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

我想使用绝对导入，例如

import Header from 'components/Header';

我如何在本地和 deploy using the Now CLI上进行这项工作？

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

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

Answer 1

Next.js 9.4及更高版本

如果您使用的是Next.js 9.4或更高版本，请参阅Black's answer。

Next.js 9.3及更早版本

有different ways可以实现这一目标，但是一种方法-不需要额外的依赖关系，也不需要太多的配置-是set the environment variable 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 Now时，必须以其他方式设置 NODE_PATH。

您可以通过添加 now.json文件来添加 Deployment Configuration(该文件应与 package.json位于同一目录中)。如果您还没有 now.json文件，请创建它并添加以下内容:

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

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

(它还告诉我们，我们现在使用的是最新版本的 Now platform version 2(请参阅 version。忽略该版本会在您使用 $ now进行部署时向您发出警告。)