Syam Nair
← writing

Host Your Next.js App on Vercel - Hobby Plan

·12 min read·Syam Nair
Next.jsVercelHobby PlanDeployment

Introduction

Vercel is the company behind Next.js, so deploying there is the most frictionless option available. The Hobby plan is free for personal/non-commercial projects, includes a global CDN, automatic HTTPS, and preview deployments for every pull request — without touching a single YAML file.

This guide walks through the complete end-to-end flow, from a fresh Next.js project on GitHub to a live production URL.

1. Prerequisites

Before you begin, make sure you have:

  • A GitHub account with the project repository (public or private).
  • Node.js 18+ installed locally (node -v to verify).
  • A Vercel account — sign up free at vercel.com, ideally via GitHub SSO so permissions flow automatically.
  • npm, yarn, or pnpm on your PATH.

Note: The Hobby plan is for personal, non-commercial use only. If you're deploying a commercial product, you'll need the Pro plan ($20/seat/month). Vercel is fairly permissive about what counts as personal — side projects, portfolios, and open-source demos are fine.

2. Create & Push a Next.js Project

If you already have a repo on GitHub, skip to Section 3. Otherwise, scaffold a new project and push it.

Bootstrap with create-next-app

# Bootstrap a new Next.js project
npx create-next-app@latest my-next-app \
  --typescript \
  --tailwind \
  --eslint \
  --app

cd my-next-app

Initialize Git and push to GitHub

git init
git add .
git commit -m "chore: initial scaffold"

# Create a new repo on GitHub first, then:
git remote add origin https://github.com/<your-username>/my-next-app.git
git branch -M main
git push -u origin main

✅ Vercel auto-detects Next.js projects. No extra config files or adapter packages are needed — next.config.js is enough.

3. Connect GitHub to Vercel

Vercel needs read access to your repository to pull source code and trigger builds on push events.

Step 1 — Log in to Vercel

Go to vercel.com/login and click Continue with GitHub. Authorising via GitHub SSO grants Vercel OAuth access — no password needed.

Step 2 — Install the Vercel GitHub App

First time only: Vercel prompts you to install the Vercel for GitHub app. Choose All repositories or scope it to specific repos. This is what enables push-triggered deployments.

⚠️ Warning: If you scope access to selected repositories only, remember to add new repos to the allow-list inside GitHub → Settings → Applications → Vercel whenever you create new projects.

Step 3 — Arrive at the Vercel dashboard

After authorisation you land on vercel.com/dashboard. Your GitHub account (and any orgs you belong to) should be visible in the team/scope selector on the left sidebar.

4. Import & Configure the Project

Step 1 — Click "Add New → Project"

From the dashboard, click the Add New… button in the top-right and select Project.

Step 2 — Import from GitHub

Find my-next-app in the repository list and click Import. Vercel scans the repo and auto-detects the framework as Next.js, setting sensible defaults automatically.

Step 3 — Review build settings

Vercel pre-fills these — only change them if your project deviates from the standard layout:

Setting Default When to Change
Framework Preset Next.js Never (auto-detected)
Root Directory ./ Monorepos — point to the app sub-folder
Build Command next build Custom scripts, e.g. npm run build:prod
Output Directory .next Static export (next export) → out
Install Command npm install Switch to yarn or pnpm install

5. Environment Variables

Add any secrets your app needs before the first deploy. Vercel injects these at build time and runtime — never commit them to Git.

Adding variables in the dashboard

In the import wizard (or later via Project → Settings → Environment Variables), enter key-value pairs and choose which environments they apply to:

Environment Description
Production Deployed on merges to the main branch
Preview Every other branch / pull request
Development Used by vercel dev locally

Example variables for a typical Next.js app

# .env.local — local dev only, never commit this file

# Database
DATABASE_URL=postgresql://user:pass@host:5432/db

# Authentication (NextAuth.js)
NEXTAUTH_SECRET=your-32-char-random-secret
NEXTAUTH_URL=http://localhost:3000

# Third-party API keys
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

Important: Variables prefixed with NEXT_PUBLIC_ are bundled into the client-side JavaScript and are visible in the browser. Never put secrets in a NEXT_PUBLIC_ variable.

6. Deploy & Verify

Click Deploy. Vercel clones your repo, runs npm install then next build, and publishes the output to its global Edge Network. The whole process takes 30–120 seconds.

Build log anatomy

Cloning github.com/you/my-next-app (Branch: main, Commit: a3f2c1d)
Running "npm install"...
Running "next build"...

Route (app)              Size     First Load JS
┌ ○ /                    5.2 kB   92.4 kB
├ ○ /about               1.1 kB   88.3 kB
└ ƒ /api/hello           0 B      0 B

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

✓ Build Completed in 24s
✓ Deployed to production: https://my-next-app.vercel.app

Post-deploy checklist

  • Visit your *.vercel.app URL and confirm the app loads correctly.
  • Check the Functions tab in the dashboard for any server-side route errors.
  • Test API routes — e.g. https://my-next-app.vercel.app/api/hello.
  • Verify environment variables are being picked up (no undefined errors in logs).
  • Run Lighthouse in DevTools to sanity-check Core Web Vitals.

✅ HTTPS is provisioned automatically via Let's Encrypt. Your *.vercel.app domain is immediately served over TLS — no extra steps needed.

7. Automatic Deployments (CI/CD)

Once the GitHub integration is active, Vercel hooks into your repo's push events automatically — no GitHub Actions workflow needed.

Git Event Deployment Type URL
push to main Production your-project.vercel.app
push to any other branch Preview your-project-git-branch-name.vercel.app
Pull Request opened/updated Preview Unique URL posted as PR comment

Disabling auto-deploy for a branch

Go to Project → Settings → Git → Ignored Build Step and enter a command that exits with code 1 when you want to skip a deploy (e.g. checking if only README.md changed):

#!/bin/bash
# Only build if files outside /docs changed
git diff HEAD~1 --name-only | grep -qvE '^docs/' && exit 1
exit 0

8. Hobby Plan Limits

The Hobby plan is genuinely generous — most personal projects never hit these ceilings:

Resource Limit Notes
Bandwidth 100 GB / month Resets monthly; enough for high-traffic personal sites
Serverless Function invocations 100,000 / month API routes, ISR, middleware count here
Function execution duration 10 seconds Pro = 60s. Upgrade if you have long-running handlers
Deployments Unlimited No cap on the number of deploys
Custom domains 50 per project Free SSL for all domains
Build minutes 6,000 / month Most builds are under 60s, so effectively unlimited
Team members 1 (personal only) Need collaboration? Pro supports teams
Edge Function regions All (18+ regions) Global CDN included free

⚠️ The 10-second function timeout is the most common Hobby-plan gotcha. If your API routes call external services, perform heavy computation, or stream large responses, you may hit it. Consider moving long-running logic to a background job service or upgrading to Pro.

9. Tips & Gotchas

Use the Vercel CLI for local parity

Running vercel dev locally mirrors the production environment, including env vars and Edge Middleware — far more accurate than plain next dev:

npm i -g vercel
vercel login        # links CLI to your account
vercel link         # connects this directory to the project
vercel env pull     # downloads .env.local from Vercel
vercel dev          # run locally with production parity

Custom domain setup

In Project → Settings → Domains, add your domain and Vercel shows you exactly which DNS records to create (an A record and a CNAME). SSL is provisioned automatically once DNS propagates.

Optimise images with next/image

Vercel's image optimisation pipeline is deeply integrated with next/image. Use it for all <img> tags in production — Vercel serves WebP/AVIF and lazy-loads automatically:

import Image from 'next/image'

export default function Hero() {
  return (
    <Image
      src="/hero.png"
      alt="Hero image"
      width={1280}
      height={720}
      priority  // eager-load above-the-fold images
    />
  )
}

Monorepo root directory

For a monorepo (e.g. Turborepo), set the Root Directory in project settings to the subdirectory containing your Next.js app — e.g. apps/web. Vercel will only watch that path for changes.

Speed up cold starts with Edge Runtime

For latency-sensitive API routes, opt into the Edge Runtime. It starts in milliseconds (vs. ~500ms for Node.js cold start) but has a smaller API surface:

// app/api/fast/route.ts
export const runtime = 'edge'

export async function GET() {
  return Response.json({ message: 'Hello from the edge!' })
}

Note: Edge Runtime does not support Node.js built-ins (fs, crypto, etc.) or most npm packages that depend on them. Stick to standard Web APIs and edge-compatible packages.

Wrapping Up

You now have a Next.js app with a live URL, automatic HTTPS, preview deployments on every PR, and zero server management. The Hobby plan handles a surprising amount of traffic — and when your project outgrows it, upgrading to Pro is a single click away.

Key takeaways:

  • GitHub push → Vercel build → live URL, automatically.
  • Environment variables are managed securely in the dashboard.
  • Preview URLs mean you can share in-progress changes without merging.
  • The Edge Network serves your static assets globally, with no extra config.

Vercel × Next.js · Hobby Plan Deployment Guide · March 2026