Deploy Next.js to Vercel: Complete Guide 2026

Vercel is the platform built by the creators of Next.js. It provides the smoothest deployment experience for Next.js applications with zero configuration. Here is how to set it up properly.

Step 1: Push Your Code to Git

Vercel deploys from Git repositories. Push your Next.js project to GitHub, GitLab, or Bitbucket:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/your-project.git
git push -u origin main

Step 2: Connect to Vercel

Go to vercel.com and sign up (free tier available)
Click "Add New Project"
Import your Git repository
Vercel auto-detects Next.js and configures build settings
Click "Deploy"

That is it for a basic deployment. Vercel handles:

Build optimization
CDN distribution
SSL certificates
Serverless function deployment
Edge network routing

Step 3: Add Environment Variables

Add environment variables through the Vercel dashboard:

Go to your project > Settings > Environment Variables
Add each variable with its value
Select which environments it applies to (Production, Preview, Development)

DATABASE_URL=postgresql://...
NEXT_PUBLIC_API_URL=https://api.yourdomain.com
RESEND_API_KEY=re_...

Variables prefixed with NEXT_PUBLIC_ are exposed to the client. All others are server-only.

Important: After adding environment variables, redeploy for them to take effect:

# Or trigger a redeploy from the dashboard
git commit --allow-empty -m "Trigger redeploy"
git push

Step 4: Custom Domain

Go to your project > Settings > Domains
Enter your domain (e.g., yourdomain.com)
Vercel provides DNS records to configure
Add the records at your domain registrar:
- A record: 76.76.21.21
- CNAME for www: cname.vercel-dns.com
Vercel automatically provisions an SSL certificate

DNS propagation can take up to 48 hours, but usually completes within minutes.

Redirect Configuration

Set up www to non-www redirect (or vice versa):

yourdomain.com → Primary
www.yourdomain.com → Redirects to yourdomain.com

Vercel handles this automatically once both domains are added.

Step 5: Preview Deployments

Every push to a non-production branch creates a preview deployment with a unique URL:

your-project-abc123-yourusername.vercel.app

This lets you:

Review changes before merging to main
Share previews with clients and stakeholders
Test with production-like infrastructure
Run integration tests against real deployments

Preview comments can be enabled so team members can leave feedback directly on the preview URL.

Step 6: Build Configuration

Vercel auto-detects most settings, but you can customize in vercel.json:

{
  "buildCommand": "pnpm build",
  "installCommand": "pnpm install",
  "framework": "nextjs",
  "regions": ["iad1"],
  "headers": [
    {
      "source": "/fonts/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Step 7: Serverless Function Configuration

Next.js API routes and Server Components run as serverless functions on Vercel. Configure them in next.config.ts:

// next.config.ts
const nextConfig = {
  experimental: {
    serverActions: {
      bodySizeLimit: "2mb",
    },
  },
};

export default nextConfig;

Function Regions

Deploy functions closer to your database:

// app/api/data/route.ts
export const runtime = "nodejs"; // or "edge"
export const preferredRegion = "iad1"; // US East

Step 8: Monitoring and Analytics

Vercel Analytics

pnpm add @vercel/analytics

// app/layout.tsx
import { Analytics } from "@vercel/analytics/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Speed Insights

pnpm add @vercel/speed-insights

import { SpeedInsights } from "@vercel/speed-insights/next";

// In your layout:
<SpeedInsights />

Step 9: Production Checklist

Before going live:

Common Issues

Build Fails

Check build logs in the Vercel dashboard. Common causes:

Missing environment variables
TypeScript errors
ESLint errors (Vercel runs next lint during build)
Missing dependencies

Slow Cold Starts

If serverless functions have slow cold starts:

Reduce function bundle size
Use Edge Runtime for latency-sensitive endpoints
Consider Vercel's Fluid Compute for heavy functions

404 on Dynamic Routes

Ensure generateStaticParams returns all expected paths, or that your dynamic routes handle missing data gracefully.

Free Tier Limits

Vercel's free Hobby tier includes:

Unlimited deployments
Automatic SSL
Preview deployments
Serverless functions (100GB-hours)
Edge functions (500K invocations)
100GB bandwidth

For most small business websites, the free tier is sufficient during development. The Pro plan ($20/month) adds team features, more bandwidth, and commercial usage rights.

Need Deployment Help?

We deploy and manage Next.js applications on Vercel for our clients, including custom domain setup, performance optimization, and monitoring. Contact us for professional deployment services.

How to Deploy a Next.js App to Vercel: Complete Guide