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

Question

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

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

我想使用绝对进口，比如

import Header from 'components/Header';

如何在本地和使用 Now CLI 进行部署时使其工作？

---

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

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

Answer 1

Next.js 9.4 及更高版本

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

---

Next.js 9.3 及更早版本

有不同的方法来实现这一点，但一种方法——不需要额外的依赖和太多的配置——是将环境变量设置NODE_PATH为当前目录，即NODE_PATH=..

1. 让它在本地工作

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

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

2. 部署时让它工作

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

您可以通过添加文件来添加部署配置（它应该与您的. 如果您还没有文件，请创建它并添加以下内容：now.jsonpackage.jsonnow.json

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

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

（它还告诉 Now 我们使用的是Now 平台版本2，它是当前最新版本（请参阅版本）。省略版本会在您使用 部署时给您一个警告$ now。）

Answer 2

在 Next.js 9.4 中，可以通过将baseUrl配置添加到jsconfig.json（JS 项目）或tsconfig.json（TS 项目）来实现。

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

这将允许从根目录导入。它还可以与 VS Code 等 IDE 很好地集成。有关更多信息，请参阅文档。

Answer 3

更改 webpack 配置：

//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