Vercel Free Deployment Guide: Deploy Next.js Apps for Free in 2026

Vercel is the deployment platform built by the creators of Next.js. It offers a generous free tier that lets you deploy unlimited static sites and serverless applications with a global CDN, automatic HTTPS, and zero configuration. For developers, freelancers, and small teams, Vercel's free tier is the fastest way to get a Next.js app from local development to a live URL. This guide covers everything from your first deployment to advanced configuration with custom domains, environment variables, and cost optimization.

Why Vercel in 2026

Vercel is not the only free deployment platform, but it is the best one for Next.js apps because it is built by the same team and supports every Next.js feature natively.

Platform	Free Tier	Next.js Support	Serverless Functions	Custom Domain	Best For
Vercel	Yes (Hobby)	Full native support	Yes (100 GB-hrs)	Yes	Next.js apps
Netlify	Yes	Good (adapter needed)	Yes (125K calls)	Yes	Static sites
Cloudflare Pages	Yes	Partial (edge runtime)	Yes (workers)	Yes	High-traffic static
Render	Yes (limited)	Good	Yes (750 hrs)	Yes	Full-stack apps
Railway	$5 credit/mo	Good	Yes	Yes	Backend apps
Fly.io	$0 (small)	Good	Yes	Yes	Docker apps

Vercel wins for Next.js because it supports App Router, Server Components, Route Handlers, ISR (Incremental Static Regeneration), and Edge Functions without any additional configuration. Other platforms require adapters or do not support all Next.js features.

Vercel Pricing and Free Tier Limits

Vercel offers three pricing tiers. The Hobby (free) plan is designed for personal, non-commercial projects.

Plan	Price	Best For	Key Limits
Hobby	$0	Personal projects, portfolios	100 GB bandwidth, 100 GB-hrs serverless, 3rd-party analytics
Pro	$20/user/month	Small teams, commercial projects	1 TB bandwidth, 1000 GB-hrs serverless, team collaboration
Enterprise	Custom	Large organizations	5 TB+ bandwidth, SSO, DDoS mitigation, SLA

Hobby Plan Limits in Detail

Resource	Free Tier Limit	What Happens When Exceeded
Bandwidth	100 GB/month	Site continues to run; you are asked to upgrade
Serverless function executions	100 GB-hours/month	Functions may be throttled
Serverless function duration	10 seconds (free), 60 seconds (Pro)	Long-running functions time out
Edge function requests	1,000/day	Requests are rejected
Build execution time	6,000 minutes/month	Builds may queue or fail
Concurrent builds	1	Additional builds queue
Deployments	100/day	Additional deploys are rejected
Projects	Unlimited	No limit
Custom domains	50 per project	No limit for most users
Environment variables	Unlimited	No limit
Team members	1 (solo only)	Pro required for teams

Is the Free Tier Enough?

For most personal projects, portfolios, and small blogs, the free tier is more than sufficient:

100 GB bandwidth = approximately 500,000 page views per month (at 200 KB per page)
100 GB-hrs serverless = millions of function calls (a typical API call uses 0.001 GB-hrs)
Unlimited projects = deploy as many apps as you want

The free tier is not suitable for:

Commercial projects (Vercel requires Pro for commercial use)
Sites with more than 500K monthly visitors
Apps with long-running serverless functions (>10 seconds)
Teams with multiple developers

Step 1: Create Your First Next.js App

Before deploying, you need a Next.js app. If you already have one, skip to Step 2.

Create a New Next.js App

npx create-next-app@latest my-app
cd my-app
npm run dev

Visit http://localhost:3000 to see your app running locally.

Project Structure

my-app/
├── app/                  # App Router pages
│   ├── layout.tsx        # Root layout
│   ├── page.tsx          # Home page
│   ├── about/
│   │   └── page.tsx      # About page
│   └── api/
│       └── hello/
│           └── route.ts  # API route
├── public/               # Static assets
├── package.json
├── next.config.mjs       # Next.js configuration
└── .env.local            # Environment variables (local only)

Step 2: Deploy to Vercel (Browser Method)

The simplest way to deploy is through the Vercel website.

Step 2.1: Push Your Code to GitHub

# Initialize git if you have not already
git init
git add .
git commit -m "Initial commit"

# Create a repository on GitHub, then:
git remote add origin https://github.com/username/my-app.git
git branch -M main
git push -u origin main

Step 2.2: Connect Vercel to GitHub

Go to vercel.com and sign up with your GitHub account
Click "Add New Project"
Import your GitHub repository
Vercel auto-detects Next.js and configures build settings

Step 2.3: Configure and Deploy

Review the auto-detected settings:

Setting	Value (auto-detected)
Framework Preset	Next.js
Build Command	`next build`
Output Directory	`.next` (handled by Vercel)
Install Command	`npm install`

Add environment variables (if any) under "Environment Variables"
Click "Deploy"
Wait 1-3 minutes for the build to complete
Your app is live at https://my-app.vercel.app

Step 2.4: Automatic Deployments

Once connected, Vercel automatically deploys when you push to main:

Push code to GitHub: git push origin main
Vercel detects the push and starts a build
Build completes in 1-3 minutes
Production deployment is updated automatically
Preview deployments are created for pull requests

Step 3: Deploy to Vercel (CLI Method)

The Vercel CLI gives you more control and lets you deploy from your terminal.

Install Vercel CLI

npm install -g vercel

Login to Vercel

vercel login
# Enter your email or use GitHub login

Deploy from Your Project Directory

cd my-app
vercel

The CLI will ask:

Set up and deploy? → Y
Which scope? → Select your account
Link to existing project? → N (for new project)
What's your project name? → my-app
In which directory is your code located? → ./
Want to modify settings? → N (auto-detected for Next.js)

Vercel builds and deploys your app. You get a preview URL immediately.

Deploy to Production

vercel --prod

This deploys directly to production at https://my-app.vercel.app.

Step 4: Set Up a Custom Domain

Vercel provides free .vercel.app subdomains, but a custom domain looks more professional.

Step 4.1: Purchase a Domain

Registrar	.com Price	Renewal	Free WHOIS Privacy	Notes
Cloudflare	$9.15/year	$9.15/year	Yes	At-cost pricing
Porkbun	$10.16/year	$10.16/year	Yes	User-friendly
Namecheap	$8.98/year (first year)	$12.98/year	Yes	Popular, good UX
Squarespace	$12.00/year	$12.00/year	Yes	Google Domains successor

Step 4.2: Add Domain in Vercel

Go to your Vercel project dashboard
Click "Settings" > "Domains"
Enter your domain (e.g., mydomain.com)
Click "Add"
Vercel shows you the DNS records to add

Step 4.3: Configure DNS Records

Add the following DNS records at your domain registrar:

Record Type	Name	Value	TTL
A	@	76.76.21.21	Auto
CNAME	www	cname.vercel-dns.com	Auto

Alternatively, use Vercel's nameservers:

Change your domain's nameservers to Vercel's (shown in the Vercel dashboard)
Vercel manages all DNS records automatically

Step 4.4: Verify Domain and HTTPS

After adding DNS records, go back to Vercel > Settings > Domains
Wait for DNS to propagate (usually 5-30 minutes, up to 48 hours)
Vercel automatically provisions an SSL certificate via Let's Encrypt
Your site is live at https://mydomain.com with HTTPS

Step 4.5: Redirect www to Non-www (or Vice Versa)

In Vercel > Settings > Domains:

Add both mydomain.com and www.mydomain.com
For one of them, click "Edit" and select "Redirect to" the other
This ensures all traffic goes to one canonical URL

Step 5: Environment Variables

Environment variables let you store secrets (API keys, database URLs) that are not in your code.

Setting Environment Variables in the Browser

Go to Vercel > Settings > Environment Variables
Add each variable:

Key	Value	Environment
DATABASE_URL	postgresql://...	All
API_KEY	sk-...	All
NEXT_PUBLIC_SITE_URL	https://mydomain.com	All
STRIPE_SECRET_KEY	sk_live_...	Production only
STRIPE_TEST_KEY	sk_test_...	Preview and Development

Setting Environment Variables via CLI

# Set a variable
vercel env add DATABASE_URL
# Vercel prompts for value and environment (production, preview, development)

# Pull environment variables to local .env file
vercel env pull .env.local

# List all environment variables
vercel env ls

Environment Variable Best Practices

Practice	Why
Use NEXT_PUBLIC_ prefix for client-side variables	Variables without this prefix are only available server-side
Never commit .env files	Add .env to .gitignore
Use different values for dev/preview/production	Prevents accidental use of production keys in development
Rotate API keys regularly	Update the key in Vercel and redeploy

Step 6: Serverless Functions and API Routes

Vercel supports serverless functions through Next.js API routes (Route Handlers).

Creating an API Route

Create a file at app/api/data/route.ts:

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({
    message: 'Hello from Vercel!',
    timestamp: Date.now(),
  });
}

export async function POST(request: Request) {
  const body = await request.json();
  return NextResponse.json({ received: body });
}

Deploy and Test

After deploying, your API is available at:

https://my-app.vercel.app/api/data (production)
https://my-app-git-branch.vercel.app/api/data (preview)

Serverless Function Limits

Resource	Hobby (Free)	Pro
Max duration	10 seconds	60 seconds
Memory	1024 MB	3008 MB
Region	Single (default: iad1)	Multiple regions
Cold start	250ms-2s	250ms-2s
Monthly execution	100 GB-hrs	1000 GB-hrs

Edge Functions

Edge functions run on Vercel's global edge network for ultra-low latency:

export const runtime = 'edge';

export async function GET(request: Request) {
  return new Response('Hello from the edge!', {
    headers: { 'content-type': 'text/plain' },
  });
}

Edge function limits on Hobby plan:

1,000 requests per day
1 MB response size
No Node.js APIs (uses Web APIs only)

Step 7: Preview Deployments and Workflow

Vercel creates a preview deployment for every git push to any branch.

How Preview Deployments Work

Action	What Happens
Push to `main`	Production deployment at `my-app.vercel.app`
Push to `feature-branch`	Preview deployment at `my-app-git-feature-branch.vercel.app`
Open a pull request	Vercel posts a preview URL comment on the PR
Merge PR to `main`	Production deployment triggered

Using Preview Deployments for Client Review

Create a branch for client changes: git checkout -b client-review
Push changes: git push origin client-review
Vercel creates a preview deployment
Share the preview URL with your client
Client reviews and provides feedback
Make changes, push again — preview URL updates
Once approved, merge to main for production deployment

Step 8: Analytics and Monitoring

Vercel Analytics (Free Tier)

Vercel offers built-in analytics on the free plan:

Metric	Available on Free	Notes
Page views	Yes	Per-route analytics
Unique visitors	Yes	Based on cookies
Core Web Vitals	Yes	LCP, FID, CLS, INP
Audience demographics	No	Pro feature
Speed insights	Yes	Real user monitoring
Web vitals history	30 days	Pro: 1 year

Enabling Analytics

Go to Vercel > your project > Analytics tab
Click "Enable"
Vercel adds a small analytics script to your app
Data appears within 24 hours

Alternative: Google Analytics 4

If you need more detailed analytics:

Create a GA4 property at Google Analytics
Get your Measurement ID (G-XXXXXXXXXX)
Add the GA4 script to your Next.js app

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
          strategy="afterInteractive"
        />
        <Script id="ga4" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-XXXXXXXXXX');
          `}
        />
        {children}
      </body>
    </html>
  );
}

Step 9: Performance Optimization

Vercel's Built-in Optimizations

Vercel automatically handles:

Optimization	What It Does
Global CDN	Serves static assets from 100+ edge locations
Image optimization	Next.js Image component auto-optimizes images
Font optimization	Next.js Font system self-hosts Google Fonts
Code splitting	Automatic route-based code splitting
Compression	Brotli and gzip compression
HTTP/2 and HTTP/3	Modern protocol support
Edge caching	Static pages cached at edge locations

Manual Performance Optimizations

Optimization	How	Impact
Use static generation	`generateStaticParams` for static pages	10x faster than SSR
Optimize images	Use `next/image` with `priority` for above-fold	50-80% size reduction
Lazy load components	Use `next/dynamic` for heavy components	Faster initial load
Cache API routes	Use `Cache-Control` headers	Reduced server load
Minimize JavaScript	Use Server Components	Smaller client bundles
Use Edge Runtime	`export const runtime = 'edge'`	Lower latency

Step 10: Continuous Deployment Workflow

Here is a complete CI/CD workflow using Vercel + GitHub:

Workflow Steps

Develop locally: Run npm run dev and test changes
Create a feature branch: git checkout -b feature/new-page
Push to GitHub: git push origin feature/new-page
Vercel creates a preview deployment automatically
Review the preview at my-app-git-feature-new-page.vercel.app
Open a pull request on GitHub
Vercel adds a comment with the preview URL and deployment status
Review and merge the PR
Vercel deploys to production automatically
Monitor the deployment in Vercel dashboard

Branch Protection Rules

Set up GitHub branch protection for your main branch:

Go to GitHub > Settings > Branches > Branch protection rules
Require pull request reviews before merging
Require status checks to pass (Vercel builds)
Require branches to be up to date before merging
Do not allow force pushes

Vercel Free Tier vs Pro: When to Upgrade

Scenario	Recommended Plan	Why
Personal portfolio	Hobby (Free)	Low traffic, no commercial use
Personal blog	Hobby (Free)	Static content, low traffic
Open-source project docs	Hobby (Free)	Non-commercial
Side project with API routes	Hobby (Free)	Low API usage
Client project (commercial)	Pro ($20/month)	Vercel requires Pro for commercial use
Small SaaS app	Pro ($20/month)	Commercial, needs more bandwidth
High-traffic blog (500K+ visits/month)	Pro ($20/month)	Exceeds 100 GB bandwidth
Team of 3+ developers	Pro ($20/user/month)	Team collaboration features
Enterprise app	Enterprise (Custom)	SSO, DDoS mitigation, SLA

Cost Optimization: Staying on the Free Tier

Tips to Stay Within Free Tier Limits

Strategy	How	Impact
Use static generation	Pre-render pages at build time	Reduces serverless function calls
Optimize images	Compress before upload, use next/image	Reduces bandwidth
Use client-side rendering for interactive pages	No server compute needed	Reduces serverless GB-hrs
Cache API responses	Use `Cache-Control` headers	Reduces function executions
Remove unused dependencies	Run `npm prune`	Faster builds, smaller bundles
Use preview deployments for testing	Instead of deploying to production	Uses build minutes efficiently
Delete old deployments	Vercel keeps last 100	Prevents clutter

Troubleshooting Common Vercel Issues

Problem	Cause	Solution
Build fails	Missing environment variable	Add the variable in Settings > Environment Variables
404 on custom domain	DNS not propagated	Wait 24-48 hours; verify with `dig`
Function timeout	Execution > 10 seconds	Optimize function or upgrade to Pro
High bandwidth usage	Large images or assets	Use next/image, compress assets
Cold start latency	Function not warm	Use edge runtime or schedule keep-warm
Environment variable not working	Wrong environment selected	Check if variable is set for Production, Preview, and Development
Deployment stuck	Build error	Check build logs in Vercel dashboard
Custom domain shows error	SSL not provisioned	Wait for auto-provisioning (up to 30 minutes)
Preview deployment different from local	Environment variables differ	Pull variables with `vercel env pull`

Vercel Deployment Checklist

Common Questions

Can I use Vercel for commercial projects on the free tier?

No. Vercel's Hobby plan Terms of Service state that it is for personal, non-commercial use. If your project generates revenue (ads, e-commerce, SaaS, client work), you need the Pro plan ($20/user/month).

Can I deploy a non-Next.js app to Vercel?

Yes. Vercel supports many frameworks: React, Vue, Angular, Svelte, Nuxt, Gatsby, Hugo, and more. It also supports any static HTML/CSS/JS site. However, Vercel is optimized for Next.js, and some features (like ISR) only work with Next.js.

What happens if I exceed the free tier limits?

Vercel will not charge you automatically. Instead, you will receive an email notification asking you to upgrade. Your site will continue to run, but you may experience throttling on serverless functions or edge function requests.

Can I deploy a database to Vercel?

No. Vercel does not host databases. You need an external database service:

Database	Free Tier	Best For
Supabase	500 MB storage	PostgreSQL, real-time
PlanetScale	5 GB storage	MySQL, branching
Neon	3 GB storage	Serverless PostgreSQL
MongoDB Atlas	512 MB storage	NoSQL
Firebase	1 GB storage	NoSQL, real-time
Turso	9 GB storage	SQLite at the edge

Connect your Vercel app to these databases using the connection string in an environment variable.

How do I run database migrations on Vercel?

Vercel does not support persistent processes. Run migrations:

Locally against your production database (not recommended for teams)
Using a Vercel build script (runs during build)
Using a CI/CD pipeline (GitHub Actions)

Example build script in package.json:

{
  "scripts": {
    "build": "prisma migrate deploy && next build"
  }
}

Final Verdict

Vercel's free tier is the best deployment platform for personal Next.js projects in 2026. The combination of zero configuration, automatic HTTPS, global CDN, preview deployments, and native Next.js support makes it unbeatable for developers. The 100 GB/month bandwidth and 100 GB-hours serverless compute are more than enough for most personal projects.

For commercial projects, the Pro plan at $20/user/month is competitive with alternatives and provides the team collaboration features and higher limits needed for growing businesses.

Action Checklist

More guides: bsynet.cc