Step 1: Create a Heroku account
Go to the Heroku signup page and enter all the required details to create an account or just sign in if you already have an account.
Once you are signed in, you will see your empty application dashboard:
![Empty Heroku dashboard](/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdeploy-next-js-app-on-heroku%2Fempty-heroku-dashboard.png&w=3840&q=75)
Step 2: Create your application
On your empty dashboard, click the "Create new app" button. You will then see a screen where you can enter your application name and choose a region where your app should be hosted. Enter your app name (as below) and choose the desired region for your application. Then click the "Create app" button to create your application.
![Create new app on Heroku](/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdeploy-next-js-app-on-heroku%2Fcreate-new-app.png&w=1920&q=75)
Step 3: Connect your GitHub account to Heroku
Once you created your application, you will be navigated to the deployment page of your app. Choose the "Connect to GitHub" option and click the purple "Connect to GitHub" button at the bottom of the page.
![Connect Heroku to GitHub](/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdeploy-next-js-app-on-heroku%2Fconnect-to-github.png&w=3840&q=75)
A GitHub authorization window will pop up asking you to approve the authorization request. After you connected your GitHub account to Heroku you'll be able to search for the repository that you want to deploy. Once you found the repository, click the "Connect" button next to it.
![Search for GitHub repo on Heroku](/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdeploy-next-js-app-on-heroku%2Fsearch-repository.png&w=3840&q=75)
Optional step: Enable automatic deployments
After you have connected your GitHub repository you have the option to enable automatic deployments for a specific branch. This is handy if, for instance, you want to automatically deploy any changes to your dev or staging environment. If you want to enable automatic deployments, select the branch for which you want to enable it and click the "Enable Automatic Deploys" button. Any new commit to the branch will automatically trigger a new deployment.
![Enable automatic deployments in Heroku](/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdeploy-next-js-app-on-heroku%2Fenable-automatic-deployments.png&w=3840&q=75)
Step 4: Add configuration variables for your app
Navigate to the settings tab of your Heroku application and click the "Reveal Config Vars" button.
![Settings tab Heroku](/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdeploy-next-js-app-on-heroku%2Fsettings-tab.png&w=3840&q=75)
You'll then be able to see all the configuration variables (if any) for your app. Add all the required configuration variables for this boilerplate here.
![Heroku config variables](/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdeploy-next-js-app-on-heroku%2Fconfig-vars.png&w=3840&q=75)
Step 5: Trigger your first deployment
Navigate back to the "Deploy" tab of your application and scroll to the "Manual deploy" section (at the bottom of the page). Choose the branch that you want to deploy and click the "Deploy Branch" button.
![Deploy branch manually](/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdeploy-next-js-app-on-heroku%2Fmanual-deployment.png&w=3840&q=75)
Once the deployment has started you'll be able to see the build logs in the console window underneath. If the deployment has completed successfully you'll see a message stating that "your app was successfully deployed.". Click the "View" button to view your deployed application.
![Successful Heroku deployment](/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fdeploy-next-js-app-on-heroku%2Fsuccessful-deployment.png&w=3840&q=75)
That's all you need to host your application on Heroku. If you enabled automatic deployments, a new deployment will automatically be triggered for every commit to that specific branch. If you prefer to do manual deployments you can trigger a deployment as explained in Step 5.