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值。