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:
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.
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.
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:
Interested? Here is the deployment process: https://vercel.com/docs/concepts/next.js/overview
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:
Interested? Here is the deployment process: https://www.netlify.com/with/nextjs/
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:
Here is the deployment process.
For easy reference, here’s a quick table comparing the features of Vercel, Netlify, and Heroku.
| Features | Vercel | Netlify | Heroku |
| Incremental Static Regeneration (ISR) | Yes | Yes | No |
| Serverless functions | Yes | Yes | No |
| Easy deployment | Yes | Yes | Yes |
| Configuration with Github/GitLab/Bitbucket | Yes | Yes | Yes |
| Automatic deployment | Yes | Yes | Yes |
| Preview mode | Yes | Yes | No |
| Analytics | Yes | $9 per site/month | Metrics instead of Analytics |
| Custom domains | Yes | Yes | Yes |
| SSL on free domains | Yes | Yes | No |
| Commercial sites on free plans | No | Yes | No |
| Add-ons | None |
|
|
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:
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.
Debugging Next applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking 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.js 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.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Learn how to implement one-way and two-way data binding in Vue.js, using v-model and advanced techniques like defineModel for better apps.
Compare Prisma and Drizzle ORMs to learn their differences, strengths, and weaknesses for data access and migrations.
It’s easy for devs to default to JavaScript to fix every problem. Let’s use the RoLP to find simpler alternatives with HTML and CSS.
Learn how to manage memory leaks in Rust, avoid unsafe behavior, and use tools like weak references to ensure efficient programs.
Learn more →
