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

Introduction

Vercel is one of the fastest ways to ship a Next.js application. Every push to GitHub triggers an automatic deployment—preview deployments for pull requests and production builds for the main branch. Here's exactly how to set it up.

Step 1: Initialize Git

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

Step 2: Push to GitHub

1. Go to https://github.com/new and create a new repository (public or private—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 https://vercel.com/new and click Import Git Repository.
2. Authorize Vercel to access your GitHub account and select your repository.
3. Vercel automatically detects Next.js and configures 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 this to your Vercel URL (for example, https://your-project.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 use a custom subdomain:

1. Open your project in the Vercel dashboard.
2. Go to Settings → Domains.
3. Enter your preferred subdomain (for example, my-awesome-app.vercel.app). If it's available, you can claim it.

Step 6: Automatic Deployments

Every:

git push origin main

automatically triggers a production deployment.

Pull requests also receive their own preview deployment URL, making it easy to share changes for testing and feedback before merging.

Conclusion

GitHub + Vercel provides a streamlined CI/CD workflow for Next.js applications. You get automatic HTTPS, a global CDN, preview deployments, and zero-configuration deployments—all available on the Hobby plan.