Skip to content
Deploy Next.js universal web apps to Heroku
Branch: master
Clone or download
Latest commit 6962317 Mar 29, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
components Add logo component (#3) Nov 15, 2016
pages Link to May 14, 2018
.gitignore Ignore logs Nov 15, 2016
LICENSE MIT license & package.json cleanup Oct 29, 2016 📚 fix typo Mar 29, 2019
app.json Add Heroku generated app.json Oct 30, 2016
package.json Switch to Heroku Node.js auto-build (#48) Mar 28, 2019

Next.js on Heroku

Deploy React-based universal web apps on Heroku.

Demo deployment from this repo:

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


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 master
  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.

You can’t perform that action at this time.