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

阿尔内·雨果

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

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

我想使用绝对导入,例如

import Header from 'components/Header';

如何在本地以及使用Now CLI进行部署时如何进行这项工作


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

my-project
├── components
├── pages
└── package.json
阿尔内·雨果

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 dev运行dev / build脚本时,最简单的设置方法是将其添加到的每个脚本中package.json

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

2.部署时使其工作

当您部署到ZEIT Now时NODE_PATH必须以其他方式进行设置。

您可以通过添加文件来添加部署配置(该now.json文件应与放在同一目录中package.json)。如果您还没有now.json文件,请创建它并添加以下内容:

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Zeit Now进行Next js + Express部署时遇到问题

使用 ZEIT Now、Next.js 和 Gun.js 时,如何修复部署错误“OSSL_WEBCRYPTO_OR_TEXT_ENCODING_NOT_INSTALLED 未定义”?

使用 Zeit Now 部署 Angular 应用程序的生产版本

如何使用ZEIT Now访问已部署的网站?

NGINX代理Zeit Now部署

部署Next.js

在Next.js中获取非API数据的最佳实践是什么(通过Vercel部署)

尝试通过现在部署到Vercel(Zeit)时文档库的部署错误

ZEIT NOW可变秘密

将Next js部署到云中的问题

将Nest.js部署到now.sh

通过TestFlight部署新应用

通过下载部署UWP应用

使用#getStaticProps()将Next.js部署到Vercel的问题

在React应用中使用Webpack resolve.alias绝对导入

我如何配置Storybook.js Webpack以在Next.js项目的CSS模块中使用绝对图像路径?

如何通过React + Next.js在材料UI中使用Theme?

无法对NextJS应用程序的ZEIT Now 502错误进行调查

如何在AWS Elastic Beanstalk上部署next.js?

如何通过Web Components.js在Safari中使用HTML导入

无法通过IBM Worklight部署Android应用

通过以下方式从CircleCI部署应用

将静态Next.js应用程序部署到Firebase托管

将Next.js应用程序部署到App Engine标准[Nodejs]并收到500错误

如何使用Next.js在React应用程序中使用Google字体

使用现在缺少的样式部署了next.js,styles.css 404响应

使用代码管道通过 NestedStack 部署 Cloudformation

在Next.js应用程序中使用GraphQL的推荐方法

如何在Next.js应用程序中使用ES2020功能