AI AI Tools Guidebook
Indie Dev & Website Building

What is Vercel? Pricing, Limits, and How It Differs from Firebase (2026)

Vercel is a framework-native platform built around Next.js, Astro, and SvelteKit. Get the mental model, real June 2026 pricing and limits, a sample vercel.json, and a 5-minute deploy.

Published: Updated: Author: AI Productivity Guide Team 🌐 查看中文版本

Vercel is the company behind Next.js, and the Vercel platform is built around running Next.js (and increasingly Astro, SvelteKit, Nuxt) better than anywhere else. If Firebase Hosting is “a CDN that knows how to call your backend,” Vercel is “a runtime that ships your framework end to end.” Below is the mental model, real pricing and limits as of June 2026, a baseline vercel.json, and the 5-minute deploy.

TL;DR

  • Vercel turns a Git push into a deployed, SSR-capable framework app with zero server config. Next.js gets the deepest integration; Astro, SvelteKit, Nuxt, and Vite are first-class too.
  • The free Hobby plan is personal and non-commercial only. Running ads (including Google AdSense) or taking payments means you need Pro at $20/seat/month.
  • Pick Vercel when you want framework features (SSR, ISR, image optimization, preview deploys) to work out of the box. For a plain static site at scale, Firebase Hosting or Cloudflare Pages is usually cheaper.

How Vercel actually works

Vercel grew from “deploy a Next.js app in 30 seconds” into a full platform: serverless functions, edge functions, Incremental Static Regeneration (ISR), image optimization, and analytics. The model is simple. You connect a Git repository, and every push produces a deployment. Pushes to your production branch update the live site; every other branch and pull request gets its own preview URL.

The part that trips people up is billing. Firebase’s free Spark tier is a fixed allowance that you cannot exceed without explicitly enabling pay-as-you-go. Vercel’s Hobby tier is a free allowance that pauses when exhausted, and Pro is usage-based: a base seat fee plus metered overages. You should understand that shape before you commit a commercial project.

Should you use Vercel?

Use Vercel when:

  • You are building with Next.js, Astro, SvelteKit, Nuxt, or another supported framework and want SSR, ISR, and image optimization with zero config.
  • You want a preview deployment on every pull request, with a per-branch URL and an automatic PR comment.
  • You are comfortable with usage-based billing as you grow, rather than a hard free ceiling.

Skip Vercel when:

  • Your stack is already on Firebase and you want one console for hosting, auth, and database.
  • Your site is plain static HTML at meaningful scale, where Firebase Hosting (free Spark tier allows commercial use) or Cloudflare Pages will cost less.

Pricing and limits (June 2026)

The free Hobby plan is genuinely useful, but read the fair-use rule first: Vercel defines commercial usage to include “any method of requesting or processing payment” and “the inclusion of advertisements, including but not limited to online advertising platforms like Google AdSense.” Donations are exempt. So a hobby blog with AdSense on it technically needs Pro. Firebase Hosting’s free Spark tier, by contrast, permits commercial use.

Hobby (Free)Pro ($20/seat/mo)
Commercial useNot allowedAllowed
Fast Data Transfer (bandwidth)100 GB/mo1 TB included, then metered
Function invocations1 million/mo1 million included, then $0.60/1M
Active CPU4 CPU-hours/moIncluded credit, then metered
Edge requestsIncluded allowance10 million included, then metered
Build execution6,000 min/moIncluded credit
Deployments per day1006,000
Build time per deployment45 min45 min
Concurrent builds112
Runtime log retention1 hour1 day
Custom domains per project50Unlimited (soft cap)

When a Hobby project hits its allowance, deployments pause until the cycle resets; there is no surprise overage bill. Pro includes a $20 usage credit on top of the seat fee, and extra usage is metered (transfer and edge requests are now priced regionally). Source: Vercel limits and Vercel pricing.

Function duration: what changed with Fluid Compute

This is the number people most often get wrong. With Fluid Compute (enabled by default for projects since April 2025), the duration limits are no longer the old 60-second-Hobby figures:

PlanDefault max durationMaximum (Fluid Compute)
Hobby300s (5 min)300s (5 min)
Pro300s (5 min)800s (13 min)
Enterprise300s (5 min)800s (13 min)

Legacy projects created before April 2025 and not using Fluid Compute still cap at 60s on Hobby, 300s on Pro, and 900s on Enterprise. For anything truly long-running, Vercel now points you to Vercel Workflows, which pause and resume with no duration limit. Functions still cannot act as a WebSocket server, so realtime needs a third-party service.

Five-minute deploy

Before you start

  • A repo on GitHub, GitLab, or Bitbucket.
  • Your framework decided (Next.js, Astro, etc.).
  • A custom domain ready (optional).

Note: a Hobby team cannot connect to Git repositories owned by a Git organization — those require a Pro team. Personal repos are fine on Hobby.

Step by step

  1. Sign up via your Git host at vercel.com. Vercel inherits your repositories.

  2. Import the repo and let Vercel auto-detect the framework. It pre-fills the build command and output directory. For an Astro project:

Framework Preset:    Astro
Build Command:       astro build
Output Directory:    dist
Install Command:     npm install
Root Directory:      ./
  1. Add a vercel.json (optional but useful) to control headers, redirects, and clean URLs:
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "cleanUrls": true,
  "trailingSlash": true,
  "redirects": [
    { "source": "/blog/(.*)", "destination": "/articles/$1", "permanent": true }
  ],
  "headers": [
    {
      "source": "/(.*)\\.(jpg|png|svg|webp|woff2)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=2592000" }
      ]
    },
    {
      "source": "/_astro/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ]
}

Each redirect, rewrite, and header counts toward the 2,048 routes-per-deployment limit, so keep the list lean.

  1. Deploy from the CLI for repeatability:
npm install -g vercel
vercel link            # link local repo to a Vercel project
vercel --prod          # production deploy
# Production: https://your-project.vercel.app

  1. Add a custom domain. Go to Project, then Settings, then Domains, and add yourdomain.com. Configure DNS using the values shown in your project settings. Vercel’s general-purpose values are apex A 76.76.21.21 and www CNAME cname.vercel-dns.com, but run vercel domains inspect yourdomain.com to confirm the exact records for your project before you change DNS. SSL is provisioned automatically.

  2. Set environment variables for Production and Preview:

vercel env add OPENAI_API_KEY production
vercel env add SITE_URL production
# https://yourdomain.com

The total size of all environment variables per environment is capped at 64 KB, which is also the max size of any single variable.

  1. Use preview deployments for pull requests. Every PR gets its own URL automatically, and Vercel posts a comment with the link. Previews are noindex by default, so they will not compete with your production pages in search.

  2. Confirm the deploy with curl and Lighthouse:

curl -sI https://your-project.vercel.app/ | grep -i x-vercel
# x-vercel-cache: HIT
# x-vercel-id: ...
npx lighthouse https://your-project.vercel.app/ --only-categories=performance,seo --chrome-flags="--headless"

Launch checklist

  • Framework preset matches reality.
  • vercel.json agrees with your framework on trailing slash and clean URLs.
  • Production env vars set, and Preview env vars set if previews need them (a missing Preview var makes preview deploys fail silently).
  • Custom domain has valid SSL and both vercel.app and the apex return 200.
  • DevTools Network tab shows immutable cache on hashed assets.

Common pitfalls

  • Treating Hobby like a fixed allowance. It throttles by pausing deployments, not by billing you. Active CPU (4 CPU-hours/month) is the limit you will hit first on a function-heavy app.
  • Shipping a commercial site on Hobby. Ads or payments trigger the fair-use rule. Move to Pro before you monetize.
  • Putting a large monolithic API on one serverless function. Cold starts and the duration ceiling will hurt; split the work or use Vercel Workflows.
  • Forgetting Preview env vars. Previews that need secrets fail quietly when the variable only exists in Production.
  • Hosting a high-traffic static site here purely on cost. At scale, Firebase Hosting or Cloudflare Pages is cheaper for plain static.

FAQ

  • Is Vercel free? The Hobby plan is free but non-commercial only — no ads, no payments. Commercial or team use requires Pro at $20 per seat per month (with a $20 usage credit included).
  • Does Vercel only do Next.js? No. Astro, SvelteKit, Nuxt, Vite, and many others are first-class. Next.js just gets the deepest integration because Vercel builds it.
  • Can I run a long-running backend on Vercel? Functions cap at 300 seconds by default (up to 800 seconds on Pro with Fluid Compute). For longer jobs use Vercel Workflows or a separate worker, and note that functions cannot be a WebSocket server.
  • Vercel vs Firebase Hosting in one sentence? Vercel runs your framework; Firebase Hosting serves your files and calls your backend.
  • Does Vercel work for static sites? Yes, perfectly, with zero config. The real question is whether it beats Cloudflare Pages or Firebase Hosting on cost at your scale.
  • Why did my Hobby deployments stop? You hit a monthly allowance (often bandwidth or Active CPU). Deployments resume at the next cycle, or you upgrade to Pro.

Tags: #Indie dev #Vercel #Hosting #Getting started #Comparison

Related Articles