Back to Blog
by Davis Stanko · September 28, 2025 · 2 min read

Building and Deploying a Next.js Site on Vercel

In this guide you will create a Next.js website, push it to GitHub, and deploy it on Vercel. You will end with a live site, a working domain, and automatic HTTPS.

Step 1: Create Your Next.js App

Create a new project with:

npx create-next-app@latest

The tool asks a few setup questions. TypeScript, ESLint, and the App Router are reasonable defaults. Answer them and let the tool finish.

Test the app locally:

cd your-app-name
npm run dev

Open localhost:3000 in your browser. You should see the default Next.js page.

Step 2: Push Your Code to GitHub

Vercel deploys from a git repository. GitHub is the default choice. GitLab and Bitbucket also work.

Create a new, empty repository on GitHub. Then, from your project folder, run:

git init
git add .
git commit -m "Initial commit"
git branch -M master
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin master

Your code is now on GitHub.

Step 3: Create a Vercel Account

Go to vercel.com and sign up. Sign up with your GitHub account. This links the two right away and skips a separate authorization step later.

Step 4: Import and Deploy the Project

From your Vercel dashboard, click Add New Project. Select your GitHub repository from the list.

Vercel detects that this is a Next.js project on its own. It sets the build command and output settings for you.

Click Deploy. This takes a minute or two.

When the build finishes, Vercel gives you a URL ending in .vercel.app. Your site is live at this address.

Step 5: Understand the Free Tier

This entire setup runs on Vercel's Hobby plan, which costs nothing. The Hobby plan covers:

  • 100 GB of bandwidth a month
  • 1 million serverless function calls a month
  • Automatic HTTPS
  • A free .vercel.app subdomain
  • Unlimited deployments

These limits are more than enough for a personal site or blog.

Step 6: Add a Custom Domain (Optional)

Vercel sells domains directly. Buying through Vercel connects the domain to your project automatically.

From your project dashboard, go to Settings > Domains. Search for a name and buy it. Vercel points it at your project as part of the purchase.

If you already own a domain elsewhere, you can still use it. Add it in the same Domains tab, then update your registrar's DNS records to match the values Vercel gives you.

Step 7: Deploy Automatically on Push

Vercel watches your GitHub repository. Push a commit to main, and Vercel deploys the update on its own.

Vercel also builds a preview deployment for every other branch and pull request. This gives you a live, shareable link for changes before they reach master.

Closing Thoughts

Compare this to running your own server: no registrar to configure by hand, no nginx config, no Certbot, no cron job, no server to patch every few months. Push code, and the site updates itself.

This is the easiest path to a live website.

Back to Blog