Vercel - Create a Next.js App & Deploy with Vercel

Vercel is a one stop shop for quickly and effortlessly setting up automated production builds and deployments.

About Vercel

Vercel has a very simple and easy to use CLI (Command Line Interface) that allows you to run one simple command to deploy from your local machine.

It also comes with the ability to link directly to your Github account in order to automate the build and deploy process as well. This is a very nice feature and is incredibly easy to set up and use.

This is a quick and easy walkthrough of creating a Next.js app and deploying a production ready build within minutes.

Prerequisites

• Git installed
• Github account
• Node installed
• Basic knowledge of how to run commands in a terminal

Getting Started

1. Create Next.js App

In your terminal of choice run the following command

npm init next-app my-next-app && cd my-next-app

As a result it will prompt you to select some options. Select Default Starter App and CD into the new project folder

2. Create Vercel Account

Next we need to set up a Vercel account so navigate to the Vercel website.

• Click Sign Up
• Click Continue with Github
• It will then prompt you to allow Vercel access to your Github account, go ahead and click Authorize.
• Enter your username and avatar info and click continue.

3. Create Vercel Project and Deploy

Download the Vercel CLI

npm i -g vercel

You can verify it has installed successfully by running the following command.

vercel --version

Configure your Vercel credentials

vercel login

It will prompt you to enter the gmail email address associated with your Github account that you created your Vercel account with.

Confirm your email by clicking the button in the email sent to that address.

Create a new Vercel Project and deploy by running the previous command again.

vercel

• Confirm set up and deploy by entering y + enter
• It will then prompt you to select a Scope to deploy too. If you belong to multiple teams or accounts it will show all of them in a list and you can select which one to deploy to using the arrow keys. Then hit enter
• Then it will prompt you to link to another project. If you already have a project deployed in Vercel you can link the project you're working on locally to it otherwise select n and it will create a new project.
• Enter your project name In this case we are going to name it my-next-app-prod so that when we setup our Staging environment we can tell the difference between the two apps.
• Which directory is your code located? This is where Vercel will look inside the folder you send it in order to build and deploy the app. Since we just setup the default Next.js app this will be the default ./ so you can just hit enter
• Vercel will then automatically detect your npm build scripts in order to know what commands to execute in order to build and start the app. Since we have the default Next.js app we will hit n to override the settings and let Vercel handle the commands.

IMPORTANT

Upon successful completion of the creation and deployment of the project Vercel will create a new folder in the root directory of your project called .vercel This contains your orgId and projectId for this project in the project.json file.

These keys are sensitive so DO NOT check them into Github. Vercel should automatically add this folder to the .gitignore file so you don't accidentally do this.

If you do delete your keys and are unable to recover them you can redeploy the app from your local machine and it will generate the folder again.

Automate Deployments

Vercel comes with the ability to link directly to your Github account in order to automate the build and deploy process as well. This is a very nice feature and is incredibly easy to set up and use.

1. Create Github Repository

Let's begin by creating a new repository in Github. This can be named whatever you want and don't initialize with a README.md file.

Next you'll be directed to an empty repository page. Go ahead and copy the command under the "...or push an existing repository from the command line."

Go ahead and run the following commands from the root of your Next application directory.

git remote add origin <GITHUB_REPO_URL>

git push -u origin master

2. Enable Git Integrations

• In the Vercel dashboard click on your newly create project and navigate to the settings page.
• Click. on the Git Integration tab and then click the Install Vercel For Github button
• This will then prompt you to select the repository you want the build/deployment to be based off of. Then click the save button.

Now every time you push a change to Github this will automatically trigger a new build and deploy a temporary Preview app that you can view and check to see if everything looks right before deploying to production.

3. Trigger Build and Deploy

Now let's go ahead and make a change and deploy that new change. In your terminal check out a new branch by running the following command.

git checkout -b my-new-branch

Then update the current index.js file in the pages directory to the following.

From this...

 <h1 className="title">    Welcome to <a href="https://nextjs.org">Next.js!</a> </h1>

To this...

<h1 className="title">    Deployed with Git Integrations!</h1>

Next, we're going to add, commit, and push the new changes on the branch to Github by running the following commands.

git add .

git commit -m "Deploying with Git Integrations"

git push --set-upstream origin <BRANCH_NAME>

If you head back to Github you will see the new changes in the repository so let's make a new pull request from our new branch into the master branch.

Now you'll notice a few things. Vercel has automatically kicked off a new build with the changes made in your new branch.

This will deploy a new Preview app that you can check to see if your changes are correct before merging into the master branch.

Now merge the pull request and wait for Vercel to inform you that the new build has been deployed to Production and visit the newly deployed site.

Summary

Thats pretty much all there is to it! We created a new Next.js application and deployed to Vercel with a few simple commands.

Then we automated the deployment process by using Vercel's built-in Git Integrations.

I hope you found this walkthrough useful and enjoyed it!

Watch Video Walkthrough

You can find the video for this and other Web Development tutorials at our Youtube Channel DeadbearCode!