How to Deploy Next.js App to Vercel ?

Introduction: Vercel is a deployment tool used by frontend developers to instantly deploy and host web applications without knowing complex configurations. 

Features of Vercel:

• Easy to use and has a lifetime free tier service which is beneficial for beginners who want to deploy their side-project with minimal support.
• Can create an account using GitHub, GitLab, Bitbucket, or with Email.
• Allows developers to use a custom domain that is HTTPS enabled.
• Can be used to build unlimited websites and APIs.
• Changes in data lead to an automatic push of the web page thereby reducing the constraint of static generation.
• High-Performance Edge Network leads to faster routing.
• Each pull request has its preview URL which is useful while running tests or gathering feedbacks.

Step 1: Create a Next.js App and setup Vercel Account: Create the Next.js app by running the following command:

npx    create-next-app

or

yarn create next-app     

Once the Next.js app is created, go to Vercel website and signup with GitHub/Email-id to create an account. To deploy our application, we need to install the Vercel CLI. Run the following command to install Vercel globally (You can also install Vercel locally in your project folder).

npm i -g vercel

To check if vercel is installed in our machine, run the command:

vercel --version

If vercel is installed correctly, it will install the latest version i.e, 23.0.0

Login in to your vercel account by running the following command 

vercel login

You will be prompted with the following question – Enter your email: Enter your mail for confirmation.

Step 2: Deployment: Once you’ve logged in, in order to deploy your Next.js project you need to run ‘vercel’ command.

vercel

The command will show the latest Vercel version and ask the following questions:

1. Set up and deploy “~/projectname”? [Y/n]:
2. Which scope do you want to deploy to?
3. Link to an existing project? [y/n]
4. What’s your project name?
5. In which directory is your code located?
6. Want to override the settings? [y/n]

After you’ve completed these questions, head to your Vercel account and click on the Visit button to see your project live on Vercel.

Note: After deploying your project from the command line, Vercel creates a .vercel folder that contains the project.json file. This file contains the orgId and the projectId keys which are confidential and ‘SHOULD NOT’ be pushed to Git.

Step 3(Optional): Using Git and GitHub for Automation: Vercel automatically deploys any changes made to your Git repository. Each time a new pull or merge request is created, Vercel creates a new build and setups a new deployment.