AI AI Tools Guidebook
Indie Dev & Website Building

What is Vercel (and how it differs from Firebase Hosting)

Vercel is a framework-native platform — first-class for Next.js, Astro, SvelteKit. Get the mental model, sample vercel.json, and a 5-minute deploy.

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

Vercel is the company behind Next.js, and Vercel the 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, a baseline vercel.json, and the 5-minute deploy.

Background

Vercel grew from “deploy a Next.js app in 30 seconds” to a full platform with serverless functions, edge functions, ISR, image optimization, and analytics. In 2026 it is the default choice for Next.js, a strong choice for Astro, and an opinionated platform you should understand before committing — pricing scales with usage in ways Firebase’s Spark tier does not.

How to tell

  • You are building with Next.js, Astro, SvelteKit, or another supported framework.
  • You want zero-config SSR, ISR, and image optimization.
  • You value preview deploys on every PR and per-branch URLs.
  • You can manage usage-based billing as you grow (not a fixed free tier ceiling).

Quick verdict

Use Vercel when you are deploying a JavaScript framework and want the framework features to “just work”. Skip it if your stack is already Firebase or your site is pure static HTML — Firebase Hosting is cheaper at scale for plain static.

Before you start

  • Repo on GitHub/GitLab/Bitbucket.
  • Framework decided (Next.js, Astro, etc.).
  • Custom domain ready (optional).

Step by step

  1. Sign up via your git host at vercel.com. Vercel inherits your repos.

  2. Import the repo + auto-detect framework. Vercel pre-fills build command and output. 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:
{
  "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" }
      ]
    }
  ]
}
  1. Deploy from 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. Project → Settings → Domains → add yourdomain.com. Configure DNS (apex A 76.76.21.21, www CNAME cname.vercel-dns.com).

  2. Set environment variables for Production and Preview:

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

  1. Use preview deployments for PRs. Every PR gets its own URL automatically. Pull requests get a comment with the link. Previews are noindex by default.

  2. Check the verdict via Lighthouse + curl:

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"

Implementation checklist

  • Framework preset matches reality.
  • vercel.json (if used) consistent with framework on trailing slash / cleanUrls.
  • Production env vars set; Preview env vars set if previews need them.
  • Custom domain has valid SSL.
  • Preview deployments accessible to your team.

After-launch verification

  • vercel.app and custom domain both return 200.
  • DevTools Network tab shows immutable cache on hashed assets.
  • Search Console (after domain swap) shows traffic to canonical URLs only.

Common pitfalls

  • Treating Vercel’s free Hobby tier like a fixed allowance — it has bandwidth and function execution limits that throttle, not bill.
  • Using Vercel for a plain static site at scale — Firebase Hosting or Cloudflare Pages may be cheaper.
  • Putting a large monolithic API on a serverless function — cold starts and 15-minute max duration will hurt.
  • Ignoring framework-specific options in vercel.json and fighting the platform.
  • Forgetting to add env vars to Preview when previews need them — preview deploys silently fail.

FAQ

  • Is Vercel free?: The Hobby plan is free for non-commercial use with bandwidth and function-execution limits. Commercial / team usage requires Pro.
  • Does Vercel only do Next.js?: No. Astro, SvelteKit, Nuxt, Vite, and many others are first-class. Next.js just gets the deepest integration.
  • Can I run a long-running backend on Vercel?: Not really. Functions have a 15-minute max (Pro) or 60-second (Hobby). For long jobs, use a queue or a separate worker.
  • 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 configuration. The question is whether the cost beats Cloudflare Pages or Firebase Hosting at your scale.

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

Related Articles