最近我使用 Next.js 构建了一个简单的博客应用，并尝试将其部署到 Heroku 上。但是在尝试部署的过程中，遇到了许多问题，导致最终部署失败。
在解决这些问题的过程中，我学到了一些有价值的经验和技巧，并希望在这篇文章中与大家分享这个过程。
问题背景
在尝试将 Next.js 应用程序部署到 Heroku 上的过程中，我遇到了以下问题：
问题 1：Build 失败
在上传代码并部署应用程序时，Heroku 告诉我 Build 失败了。在查看 Build 日志时，我发现了以下错误信息：
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! my-app@0.1.0 build: `next build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the my-app@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
这表明在构建应用程序时发生了错误。
问题 2：PORT 未定义
在尝试启动应用程序时，Heroku 告诉我端口未定义。在查看日志时，我发现以下错误信息：
Error: listen EADDRINUSE: address already in use :::5000
这表明我的应用程序尝试监听端口 5000，但该端口已经被其他进程占用了。
问题 3：应用程序无法访问
尝试在浏览器中访问部署的应用程序时，我发现应用程序无法正常工作。在查看日志时，我发现以下错误信息：
Error: ENOENT: no such file or directory, open '/app/.next/server/pages/index.js'
这表明应用程序无法找到所需的文件，导致无法正常启动。
解决方案
在遇到这些问题时，我做了以下步骤来解决它们。
解决方案 1：更新 package.json 文件
为了解决第一个问题，即 Build 失败，我需要更新 package.json 文件。在其中，我需要将 "build" 命令修改为以下命令：
"build": "NODE_ENV=production next build"
这将确保在构建应用程序时使用生产环境。此外，在 package.json 文件中添加以下内容，指示应用程序在启动时使用 Heroku 提供的端口：
"scripts": {
"dev": "next dev",
"build": "NODE_ENV=production next build",
"start": "next start -p $PORT"
}这将确保应用程序在 Heroku 上使用正确的端口，而不是硬编码端口。
解决方案 2：使用环境变量
为了解决第二个问题，即端口未定义，我需要使用环境变量来指定应用程序应使用的端口。我可以通过以下方式在 Heroku 上设置环境变量：
heroku config:set PORT=5000
这将为我的应用程序配置环境变量 PORT，并设置其值为 5000。然后，我需要在应用程序代码中使用该环境变量，以确保应用程序在启动时使用正确的端口。我可以使用以下代码行来实现：
const port = process.env.PORT || 3000;
这将为我的应用程序获取环境变量中的端口或默认值 3000（如果环境变量未定义）。
解决方案 3：使用 static 按需导出
为了解决第三个问题，即应用程序无法访问，我需要使用 static 按需导出来生成一个静态版本的应用程序。在 Next.js 中，可以通过以下方式实现这一点：
// next.config.js
module.exports = {
target: "serverless"
}这将更新 Next.js 的配置文件，以使用静态输出。此外，我需要在 package.json 文件中添加以下命令：
"export": "next build && next export"
这将构建应用程序，并将其输出为静态 HTML 文件，而不是在服务器上运行它。接下来，我可以将静态输出文件中的内容部署到 Heroku 上，从而解决了应用程序无法访问的问题。
总结
在本文中，我与大家分享了我尝试将 Next.js 应用程序部署到 Heroku 上的过程中遇到的问题。通过更新 package.json 文件、使用环境变量和使用静态按需导出，我最终成功地将应用程序部署到 Heroku 上。
希望本文对你有所帮助，让你能够更轻松地将 Next.js 应用程序部署到 Heroku 上。以下是示例代码供大家参考：
-- -------------------- ---- ------- -- --------- ----- ------- - ------------------- ----- ---- - ---------------- ----- ---- - ---------------- -- ----- ----- --- - ---------- -- ----- ------ ------ ------------------ ----------------------------------- ------------ -- ------ --- ---- ------------- ----- ---- -- - --------------------------------- --------------- --- ---------------- -- -- - ---------------------- -- ---- ----------- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f60f4980a9b385b8e7a81