Best platforms to deploy a Next.js project

I share with you two platforms where you can deploy your Next.js project. I discuss the pros and cons of each platforms and my recommendations.

When starting a new full-stack development project. I usually choose Next.JS as a starting point. Next.JS gives me the best of both worlds: An hybrid frontend that can be static and/or server side generated, with the power of React and API routes for backend related work.

Depending on the project requirements I either deploy Next.JS on Heroku or Vercel. In this post I help you choose the best platform to deploy your Next.JS project

Vercel

Develop. Preview. Ship. For the best frontend teams โ€“ Vercel
Deploy web projects with the best frontend developer experience and highest end-user performance.

Vercel was created by the creators of Next.JS it is a platform designed to help developers deploy frontend applications fast. With Vercel you can deploy your project in 2 easy steps:

  1. Add your git repo to the Vercel Dashboard
  2. Push code to your repo

Vercel will take care of the rest by building your web app and host it for you on their global CDN.

By deploying Next.JS on Vercel you gain another advantage. Vercel will also deploy your API endpoints alongside your frontend. In other words, you save time by having your code deployed in one location

Pros

  1. Your site is super fast thanks to their CDN
  2. You can deploy preview versions of your site using git branches
  3. Integrations to supercharge your workflow

The only con with Vercel in my opinion is that API routes are deployed as serverless functions. Which means that your endpoint is susceptible to cold start ย and there is a limit to how long the function can run for. For more info on that check this page

Heroku

Cloud Application Platform | Heroku
Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Heroku has been around a lot longer than Vercel. It is a PaaS (Platform as a Service) designed to help developers easily build and run web applications built in any language/framework in the cloud. Similarly to Vercel, you can deploy your web app by pushing your code to git and having Heroku take care of deployment.

Pros

  1. Frontend and backend deployed on the same dyno
  2. No cold start when calling API endpoints because Node.js is running as the server. (there is an exception to this, check next tweet)
  3. Add a database to your app in seconds using dyno add-ons.

Cons

  1. No CDN. HTML files will still load fast but not globally distributed
  2. Multiple dynos are needed if you have a dev/staging/prod environment
  3. On the free dyno only, there is a cold start if your app went idle after some time of inactivity.

Which one to choose?

Both platforms are great for deploying Next.js projects but the choice might come down to your needs.

Go with Vercel if

  1. If you use multiple branches for dev/test/prod and want to save time and resources
  2. Your API endpoints do light work and return fast. 3. You care about the CDN

Go with Heroku if:

  1. Your API endpoints are a bit more resource intensive and might take more than 5 seconds to return
  2. You need multiple add-ons for your project, like a database for example

Or go with both!

If you have specific needs that are fulfilled by both platforms why not use both! Here's a great example by Dan Starner on Twitter

Looking to build a web app with Next.JS, shoot me an email and I will be more than happy to help!