How To Host Your Next.js Application For Free On Heroku
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-appThis 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
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.
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 devThis 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.
Click on New repository and fill in the needed fields then save.
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 initthis will initialize GitHub in your project folder
$ git remote add origin https://github.com/just1and0/HostNextjsOnHeroku.gitthis will associate your repo with the project file
$ git add .then
$ git commit -m "initial commit"finally
$ git push -u origin masterYou 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
Fill in the necessary fields
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
