DEV Community

Nickson Elauriche Toho
Nickson Elauriche Toho

Posted on

How to deploy NextJS app on heroku

To deploy an existing Next.js application to Heroku, you can follow these general steps:

1- Prepare Your Project:

Make sure your Next.js application is set up correctly and is working locally. You should have the necessary project files, including package.json,pages folder, and other dependencies.

2- Create a Git Repository:

If your project isn’t already in a Git repository, initialize one by running:

git init
Enter fullscreen mode Exit fullscreen mode

Create a .gitignore file if you don't have one to exclude unnecessary files from being committed to the repository.

3- Heroku Account:

Make sure you have a Heroku account and have the Heroku CLI installed. You can sign up for Heroku at https://www.heroku.com/ and download the Heroku CLI from https://devcenter.heroku.com/articles/heroku-cli.

4- Log in to Heroku:

Open a terminal and log in to your Heroku account by running:

heroku login
Enter fullscreen mode Exit fullscreen mode

5- heroku login

Create a new Heroku app for your project by running:

heroku create your-app-name
Enter fullscreen mode Exit fullscreen mode

Replace your-app-name with the desired name for your app.

5- Add Build Scripts:

In your package.json file, make sure you have the following scripts defined for building and starting your Next.js app:

"scripts": {
  "build": "next build",
  "start": "next start"
}
Enter fullscreen mode Exit fullscreen mode

7- Configure Environment Variables (if needed):

If your app relies on environment variables, you can set them on Heroku by using the heroku config:set command. For example:

heroku config:set MY_VARIABLE=value
Enter fullscreen mode Exit fullscreen mode

8- Commit and Push to Heroku:

Commit your changes and push your repository to Heroku:

git add .
git commit -m "Initial commit"
git push heroku master
Enter fullscreen mode Exit fullscreen mode

9- Open Your App:

Once the deployment is complete, you can open your app in the browser by running:

heroku open
Enter fullscreen mode Exit fullscreen mode

Your Next.js app should now be deployed to Heroku. Make sure to monitor the deployment process in your terminal for any potential errors. Additionally, remember to set up any necessary database connections or third-party services if your app relies on them, and configure environment variables accordingly on Heroku.

Top comments (0)