在前端开发中，Next.js 是一个非常流行的框架，它提供了一些强大的功能，如服务器端渲染和静态生成。而 Heroku 则是一种云平台，可以方便地将应用程序部署到云端。
在本文中，我们将介绍如何将 Next.js 应用程序部署到 Heroku 平台上，并解决在部署过程中遇到的 404 页面不识别问题。
部署 Next.js 应用到 Heroku
首先，我们需要在 Heroku 上创建一个新的应用程序。在 Heroku 控制台中，单击“新建应用程序”，然后输入应用程序名称并选择一个区域。创建应用程序后，我们需要将代码上传到 Heroku。
步骤 1：创建 Heroku 应用程序
- 登录 Heroku 账户。
- 单击“新建应用程序”。
- 输入应用程序名称并选择一个区域。
- 单击“创建应用程序”。
步骤 2：将代码上传到 Heroku
- 在终端中，导航到 Next.js 应用程序的根目录。
- 运行以下命令，将代码上传到 Heroku：
$ heroku login $ git init $ git add . $ git commit -m "Initial commit" $ heroku git:remote -a your-app-name $ git push heroku master
- 运行以下命令，启动应用程序：
$ heroku ps:scale web=1
- 访问应用程序：
$ heroku open
现在，我们已经成功将 Next.js 应用程序部署到 Heroku 上了。但是，当我们在浏览器中访问页面时，可能会遇到 404 页面不识别问题。
解决 404 页面不识别问题
当我们在 Next.js 应用程序中使用 getServerSideProps 或 getStaticProps 时，我们可能会遇到 404 页面不识别问题。这是因为 Heroku 使用的是 Node.js 10.x，而 Next.js 需要 Node.js 12.x 或更高版本。
为了解决这个问题，我们需要在 Heroku 中设置 Node.js 版本。
步骤 1：在 package.json 文件中指定 Node.js 版本
在 Next.js 应用程序的 package.json 文件中，我们需要指定 Node.js 版本。我们可以使用 engines 字段来指定所需的 Node.js 版本。
-- -------------------- ---- -------
-
------- ---------
---------- --------
---------- -
------- ------
--
--------------- -
------- ----------
-------- ----------
------------ ---------
-
-步骤 2：在 Heroku 中设置 Node.js 版本
在 Heroku 控制台中，我们需要设置 Node.js 版本。在“设置”选项卡中，单击“添加构建包”，然后选择 Node.js 版本。
步骤 3：重新部署应用程序
最后，我们需要重新部署应用程序。在终端中，导航到 Next.js 应用程序的根目录，并运行以下命令：
$ git add . $ git commit -m "Update package.json" $ git push heroku master
现在，当我们在浏览器中访问页面时，就不会再遇到 404 页面不识别问题了。
结论
在本文中，我们介绍了如何将 Next.js 应用程序部署到 Heroku 上，并解决了在部署过程中遇到的 404 页面不识别问题。通过本文的学习，我们可以更好地了解如何使用 Next.js 和 Heroku，从而更有效地开发和部署应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675532ad1b963fe9cc529ab4