heroku nextjs

Next.js在Heroku上

在Heroku上部署基于React的通用Web应用程序。

此存储库中的演示部署：
https://nextjs.sherokuapp.com

支持自定义节点/Express服务器。使用它：

• 将节点API与下一个/react UI结合
• 实施自定义URL路由

▶q下一个使用自定义Express服务器

需要

• Heroku
  • 命令行工具（CLI）
  • 免费帐户
• git
• node.js
• next.js

生产部署

一旦您将下一个应用程序在本地工作，则可以将其部署为公共访问。

1. 修改npm start脚本以设置Web侦听器$PORT ：

   将此条目合并到package.json ：

   {
     "scripts" : {
       "dev" : " next " ,
       "build" : " next build " ,
       "start" : " next start -p $PORT "
     }
   }

   目标于2019年3月，Heroku开始自动运行npm run build ，因此不再需要旧的heroku-postbuild脚本条目。

2. 确保应用程序是git回购，忽略了仅本地目录：

   git init
   (echo node_modules/ && echo .next/) >> .gitignore

3. 创建Heroku应用程序：

   heroku create $APP_NAME

4. 部署：

   git add .
   git commit -m ' Next.js app on Heroku '
   git push heroku main 

   截至2020年7月，Heroku支持git push heroku main ，并鼓励其使用。对“主”分支名称的支持将保持向后兼容性。

5. ♻️部署更改：添加，提交和再次推动。

自定义配置

接下来，通过Next.config.js文件支持构建和运行时配置。

在您的React组件中使用环境变量（Heroku Config vars），无需重建！只需使用process.env对象从服务器环境中设置Next.Config.js值。