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

Question

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

import Header from 'components/Header';

我想使用绝对导入，例如

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

在deploy using the Now CLI时，该如何在本地工作？

---

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

NODE_PATH=.

Answer 1

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

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

这将允许从根目录导入。它还与VS Code等IDE很好地集成在一起。有关更多信息，请参见documentation。

Answer 2

有different ways可以实现这一目标，但是一种方法-不需要其他依赖项，也不需要太多配置-是set the environment variable NODE_PATH到当前目录，即NODE_PATH=.。

1。使它在本地工作

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

NODE_PATH

2。部署时使其正常工作

部署到ZEIT Now时，必须以其他方式设置now.json。

您可以通过添加package.json文件来添加Deployment Configuration（该文件应与now.json位于同一目录中）。如果您还没有{ "version": 2, "build": { "env": { "NODE_PATH": "." } } } 文件，请创建它并添加以下内容：

NODE_PATH=.

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

（它还告诉我们现在使用的是最新版本的Now platform version 2（请参阅version）。使用:before进行部署时，忽略该版本会给您警告。 ）

Answer 3

更改Web Pack配置：

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