在使用 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 或更高版本，请参阅 。

---

Next.js 9.3 及更早版本

当前目录有different ways of achieving this, but one way – that requires no additional dependencies and not too much config – is to set the environment variable NODE_PATH个，即NODE_PATH=..

1。使其在本地工作

我认为设置 NODE_PATH=. 最简单的方法是 运行 本地 package.json 中的 dev/build 脚本（例如 $ 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 我们使用 Now platform version 2 which is currently the newest version (see version）。当您使用 $ now 部署时，省略版本会给您一个警告。）

Answer 2

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

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

这将允许从根目录导入。它还与 IDE（例如 VS Code）很好地集成。有关详细信息，请参阅 documentation。

Answer 3

更改网络包配置：

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