DEV Community

Cover image for Next.Js Series #7 - Deploying the Web Page to Vercel for FREE (from Github repo)
Dylan Oh
Dylan Oh

Posted on • Updated on

Next.Js Series #7 - Deploying the Web Page to Vercel for FREE (from Github repo)

We are going to demonstrate how easy it is to deploy your static web app to Vercel for free in the last article of the series.

First, commit and push the project to a Github repo if you haven't. Go to https://vercel.com/login, create a Vercel account with Github account authorization. You will now see an empty dashboard (if you have not deployed anything to Vercel before).

Image description

Click "Create a New Project".

Image description

Choose a Github account, and Github window will pop up for you to select the project that you want to deploy.

Image description

Type and select the repo that you commited your project to install Vercel.

Image description

You will now see that the Github repo is ready to be imported. Click on "Import".

Image description

You can skip all the customisable configurations for our demo project. Click on "Deploy".

Image description

You may see that the app is being deployed.

Image description

When you see this page, it means the deployment has been successful. Click on "Go to Dashboard".

Select the app that we have deployed.

Image description

You can see that now the app is live and running.

Image description

You may test on different routes to see if they are working properly.

Image description

I might consider to add one more article on the topic for Next.Js Analytics by Vercel to this series. It has a great dashboard and tracking some metrics that we mentioned in series #6.

Thanks for following through this short series of brief introduction to Next.Js.

I shall continue to post more Web Dev, UIUX related articles (and more non-technical articles) in the future. Stay tune!

Do follow me for more future articles on web design, programming and self-improvement 😊

Discussion (0)