✒️ Becky Isjwara

Hosting · Guide

Vercel — deploy in under a minute

The fastest way to get a Next.js app on the internet.

Difficulty

Easy

Setup time

5 min

Cost

Free for hobby use

Why Vercel?

Vercel is made by the same company that makes Next.js, and it shows. Push to GitHub, they deploy. Every PR gets a preview URL. It's the default stack for a reason — Netlify is fine too, but Vercel's DX is a step ahead.

Deploy your first app

  1. Push your Next.js project to GitHub
  2. Go to vercel.com/new
  3. Click Import next to your repo
  4. Leave the defaults. Click Deploy.
  5. Wait ~30 seconds. You now have a live URL at your-app.vercel.app
That's itSeriously. If your Next.js app runs locally, it runs on Vercel. No config.

Environment variables

Anything in .env.local locally → add to Vercel in Project → Settings → Environment Variables. Three environments: Production, Preview, Development. For most things, set them for all three.

You can also pull Vercel's env vars down to local dev:

npm i -g vercel
vercel link
vercel env pull .env.local

Connecting a custom domain

  1. Go to Project → Settings → Domains
  2. Enter your domain (e.g., yoursite.com)
  3. Vercel shows you two options: A record or CNAME
  4. Copy the values into your domain registrar's DNS panel
  5. Wait 5-60 min for DNS to propagate

See the domains guide for registrar-specific steps.

The /ship skill

If you've installed the Web Dev Starter Kit, /ship handles the commit → push → deploy flow end-to-end. It also tracks which deployments correspond to which commits in project memory, so you can roll back easily.

Pricing

  • Hobby (free): 100GB bandwidth, unlimited deployments, unlimited preview URLs. Enough for any side project.
  • Pro ($20/mo): 1TB bandwidth, team features, analytics. You'll hit Pro when a tool starts actually getting traffic.

Vercel Functions (API routes) have their own limits on the free tier — 100 GB-hours of compute. Plenty for low-volume apps.

Common gotchas

  • Your API route times out at 10 seconds. That's the Hobby tier limit. Upgrade to Pro (60s) or use Edge Runtime (no timeout, but restrictions).
  • Build fails on deploy but works locally. Usually a TypeScript error you suppressed or a missing env var. Check the build logs — they're very readable.
  • Serverless cold starts. First request after inactivity takes ~1s. For most apps, fine. For a critical API, use Edge runtime.

Analytics

Vercel Analytics is built in — free for 2,500 events/month on Hobby. Add it to your layout:

import { Analytics } from '@vercel/analytics/next';

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

Related skills

/ship handles the deploy pipeline. /seo generates the sitemap and robots that Vercel serves. /prelaunch catches issues before you push.

Rather skip the DIY?

I'll set this up for you in an afternoon.

🍺Work with me← Back to the Kit