Awesome Open Source
Awesome Open Source

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.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,847
react (5,549
nextjs (357
heroku (224