How to Deploy a Next.js App to Vercel in 5 Minutes (2026 Guide)

Vercel is the fastest way to deploy a Next.js application — it's built by the same team that created Next.js, so everything works out of the box.

This guide walks through deploying a real Next.js project, from connecting your GitHub repo to configuring a custom domain. No prior DevOps experience needed.

---

Prerequisites

- A Next.js project (any version works, but 14+ recommended) - A GitHub account - A domain name (optional — you can use the free *.vercel.app domain)

---

Step 1: Push Your Code to GitHub

If you don't have a repository yet:

# Initialize git in your project cd your-project git init git add . git commit -m "Initial commit"

# Create a repo on GitHub first, then link it git remote add origin https://github.com/yourusername/your-project.git git branch -M main git push -u origin main

---

Step 2: Import to Vercel

1. Go to vercel.com and click "Add New → Project" 2. Click "Continue with GitHub" and authorize Vercel (it requests read-only access to your repositories) 3. Select your repository from the list 4. Vercel detects the framework automatically — confirm it shows Next.js

Configure Your Build Settings

Vercel will auto-detect most settings, but verify these:

| Setting | Expected Value | |---------|---------------| | Framework Preset | Next.js | | Build Command | next build | | Output Directory | .next (automatic) | | Install Command | npm install or yarn install |

Add Environment Variables

Click the "Environment Variables" section and add:

NEXT_PUBLIC_SITE_URL=https://yourdomain.com (or your vercel.app URL)

Later, you can add API keys, database URLs, and other secrets here.

5. Click "Deploy" — your site will be live in about 60 seconds.

---

Step 3: Add a Custom Domain

3.1 Add the domain in Vercel

In your project dashboard: 1. Go to Settings → Domains 2. Type your domain: example.com 3. Click Add

Vercel will show you the DNS records you need to configure.

3.2 Configure DNS

Go to your domain registrar (Cloudflare, Namecheap, GoDaddy, etc.) and add these records:

If your domain uses a DNS provider that supports CNAME flattening (most do):

| Type | Name | Value | |------|------|-------| | CNAME | @ | cname.vercel-dns.com | | CNAME | www | cname.vercel-dns.com |

If your provider requires A records:

| Type | Name | Value | |------|------|-------| | A | @ | 76.76.21.21 | | AAAA | @ | 2600:1f1c:4ae0::a0a |

> Important: If you use Cloudflare as your DNS provider, set the proxy to DNS only (grey cloud) initially. After SSL is configured, you can enable proxy.

3.3 Wait for Propagation

DNS changes can take anywhere from 30 seconds to 48 hours to propagate. Vercel will automatically provision an SSL certificate once it detects the DNS records.

Check the status in Vercel → Settings → Domains. You'll see a green checkmark when it's ready.

---

Step 4: Preview Deployments (Git Branch Workflow)

One of Vercel's best features is Preview Deployments — every pull request gets its own URL:

1. Create a feature branch:

   git checkout -b add-search-feature
   git add .
   git commit -m "Add search functionality"
   git push origin add-search-feature

2. Create a PR on GitHub — Vercel automatically deploys it:

   Preview URL: https://add-search-feature.yourapp.vercel.app

3. Share the preview URL with your team for review 4. Merge the PR — the production site updates automatically

This workflow eliminates the "it works on my machine" problem forever.

---

Step 5: Set Up Your Production Environment

5.1 Configure Analytics

Vercel offers built-in analytics (free tier available):

# In your project
npm install @vercel/analytics

// app/layout.tsx
import { Analytics } from "@vercel/analytics/react";export default function RootLayout({ children }) {
  return (
    
      
        {children}
        
      
    
  );
}

5.2 Enable Automatic HTTPS

Vercel automatically provisions SSL certificates for your custom domain. You don't need to do anything — but if you see a "Invalid Configuration" message:

1. Go to Vercel → Settings → Domains 2. Click "Refresh" to trigger certificate generation 3. Wait 30 seconds and refresh the page

5.3 Configure Cache and CDN

Vercel's edge network caches static assets automatically. For dynamic content:

// app/page.tsx — ISR example
export const revalidate = 3600; // Revalidate every hour

Or for full static generation:

export const dynamic = "force-static"; // Build-time generation

---

Step 6: Monitoring and Logging

Built-in Logs

- Real-time logs under Deployments → (click deployment) → Logs - Serverless function logs show execution time, memory, and errors - Edge function logs show edge location and latency

Setting Up Alerts

In Vercel Dashboard: 1. Go to Settings → Notifications 2. Configure alerts for: - Deployment failures - High error rates (>1%) - High latency (p95 > 500ms)

---

Common Deployment Issues

| Problem | Solution | |---------|----------| | Build fails with "Module not found" | Check your package.json — you may have missing dependencies | | 404 on page refresh | Ensure next.config.js doesn't have output: "export" for Vercel | | Environment variables not available | Add them in Vercel project settings (not just .env.local) | | Slow cold starts | Enable Serverless Functions warm-up in Vercel settings | | Custom domain shows "Invalid Configuration" | Click "Refresh" to trigger SSL certificate re-provisioning |

---

Step 7: Production Checklist

Before going live, complete these checks:

- [ ] Custom domain configured and SSL working - [ ] Environment variables set (all environments) - [ ] Analytics enabled - [ ] Error monitoring configured - [ ] Cache headers set for static assets - [ ] Lighthouse score > 90 on mobile and desktop - [ ] Robot.txt and sitemap generated - [ ] Status page URL bookmarked (Vercel Status: https://www.vercel-status.com)

---

Cost Breakdown

Vercel's free tier is generous — most personal projects and small business sites never need to upgrade:

| Tier | Price | Includes | |------|-------|----------| | Hobby (Free) | $0 | 100 GB bandwidth, 6000 build minutes/mo, unlimited sites | | Pro | $20/mo | 1 TB bandwidth, 6000 build minutes, team collaboration | | Enterprise | Custom | Custom SLAs, dedicated support, SSO |

For context: 100 GB bandwidth serves roughly 500,000 page views per month for a typical blog.

---

Next Steps

Once your Next.js app is deployed on Vercel:

1. Add Google Search Console to track SEO performance 2. Set up Google Analytics for visitor data 3. Integrate a headless CMS if you need content management

---