Deploying Next.js to Vercel with Git Integration

•4 min read
nextjsverceldeploymentgithubgit

Deploying Next.js to Vercel with Git Integration

Vercel automatically builds and deploys your Next.js site every time you push to your repository. Here's how to set it up.

AI Dev Tip

Debugging with AI

Running into deployment issues? Copy this prompt and share it with Claude Code CLI or any AI assistant:

bash
claude "I'm having a Vercel deployment issue. Here's a guide: https://marthakelly.com/blog/deploying-nextjs-to-vercel-with-git"

The LLM can use this guide to help diagnose your specific problem and walk you through fixes.

Connect Your Repository

Go to Vercel and sign in with your GitHub account. Click Add New Project.

[Screenshot: Vercel dashboard with "Add New Project" button]

Vercel will show your GitHub repositories. Select the one you want to deploy.

[Screenshot: Repository selection screen]

Configure Your Project

Vercel detects Next.js automatically and sets the correct framework preset. Verify these settings:

  • Framework Preset: Next.js
  • Build Command: npm run build (auto-detected)
  • Output Directory: Leave empty (Next.js default is .next)
  • Install Command: npm install (auto-detected)

[Screenshot: Build settings configuration page]

If you need to customize the build command (for example, to generate a sitemap first), update it:

bash
# Build command
node scripts/generate-sitemap.js && next build

Add environment variables if your app needs them. Click Add under Environment Variables:

markdown
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

[Screenshot: Environment variables configuration]

Click Deploy. Vercel will:

  1. Clone your repository
  2. Install dependencies
  3. Run the build command
  4. Deploy to a production URL

[Screenshot: Deployment in progress]

Your Site Is Live

Once the build completes, Vercel provides:

  • Production URL: https://your-project.vercel.app
  • Deployment logs: Click the deployment to see build output
  • Preview URLs: Every branch and PR gets its own URL

[Screenshot: Successful deployment with production URL]

Connect Your Custom Domain

To use your own domain instead of vercel.app:

  1. Go to Settings > Domains
  2. Enter your domain (e.g., marthakelly.com)
  3. Click Add

[Screenshot: Domain settings page]

Vercel will provide DNS records to add at your domain registrar:

markdown
A     @    76.76.21.21
CNAME www  cname.vercel-dns.com

[Screenshot: DNS configuration instructions from Vercel]

Add these records in your domain provider (Hover, Namecheap, Cloudflare, etc.). DNS propagation takes 5-60 minutes.

Automatic Deployments

Every time you push to your main branch:

  1. Vercel detects the push via GitHub webhook
  2. Triggers a new build automatically
  3. Deploys to production once the build succeeds

[Screenshot: Recent deployments list showing automatic builds]

Push to other branches? Vercel creates preview deployments with unique URLs. Perfect for testing before merging to main.

Common Issues

404 on Production

If your site builds successfully but shows a 404 page:

Check Framework Preset in Settings > General. It must be set to Next.js, not "Other."

[Screenshot: Framework preset setting in Vercel]

If you previously had output: 'export' in next.config.js, remove it. Static export doesn't work with Vercel's serverless functions.

Build Fails

Check the deployment logs:

  1. Click the failed deployment
  2. Review the build output
  3. Look for missing dependencies or environment variables

Common fixes:

  • Add missing environment variables in Settings > Environment Variables
  • Ensure package.json includes all dependencies
  • Check that your build command matches what works locally

Next Steps

Your site is deployed, but it won't show up in Google yet. Set up indexing and analytics: Getting Your Next.js Site Indexed on Google.

Have Tips to Share?

Found a deployment trick that helped you? Have a question this guide didn't cover? Reach out - I'd love to hear from you.

References