Next.js 实现部署到 Heroku 上的教程-JavaScript中文网-JavaScript教程资源分享门户

前言

Next.js 是一个基于 React 的轻量级框架，它提供了一些方便的功能，如自动代码分割、服务器端渲染和静态导出等。Heroku 是一个云平台，可以让开发者轻松地部署、扩展和管理应用程序。在本文中，我们将介绍如何使用 Next.js 将应用程序部署到 Heroku 上。

准备工作

在开始之前，我们需要做一些准备工作。首先，我们需要安装 Node.js 和 npm，可以在官方网站上下载并安装，安装完成后可以通过以下命令验证是否安装成功：

$ node -v
$ npm -v

接着，我们需要创建一个 Next.js 应用程序，可以通过以下命令创建：

$ npx create-next-app my-app

这将创建一个名为 my-app 的应用程序，并安装所需的依赖项。

部署到 Heroku

接下来，我们将介绍如何将应用程序部署到 Heroku 上。首先，我们需要在 Heroku 上创建一个新的应用程序，可以通过以下命令创建：

$ heroku create my-app

这将创建一个名为 my-app 的应用程序，并为其分配一个唯一的 URL。

接着，我们需要将应用程序部署到 Heroku 上。首先，我们需要将代码推送到 Heroku Git 仓库中：

$ git init
$ git add .
$ git commit -m "Initial commit"
$ heroku git:remote -a my-app
$ git push heroku master

这将将代码推送到 Heroku Git 仓库中，并自动部署应用程序。

配置环境变量

在将应用程序部署到 Heroku 上之后，我们还需要配置一些环境变量。这些环境变量可以用于存储敏感信息，如数据库密码、API 密钥等。我们可以通过 Heroku 控制台或命令行来配置这些环境变量，例如：

$ heroku config:set DATABASE_URL=postgres://user:password@host:port/database
$ heroku config:set API_KEY=xxxxxx

在应用程序中，我们可以通过 process.env 对象来访问这些环境变量，例如：

const { API_KEY } = process.env;

fetch(`https://api.example.com?key=${API_KEY}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

静态导出

除了服务器端渲染之外，Next.js 还提供了一种静态导出的方式，可以将应用程序导出为静态 HTML 文件，从而可以部署到任何静态网站托管服务上。我们可以通过以下命令将应用程序导出为静态 HTML 文件：

$ npm run build
$ npm run export

这将生成一个名为 out 的目录，其中包含所有的静态 HTML 文件和资源。我们可以将这些文件上传到任何静态网站托管服务上，例如 GitHub Pages、Netlify 等。

总结

在本文中，我们介绍了如何使用 Next.js 将应用程序部署到 Heroku 上，并配置了环境变量和静态导出。希望本文能够对您有所帮助，让您可以更方便地部署和管理应用程序。如果您有任何问题或建议，欢迎在评论区留言。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6578230ad2f5e1655d203370