Deploying Next.Js App Using Heroku Cloud Application Platform

In this article, I will be deploying a Next.Js app using the Heroku cloud application platform. Heroku is one of the best platforms as a service (PaaS) that many developers are using to build, run, and operate their applications fully on the cloud. Please see How to use GitHub as Source Provider for AWS CodePipeline, and how to use Command-Line on Git Bash and GitHub Desktop to PUSH local code to GitHub.

They have a free and pay-for-service plan. On this platform, you can easily deploy your application for public access in few minutes.

You can read further about, How to Deploy a React Application on Netlify, How to Create a React App with Vite, and How to Deploy GitHub Repositories to cPanel using GitHub Actions.

Deploy Next.Js on Heroku

1: Create a Next.js app on your localhost

If you don’t have the app on your localhost you can use the below command to create a Next.js app.

npx create-next-app

Follow the setup steps and when it is done start the development server by using this command npm run dev.

2. Update your Project Package.json

Heroku runs applications using Linux containers called dynos and when it runs a web dyno, it sets a variable called $PORT.  So we will be binding this port in order to receive incoming requests.

Open the root-level package.json and update the start script with “-p $PORT”

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

3: Commit your code to git

The next thing to do is to use git to push your code to Heroku. First, we will commit our code to a git repo.

git init

git add .

git commit -m "First commit"

Please see Disaster Recovery Test Checklist: What to Capture Before You Start, Secure Boot 2023 Compliance Across WinPE, MDT, WDS, and ADK: Boot Chain Alignment and PXE Validation [Final Part], and Fix an error occurred while attempting to start selected VM on Hyper-V.

4: Create an account on Heroku and create an app

You need to be logged into the Heroku platform to use the CLI and run the below command to create an app.

Set up your app by adding payment card details, don’t worry you will not get charged immediately as it is prorated based on what resources you used.

Open the CLI and enter this command heroku create ”your app name”

Please see Azure Virtual Desktop: Deploy host pools and session hosts in the Azure [Part 01], Azure Virtual Desktop: How to set Up Azure Virtual Desktop Insights Monitoring [Part 03], and Azure Virtual Desktop: Manage Azure Virtual Desktop host pools and session hosts using the Azure portal [Part 02]

5.    Push your code to Heroku Platform

After committing your code and the Heroku app created, you can then push your code to the app created on Heroku. Use this command to get this done:

git push heroku master

but if you plan to use another branch separate from the master then you can use the below command:

git push heroku [your branch name]:master

After successful deployment you will be able to view your app at

https://[YOUR_APP_NAME].herokuapp.com/

FAQs

I hope you found this blog post on Deploying Next.Js App Using Heroku Cloud Application Platform Interesting and helpful. If you have any questions do not hesitate to ask in the comment section.