Skip to content

mars/heroku-nextjs

Repository files navigation

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

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.