If you want to create a NextJs powered website, you will need a way to host it. Currently, there are a bunch of free and commercial providers that support NextJs, however, the big question is which one is the best for your project?

Within this tutorial, I will review three of the most popular hosting options. As Haruko is no longer a thing, the three providers that we will review today are Vercel, Netlify, and [Github Pages)[https://pages.github.com/].

If you want to know which service will win this fight, read on 🔥🔥🔥

If you are a newcomer to NextJs and website hosting, the good news is that all three solutions are pretty simple to get up to speed with. You can typically go from complete newbie status to hosting your website in production in under 20 minutes. Each service provider allows for the hosting of your files, the building of your code, and hosting on the edge.

This all works by hooking up your source control repository to the hosting platform and pushing. On push, the provider will build your app and automatically deploy it to their corresponding Edge Network. As your code will be running on the edge you know it will be fast.

GitHub Pages Overview

Out of the three providers reviewed today, surprisingly GitHub Pages is by far the most basic. As you could probably guess, Github Pages only work with code stored in Github. Using GitHub Pages, your website can be served either through a free github.io domain or via a custom domain if you prefer.

As GitHub Pages is a free service, it does come with a lot of caveats. The big killer against using it in my opinion is its license restrictions. This statement is taken from the GitHub page:

GitHub Pages is not intended for or allowed to be used as a free web hosting service to run your online business, e-commerce site, or any other website that is primarily directed at either facilitating commercial transactions or providing commercial software as a service (SaaS).

On top of this commercial limitation, GitHub Pages sites also have a few service limitations that are worth knowing about. First, the recommended size limit for your repo is 1 GB. Next, your website will have a soft bandwidth limit of 100 GB per month. Finally, GitHub Pages have a soft limit of 10 builds per hour. Except to encounter rate limiting if you hit these caps.

A final consideration is website support. There are no SLA times mentioned on the GitHub Pages website. Do not expect much help or real-time support if your website goes down unless you have a GitHub enterprise plan.

Vercel Overview

Vercel is the maker of NextJs, so you would hope that they know everything required to host it. Compared to GitHub Pages, Vercel offers a lot of services and capabilities. These include things like automatic Git integration, analytics, incremental static regeneration, image optimization, and caching.

In terms of source-code support, Vercel can integrate with GitHub, GitLab, and BitBucket. You can opt to serve your website using a free vercel.app domain, or, you can opt to use your own custom domain.

Another really nice feature of Vercel is its Marketplace. From the marketplace, you can easily integrate your pipeline with technologies like Redis, Mongo, Contentful, and even Google lighthouse. After installing the Lighthouse plug-in you can get performance-related metrics displayed in the dashboard when you build.

Asides from its marketplace, Vercel ships with some pretty good analytics capabilities that will allow you to monitor how your website is behaving. To speed up deployments, they also offer their own CLI tool. The CLI tool will allow you to create and publish different deployments all via the terminal without the need to log into the UI. Finally, there are some security-related things, like the ability to restrict access to your site via password protection. Just like Netlify, Vercel also has the ability to create and host both serverless and Edge functions.

One potential red flag for using Vercel as your web host is its fair usage policy. You cannot use their services for CPU-intensive tasks like crypto mining. Your standard NextJs website would not fall into this camp, but, if you wanted to use serverless functions or edge functions in anger it might Furthermore, Vercel also requires all projects that are used for commercial purposes to be on a paid plan.

Netlify Overview

Netlify is probably the most used hosting provider for JAMStack sites, however, does this mean that it is the best option for NextJS? Like Vercel, Netlify integrates with GitHub, GitLab, and BitBucket. Like the other options, you have access to use a free Netlify domain (netlify.app), or, you can use your own custom domain. You also get free SSL certs out-the-box and the ability to create serverless and edge functions and access to a CLI tool!

Although the focus of this review is on NextJs hosting, hosting isn't the only capability offered by Netlify. In terms of added extras, Netlify is easily the hands-down winner. In terms of capabilities, you can get all the standard build and deploy capabilities that you would expect. These features include deploy previews, forms, identity/security, analytics, and build plug-ins. Netlify also ships with services for handling forms and form submissions, managing active users via an Identity provider based on the GoTrue API, and out-of-the-box A/B testing!

Price Comparison

All options have pretty impressive free plans. You can see the full pricing info at these links:

GitHub Pages provides the most basic service out of the three by far. GitHub Pages only offer a free tier that comes with all public GitHub repositories. The service offers what it offers. If you need to ramp up your solution drastically, you will likely need to move to another hosting provider as there is no way to scale additional build minutes, etc... I would say consider using GooglePages if you host your NextJS app publicly in GitHub and you want to create a portfolio site that will not get huge traffic.

Vercel has three pricing tiers. The free tier gives you 100GB bandwidth, 6,000 minutes of build time, and 100 GB hours for serverless function execution per month on the free plan. Vercel will also give you 50 domains per project.

Netlify also provides 100GB of bandwidth per month, however, they only offer 300 build time minutes per month. As Netlify has additional services, it is worth noting that you get 100 form submissions per month. If you hit that limit you will need to pay an additional $19 dollars. Out-of-the-box, Netlify Identity allows you to use over 1000 free monthly active users, with a charge of $99 when exceeded. As Vercel does not offer these types of services, there is no comparison here.

The decision between Vercel and Netlify is closer than the GitHub pages. Vercel offers more build minutes in the free term however, it comes at the expense of being able to host fewer sites overall. As Netlify offers more capabilities, you get more bang for your bucket if you have a need to use these services. Both UIs are easy to use and provide similar capabilities. Netlify definitely has more capabilities and I find things like setting up environment variables and building branches slightly more intuitive within Netlify.

Conclusion

I think at this stage it's fair to say that GitHub Pages clearly lose the fight. It offers the least amount of capabilities. For me, there are just too many restrictions around the service. As Netlify and Vercel also both offer free tiers, I would always opt to use one of them over GitHub pages even for my personal hobby projects.

The add-ons offered by Netlify definitely make it stand out from Vercel, however, if you do not need these added features the differences between the two vendors are very small. Yes, Vercel makes NextJS, however, Netlify supports all the features NextJs offers.

You will get more build minutes with Vercel, however, if you are only doing a limited amount of builds then you will likely never hit any usage caps. Both providers are both easy to set up, and they are quick and fast. I do not think you would be unhappy if you had to use either vendor, however, if you want my opinion on the winner, if I was forced to pick, as Netlify has more features, I would pick Netlify. Happy Coding 🤘