Choosing the best Next.js hosting platform

Written by Marie Starck✏️

Table of Contents

1. Hosting Next.js apps with Vercel
2. Use Netlify to host your app
3. Heroku as a Next.js hosting platform
4. Vercel vs. Netlify vs. Heroku: Which one is best for you?

With so many options available, choosing a hosting solution can feel a bit overwhelming. Some of the most common questions that developers asked themselves are:

• Is there a free plan? If so, what can I do with it?
• Is this technology supported?
• Is SSL included?
• Static vs server rendering?
• What about serverless functions?

This often leads to hours spent parsing through the documentation and can be extremely time-consuming.

Therefore, this article aims to aid your search. Different projects have different needs, but in this guide, we will go over three possible hosting solutions for Next.js, including Vercel, Netlify, and Heroku.

Hosting Next.js apps with Vercel

It would be hard to mention the hosting solutions available to Next.js projects without mentioning Vercel.

Created by the founders of Next.js, Vercel was built with this technology in mind. As a result, it is an attractive option for Next.js developers. Some of their biggest clients include Meta, Uber, and Auth0. To grow their product and offer interesting features, Vercel raised $40M) in December 2020.

Features of Vercel

Among these new features, the most obvious one is the built-in support for Incremental Static Regeneration. This speeds up builds because it allows developers to update some pages without re-building the entire site.

Vercel also offers support for serverless functions, and because it was created with Next.js in mind, it will automatically take all your API routes in pages/api and create those functions. Edge functions support is also available, although it’s still in beta.

When it comes to deployment, it’s very easy to deploy Next.js projects. Whether you use GitHub, GitLab, or Bitbucket, you can quickly connect your account and import any repositories. Once imported, you can set up automatic deployment. This means that every time code is pushed to a branch, the project will automatically rebuild and redeploy itself.

Once deployed, Vercel offers a few neat features for frontend developers. The first one is Preview Mode. This feature allows frontend teams to push code and preview these deployments live available on a unique URL.

Once approved, these deployments can then be pushed to production. This is very helpful for teams who often have to rely on screenshots or Loom to review and preview changes.

A second feature that may interest frontend developers is Analytics. Similar to a Lighthouse lab report, this gives your site a grade out of 100 based on certain metrics, such as time to first contentful paint.

It will track those metrics and display a dashboard for you to monitor them. There is a restriction, however. Analytics can only be enabled on one project when using the free plan.

On the free plan, you also get SSL and the ability to set up custom domains.

There are, of course, some disadvantages to Vercel. Unlike bigger hosting solutions, Vercel doesn’t offer any database add-ons. A second solution will therefore be required to host your data.

Finally, commercial sites are not available on the free plan. As a result, if you are running an eCommerce, you will automatically need a paid plan.

TL;DR:

Advantages to using Vercel

• Built by the creators of Next.js
• Incremental Static Regeneration built-in support
• Serverless and Edge (beta) functions support
• Easy deployment
• Easy configuration with Github/GitLab/Bitbucket
• Automatic deployments are available
• Preview mode on each build
• Analytics available (only one project on a free plan)
• SSL available on the free plan
• Custom domains setup available on free plans

Disadvantages to using Vercel

• No database add-ons
• Obligation to pay for commercial sites

Interested? Here is the deployment process: https://vercel.com/docs/concepts/next.js/overview

Using Netlify to host your app

Another interesting option for deploying your Next.js project is Netlify. Like Vercel, this hosting provider offers support to Incremental Static Regeneration, making your builds faster by re-building pages on a per-needed basis.

Serverless functions are also available. They work with JavaScript, TypeScript, or Go. Unlike Vercel, which picks up your functions automatically from your pages/api folder, you will need to put them in a functions folder. However, the setup should be straightforward and there is documentation to help you.

Deploying on Netlify is very easy. By connecting your GitHub/Bitbucket/GitLab account, you can easily import any repository and deploy your sites. Once deployed, you can set up automatic deployments such that every code push to a branch will rebuild your project.

Where Netlify is superior to Vercel is the list of add-ons they offer. Among them, Netlify Forms allow developers to manage forms and submission without extra code. It even integrates with third-party applications such as MailChimp, Zendesk, and more.

Another interesting feature, though still in beta, is Split Testing. With this, developers can A/B test their product with different deployments.

Finally, unlike Vercel, commercial projects are allowed on the free plan, which is great for eCommerce developers.

There are a few disadvantages with Netlify. The first one is that analytics is a paid feature and starts at $9 per site/month. The second is that no database add-ons are offered. To host your data, you will need another solution.

TL;DR:

Advantages to using Netlify

• Incremental Static Regeneration built-in support
• Live preview mode
• Serverless functions
• Easy deployment
• Easy configuration with GitHub
• Automatic deployments are available
• Lots of plugins and integrations
• Commercial projects are allowed on the free plans

Disadvantages

• Analytics is a paid feature
• No database add-ons

Interested? Here is the deployment process: https://www.netlify.com/with/nextjs/

Heroku as a Next.js hosting platform

A popular hosting solution among developers or startups is Heroku. Although it’s not built for Next.js, there exists a built pack so you can deploy your project easily.

It is fairly easy to deploy your project on Heroku. With its Heroku CLI, you can deploy a project in a few commands. In addition, like many hosting solutions, you can configure your GitHub/Bitbucket/GitLab account and set up automatic deployments.

For Next.js projects, you will need an extra configuration step to bind your port, but otherwise, deployment is fairly straightforward on Heroku.

Once deployed, there are many add-ons available for developers. Among these add-ons, you can find Postgres and Redis. For people looking for a one-stop shop, Heroku is an attractive option.

However, there are a few disadvantages to Heroku. First of all, despite its build pack, Heroku will run your project as a Node.js application. As a result, you will lose some of Next.js' most interesting features, such as Incremental Static Regeneration. Analytics are replaced by metrics and measured throughput, response time, and memory usage (only on paid plans).

On the free plan, Heroku offers the availability to set up custom domains. On the other hand, SSL is not included. Web applications on the free plans will also go to sleep after a period of inactivity.

TL;DR:

Advantages of Heroku

• Easy deployment to Heroku
• Easy configuration with GitHub
• Automatic deployments are available
• Several add-ons such as Postgres and Redis
• Customs domains setup available on free plans

Disadvantages

• No Incremental Static Regeneration support
• Heroku web dynos go to sleep after a period of inactivity on free plans
• SSL only available on paid plans
• Extra configuration needed to bind your port
• No web analytics, only metrics (for paid plans)
• No serverless functions support

Here is the deployment process.

Vercel vs. Netlify vs. Heroku: Which one is best for you?

For easy reference, here’s a quick table comparing the features of Vercel, Netlify, and Heroku.

Conclusion

In this article, you discovered three hosting solutions for Next.js: Vercel, Netlify, and Heroku. For each of them, this guide compared the support for serverless functions, incremental static regeneration, and the ease of the deployment process.

If you would like more options, there are other solutions that were not discussed but could be very interesting to try, such as:

• Cloudflare Pages: It’s newer than Vercel, but it’s already gained attention from developers. Here is a guide for Next.js
• AWS Amplify: If you are an AWS fan and want to take full advantage of the suites of products offered by them, AWS Amplify might be a good fit. Here is the documentation.

In the end, there is no magic solution. The hosting platform you decide to go with will depend greatly on your project and what its needs are. Thanks for reading.

---

LogRocket: Full visibility into production Next.js apps

Debugging Next applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your Next app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your Next.js apps — start monitoring for free.