GitHub to Vercel: Deploying Your Next.js App in 10 Minutes

Introduction

Vercel is the fastest way to ship a Next.js application. Every push to GitHub triggers an automatic deployment — previews for pull requests, production builds for the main branch. Here's exactly how I set it up.

Step 1: Initialise Git

cd your-nextjs-project
git init
git add .
git commit -m "Initial commit"

Step 2: Push to GitHub

1. Go to github.com/new and create a new repository (keep it private or public — your choice).
2. Copy the remote URL and run:

git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git branch -M main
git push -u origin main

Step 3: Import on Vercel

1. Go to vercel.com/new and click Import Git Repository.
2. Authorise Vercel to access your GitHub account and select your repo.
3. Vercel auto-detects Next.js and sets the build command (next build) for you.

Step 4: Add Environment Variables

Before clicking Deploy, expand Environment Variables and add all the keys from your .env.local:

• DATABASE_URL
• NEXTAUTH_SECRET
• NEXTAUTH_URL → set to your Vercel URL, e.g. https://harsh-patel-softwaredev.vercel.app
• CLOUDINARY_* keys
• SMTP_HOST, SMTP_USER, SMTP_PASS, ADMIN_EMAIL

Step 5: Get Your Unique URL

After deployment, Vercel assigns a URL like your-project.vercel.app. To get a custom subdomain like harsh-patel-softwaredev.vercel.app:

1. Go to your project in the Vercel dashboard.
2. Click Settings → Domains.
3. Type the subdomain you want (e.g., harsh-patel-softwaredev.vercel.app) — Vercel will let you claim it if it's available.

Step 6: Automatic Deployments

Every git push origin main now triggers a production deployment automatically. Pull requests get their own preview URL — share it with clients for feedback before merging.

Conclusion

GitHub + Vercel is the fastest CI/CD pipeline for Next.js. Zero config, automatic HTTPS, global CDN, and preview deployments — all for free on the Hobby plan.