How To Host Your Next.js Application For Free On Heroku

Photo by imgix on Unsplash

If there’s one thing that makes the development process of any product or platforms seamless it’s the tools used during development.

Next.js is a beautiful frontend library that allows you to build really cool web apps but just building your site isn’t enough, there’s a lot of work which goes on during development and there’s a need to set up CI, carry client along in the development process and all this involves hosting your application.

Heroku is a very good tool when it comes to the issue of hosting, as it handles pretty much everything for you, from Wait for CI to pass before deploy, to automatic deploy site, Heroku does it all!

Well then, in this article I'd be showing you the easiest way to host your Next.js application on Heroku.

Some Definitions

Next.js is based on React, Webpack, and Babel. It allows us to start a project in a very simple way

Heroku is a cloud platform that lets companies build, deliver, monitor and scale apps — we’re the fastest way to go from idea to URL, bypassing all those infrastructure headaches.

Now we have an idea of what Next.js and Heroku are let’s get to work!

it’s important to know that there are different ways to deploy your Next.js application to Heroku but I promised the easiest way to get it done so let’s dive right in.

Prerequisites

Setting up Next.js on your Machine

It’s assumed you have node installed on your machine so navigate to a work folder for this project you might have created and run the code below on your console

npx create-next-app name-of-app

This will create a folder called name-of-app and that’s it! your application is all setup.

To view the application on your machine, we’d have to run the build command, to do this run the code below in your terminal;

npm buildor yarn build

For some reason, I don’t really use npm, I'm more into yarn. If you’d want to use yarn just install using this link

Now, this is done, you should see this in your console

view of built nextjs app

now your application has created a build which is basically what will be served on the web.

Now to view your app, run the code below.

npm startoryarn start

This will load your site on your browser. and you’d be greeted with this screen below.

Nextjs running on a mac

Note: most of the time you’d be coding you’d want your site to reload when making a change in your code, you’d not want to keep reloading the site manually, it could get stressful, so when still in development I'd suggest you run the yarn dev

yarn dev

This will automatically reload your site anytime you make a change.

Now we have our Next.js application running we’d have to make some little changes in our package.json file, we’d be doing two things

  • editing the start script
  • adding a heroku-postbuild script
"start": "next start -p $PORT","heroku-postbuild": "npm run build"

once you’re done editing your package.json file we’re all good to go!

Pushing our code to GitHub

Now we’re done setting up Next.js on our machine.

But we’d like to have this on a server so we can access it over the internet, so the first thing we’d have to do is have our codes on a GitHub repo. To do this login to your GitHub account and create a new repo for this project.

creating a new repository

Click on New repository and fill in the needed fields then save.

HostNextjsOnHeroku

and our HostNextjsOnHeroku repo is created!

Now we have our repository we’d have to upload our source code to GitHub so navigate to your project folder in your console/terminal and run the following code

$ git init

this will initialize GitHub in your project folder

$ git remote add origin https://github.com/just1and0/HostNextjsOnHeroku.git

this will associate your repo with the project file

$ git add .

then

$ git commit -m "initial commit"

finally

$ git push -u origin master

You might be prompted to put in your GitHub login details, it’s just GitHub’s way of ensuring the owner of the repo is the one pushing code or the person pushing to the repo is authorized.

If all goes well you should end up with this message on your console

Now we have successfully pushed our codes to GitHub, so what’s next!?

Now we have our codes on GitHub we’d log in to our Heroku account to set things up

Setting up our project on Heroku

It’s assumed you have a Heroku account so login to your account and create a new app

creating a new app on Heroku

Fill in the necessary fields

creating a new app on Heroku

Add a pipeline

finally, hit the create app button. Once the app is created you should now see this

Now our application has been created you need to associate it with your GitHub repo, to do this click on the Github(connect to Github) option on the Development method.

type in the name of the repo, as named on Github.

the repo would show up as options, click the connect button just beside it.

And that’s it, you’ve successfully linked your Nextjs app with Heroku.

What Next?

Now we’ve linked the repo with our Heroku account, you’d have to deploy the application, so scroll down to Manual deployment and click on Deploy Branch

If all goes well you should be seeing the message below

this means our application has successfully been deployed! so go ahead and click on view, to open up the application.

I have gone ahead to do some editing to the landing page of our application so we now have this.

Conclusion

Getting your project on a live server is as important as writing that last line of code and having the satisfaction that you can sleep well at night from now on.

Heroku is a beautiful platform that handles such a task for you and for no fee at all. In the long run, it also eases your development process with the addition of auto-deployment, and Wait for CI to pass before deploy! Heroku is just awesome and should be something you begin to use in your day-to-day development.

Sure enough, we’re done Hosting our application.

You can also check out the code on Github, don’t forget to Star.

Also, check out the site we just deployed and feel free to reach out to me on twitter

Founder of React Native Nigeria 🇳🇬 👻👻Building cheef.ng 👻👻 JS Lover ● Don’t forget to 👏 and follow!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store