Marie Starck

Posted on Nov 15, 2020 • Edited on May 14, 2021 • Originally published at mariestarck.com

Deploy your Next.js app to Heroku in 5 minutes

#nextjs #heroku #tutorial #devops

When I became a freelancer, I was afraid of deployment. As a startup employee, I always had the luxury of my coworkers nearby if anything went wrong. It was a luxury I only appreciated once it was no longer an option as these days I mostly work by myself. But that move from employee to freelancer also made me realize something else:

While deployment may seen frightening, it doesn't have to be.

As a matter of fact, this tutorial will prove how easily and quickly you can get your Next.js application deployed to Heroku.

Prerequisites for this tutorial:

Git
a Heroku account (if you don't have one, create an account here)
Heroku CLI (if you don't have it set up, head here first)
Node.js installed (at the time of writing, Next.js requires Node.js 10.13 or later. For more info, read Nexts.js - Getting Started)

(Optional) Create a Next.js app if you don't already have one

I am assuming that if you are reading this post, you most likely have one running on your localhost. But, to be 100% sure, I will show you how to get one set up.

npx create-next-app

# OR

yarn create next-app

Go through the creation setup and when it is done, you can try starting the development server.

1. Update your package.json

Heroku runs their applications in Linux containers called dynos. When Heroku runs a web dyno, it sets a variable called $PORT. To receive incoming requests, you need to bind to this port.

To do so, go to your root-level package.json and update your start script:

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

Tip: For more information on the different types of dynos and how they work, here is the Heroku's documentation.

2. Commit your code to git

First, we will use git to push our code to Heroku. That's why you should transform your app into a git repo if that isn't already the case.

git init
git add .
git commit -m "Initial commit"

3. Create a Heroku app

You need to be logged into the Heroku CLI to do this (you can do so with the command heroku login). Once you are, you can create your app:

heroku create $APP_NAME

4. Push your code the the Heroku app

With your code committed and your Heroku app created, you are now ready to push this code onto your app.

git push heroku master

Tip: If you are on a branch other than master (say main or production), you can push your code like this:

git push heroku [your branch name]:master

Once deployment done, you can access your app at https://[APP_NAME].herokuapp.com/.

Et voilà!

Possible Errors

1) Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

You have committed your code, pushed it to your Heroku app, opened up a tab to view your new shiny app and .... nothing loads. Worse, you get a message that an error occurred.
First, do this command to see your logs:

heroku logs --tail

And, bam!

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

Do not panic. What most likely happened is that you forgot to update your package.json. Go back to that file and make sure that your start script has the -p $PORT required.

2) No build cache found. Please configure build caching for faster rebuilds

You might see this when you push your code to Heroku and your app is building. It's not an error but a warning. It won't hurt your project but will result in slower builds. For more information, you can read the Next.js documentation on the subject.

To fix this, go to your package.json and add this:

"cacheDirectories": [".next/cache"]

Tips and tricks after deploying

Once you are done deploying, here are a list of things you might want to set up for a smooth running of your application.

Set your environment variables in Heroku

You have two ways at your disposal to set your environment variables in Heroku.

1) through the terminal

You can first see all your variables:

heroku config

#If you just created your app, the result will probably be blank

Set an new variable. This will restart your application too.

heroku config:set FOO=bar

Remove a variable:

heroku config:unset FOO

2) Through the dashboard

Another way to add/edit/remove environment variables is through the dashboard.

Go to https://dashboard.heroku.com/apps and select your app. Navigate to Settings. Under Config Vars, you will be able to make all the changes you need.

Automated deployment

If you have a Github account, you might be interested in Heroku's automated deployment feature. This will mean that every time you push your changes to a particular branch, say production, those changes are automatically push to your Heroku application.

To do so, go to your dashboard and select your app. Under the Deploy tab, look for Deployment method.