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

Posted 2023-03-06

【中文标题】在使用 ZEIT Now 部署的 Next.js 应用程序中使用绝对导入

【英文标题】：Use absolute imports in Next.js app deployed with ZEIT Now

【发布时间】：2019-12-05 16:05:44

【问题描述】：

在 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

【参考方案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。使其在本地工作

我认为在本地运行package.json 中的开发/构建脚本时设置NODE_PATH=. 的最简单方法（例如$ 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 进行部署时，省略该版本会给您一个警告。）

【讨论】：

感谢您的回答，我在其他任何地方都没有看到清楚的记录——我发现webpack resolver solution 现在一直失败。我对这个答案做了一个小调整：因为我已经在.env 文件中设置了一些其他值，所以我在其中包含了NODE_PATH="."。然后，我使用dotenv 库并在根级next.config.js 文件的顶部调用require('dotenv').config()。这会在不修改 package.json 中的脚本命令的情况下设置值。

我还加了jsconfig.json： "compilerOptions": "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": "components": ["./components/"] , "exclude": ["node_modules"]

我使用此解决方案，但最近的一些软件包更新与此解决方案有些不兼容。我在这里发帖***.com/q/61857093/2700303。现在每个页面都呈现空白，并且 json 解析器错误出现在 javascript 控制台。

【参考方案2】：

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

// jsconfig.json or tsconfig.json

  "compilerOptions": 
    "baseUrl": "."
  

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

【讨论】：

感谢您的更新。我正在使用 NextJS 9.4。还必须将 NODE_PATH 添加到我的 .env.production 文件中，以使我的 gitlab 管道运行器工作（带有 node12-alpine 图像的 docker 执行器）。在 next.config.js 中设置 webpack 模块别名的几种不同方法都不起作用。我的本地构建在没有设置 NODE_PATH 或在 next's-config 中配置模块分辨率的情况下通过，同时在 tsconfig.json 中设置了 baseUrl。我很想知道如何通过 webpack 配置正确设置别名，而不是让 NextJs 做它的事情。

【参考方案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