Next.js on Heroku

Deploy React-based universal web apps on Heroku.

Demo deployment from this repo:
https://nextjs.herokuapp.com

A custom Node/Express server is supported. Use it to:

• combine a Node API with a Next/React UI
• implement custom URL routes

▶️ Next with custom Express server

Requires

• Heroku
  • command-line tools (CLI)
  • a free account
• git
• Node.js
• Next.js

Production deployment

Once you have a Next app working locally, you may deploy it for public access.

1. Revise the npm start script to set the web listener $PORT:

   Merge this entry into package.json:

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

   ⭐️ In March 2019, Heroku began running npm run build automatically, so the old heroku-postbuild script entry is no longer required.

2. Ensure the app is a git repo, ignoring local-only directories:

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

3. Create the Heroku app:

   heroku create $APP_NAME
   

4. 🚀 Deploy:

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

   ⭐️ As of July 2020, Heroku supports git push heroku main and encourages its use. The support for the branch name of 'master' will remain available for backwards compatibility.

5. ♻️ Deploy changes: add, commit, & push again.

Custom Config

Next itself supports build & runtime configuration through the next.config.js file.

Use environment variables (Heroku config vars) within your React components, no rebuilds required! Simply set next.config.js values from the server's environment using process.env object.