Code With Love Logo

How to Deploy a Next.js Application to Vercel

Image of Michael Amore image
Michael AmoreDecember 16, 2022

3 min read


Vercel is the quickest and easiest way to deploy a Next.js application. With a few quick steps, your application is up and running on scalable cloud infrastructure and updates every time you push your code.

  • Create your Next.js application and push it to GitHub
  • Use Vercel's website to connect Vercel to your GitHub repo
  • Profit

What Makes Vercel a Great Option for Hosting for Your Next.js Application?

Vercel is the company that funds the development of Next.js and one of the core features of Next.js is the developer experience. So by extension, Vercel's integration with Next.js is first class (although you can deploy many other kinds of projects too). If you haven't tried Vercel as a hosting solution for your Next.js application, you're missing out. I'm hoping this article will convince you to give it a try.

Frameworks supported by Vercel

Step 1: Log into Vercel and Create a New Project

If you don't already have a Vercel account, create one. It's free (no credit card required) and they provide you with free, scalable cloud infrastructure. You have nothing to lose.

You will need to grant Vercel access to your GitHub repository, so I'd recommend choosing GitHub to log into Vercel as well. Once you're logged into Vercel, go to your dashboard page. Create a new project by clicking the "Add New..." button and then selecting the "Project" option.

How to create a new Vercel project

Step 2: Connect Vercel to an Existing GitHub Repository or Create a New Project

From there, you can either choose an existing repository from your GitHub account account, or a start a new Next.js project from one on the many starter templates they have available. In the past, I've always started a new project at the command line with something like npx create-next-app ..., but I prefer this method of starting my project from the Vercel website because it takes care of some of the initial setup for me.

Create a new Next.js project

On the next page, if you are creating a new project from a Vercel template, give your repository and click "Create".

Name your new project

Step 3: Deployment (Sit Back and Watch)

Vercel will immediately start deploying the latest version of the code from you GitHub repository.

New Vercel deployment has started

In less than a minute (depending on the size of the project you're deploying), you should see the following screen, indicating that your project has been deployed successfully.

Vercel deployment has completed successfully

Go to your "Deployments" tab and you will see the new deployment that just completed. Click on that deployment and on the following screen, click the "View" button.

View new Vercel deployment

Wrap It Up

In just a matter of a couple minutes, you were able to create a new project from a starter template, connect it to your GitHub, and make it publicly accessible on the internet. That's pretty amazing!

Code With Love

Take a break from the internet for a few minutes and go show love to someone. Remind a friend or family member why you are grateful to have them in your life. Smile at a stranger. It's the little things that make the biggest difference.

Remember ... When you code with love, you can change the world.

Now go change the world!