Deploy your Next.js app on Heroku with ease

While Next.js apps are usually delayed on Vercel, you can prefer to deploy your app on Heroku. This tutorial will show you how to do this easily and fast.

Create your app ( if not already created )

For the purposes of the tutorial, we will use the next-and that we created in this article

otherwise, you can create your app :

npx create-next-app
# OR
yarn create next-app

Then start the development server:

npm run dev
# OR
yarn dev

Update your package.json

You need to update your package.json file bu changing the start script and adding a heroic post build script :

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT",
     "heroku-postbuild": "npm run build"

  }

for the start script, we simply binded to the port where Heroku receives incoming requests.

Commit your code to git

Simple git operations :

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

Create a Heroku app

Log into your Heroku CLI and create your app :

heroku create next_antd

you can also do this in the Dashboard of your Heroku account

Push your code the the Heroku app

Now you are now ready to push your committed code into your app.

git push -u origin master

Trick :Automated deployment

If you have a Github account, you might be interested in Heroku’s automated deployment feature, like with Vercel. To do so, go to your dashboard and select your app. Under the Deploy tab, look for Deployment method.

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

Conclusion

While not as easy as deploying to Vercel, deploying to Heroku is fairly easy once you follow the steps in this tutorial.