Deploy your Next.js app to Heroku in 5 minutes
Tags: nextjs, heroku, tutorial, devops
Published: 2020-11-15 14:15:55

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](https://signup.heroku.com/login))
* Heroku CLI (if you don't have it set up, head [here](https://devcenter.heroku.com/articles/heroku-cli) 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](https://nextjs.org/docs/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](https://devcenter.heroku.com/articles/dynos) 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](https://github.com/vercel/next.js/blob/master/errors/no-cache.md).

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](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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ah9axnzz7ux9nyqjbftj.png)

## 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**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e0vyoxv13k1in1g08vk8.png)

From there, you can connect your Github account. Once that is done, you can select a repository and a branch.

If you liked the article, you can [follow me on Twitter](https://twitter.com/MStarckJS).