Back to docs
15Week 2

Vercel Deploy

From localhost to a live public URL in 5 minutes — then automatic forever after

What is Vercel?

Vercel is a cloud platform for deploying web applications. It was built by the same team that created Next.js, so the integration is seamless — zero configuration required. You push code to GitHub, and Vercel automatically builds and deploys it to a global CDN.

For this course, Vercel is how you turn your local project into a live URL that anyone can visit. Every assignment submission will be a Vercel deployment link.

Prerequisites

  • A GitHub account with your project pushed to a repository
  • Your project builds successfully with npm run build
  • A Vercel account (free tier is sufficient for this course)

First Deploy

Step 1 — Create a Vercel Account

Go to vercel.com and click Sign Up. Choose Continue with GitHub to link your GitHub account. This connection allows Vercel to access your repositories and set up automatic deployments.

Step 2 — Import Your Project

After signing in, click Add New → Project. Vercel will show a list of your GitHub repositories. Select your project repository and configure these settings:

  • Framework Preset: Next.js (should be auto-detected)
  • Root Directory: Leave as ./ unless your project is in a monorepo subfolder
  • Build Command: npm run build (default)
  • Output Directory: Leave as default (Next.js handles this automatically)
  • Environment Variables: Add any variables from your .env.local file (more on this below)

Click Deploy. Vercel will clone your repo, install dependencies, run the build, and deploy the result. This takes 1-3 minutes.

URL Format

After deployment, Vercel assigns your project a URL:

# Default format
https://your-project-name.vercel.app

# With custom subdomain
https://my-design-system.vercel.app

# Preview deployments (per branch/commit)
https://your-project-name-git-feature-branch-username.vercel.app

Automatic Deploys

Once connected, every push to your main branch triggers a production deployment automatically. You never need to manually deploy again.

# Your workflow becomes:
git add .
git commit -m "update hero section"
git push origin main

# Vercel automatically:
# 1. Detects the push
# 2. Installs dependencies
# 3. Runs npm run build
# 4. Deploys to production
# 5. Your live URL is updated in ~60 seconds

Preview Deployments

When you push to a branch other than main, Vercel creates a preview deployment — a unique URL for that branch. This is incredibly useful for reviewing changes before merging.

# Create a feature branch
git checkout -b feature/new-hero

# Make changes and push
git add .
git commit -m "redesign hero section"
git push origin feature/new-hero

# Vercel creates a preview URL:
# https://your-project-git-feature-new-hero-username.vercel.app

# Share this URL with your team for review
# When you merge to main, production updates automatically

Environment Variables

Local Development

In local development, environment variables live in a .env.local file at the root of your project:

# .env.local
DATABASE_URL=postgresql://localhost:5432/mydb
NEXT_PUBLIC_API_URL=https://api.example.com
FIGMA_ACCESS_TOKEN=figd_xxxxxxxxxxxxx

Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. All other variables are server-side only and never sent to the client. This is important for security — never put secret keys in NEXT_PUBLIC_ variables.

Vercel Dashboard

For production, add environment variables through the Vercel dashboard:

  • Go to your project in Vercel
  • Click Settings → Environment Variables
  • Add each variable with its production value
  • Choose which environments it applies to: Production, Preview, Development
  • Click Save and redeploy for changes to take effect

Checking Build Errors

If your deployment fails, Vercel shows the build logs in the dashboard. Common build errors include:

  • Module not found: A dependency is missing from package.json. Run npm install and push again.
  • Type errors: TypeScript found type mismatches. These may not show in npm run dev but will fail the production build.
  • Missing environment variables: Your code references a variable that is not set in Vercel. Add it in the dashboard.
  • ESLint errors: The production build runs ESLint by default. Fix all linting errors or configure next.config.js to ignore them (not recommended).
  • Image optimization errors: Using <img> instead of Next.js <Image> component triggers warnings that can become errors.

Warning: npm run dev and npm run build behave differently. dev skips many checks for speed. build enforces strict TypeScript, ESLint, and optimization rules. Always run npm run build locally before pushing to catch errors early.

Custom Domains

You can connect a custom domain to your Vercel project:

  • Step 1: Go to your project → Settings → Domains
  • Step 2: Enter your domain name (e.g., mydesignsystem.com)
  • Step 3: Update your domain's DNS settings to point to Vercel. Vercel provides the exact DNS records to add. SSL is automatic.

Vercel CLI — Optional

For advanced users, the Vercel CLI lets you deploy from the terminal without pushing to GitHub.

# Install the CLI globally
npm install -g vercel

# Log in to your account
vercel login

# Deploy from your project directory
vercel

# Deploy to production
vercel --prod

The CLI is useful for quick previews or debugging, but the GitHub integration is recommended for production workflows.

Deploy Checklist — Before Every Submission

Run through this checklist before submitting any assignment:

  • 1. Build locally: Run npm run build and fix all errors
  • 2. Check the live URL: Open your Vercel deployment URL in an incognito window
  • 3. Test on mobile: Use Chrome DevTools device mode or a real phone
  • 4. Check all pages: Navigate to every page and verify nothing is broken
  • 5. Check environment variables: Make sure all required variables are set in Vercel
  • 6. Check the console: Open DevTools and verify there are no red errors in the console
  • 7. Test interactions: Click buttons, fill forms, test hover states — make sure everything works

Deploying Storybook Separately

If you want to deploy your Storybook alongside your main application, create a separate Vercel project for the Storybook build.

// vercel.json (in project root, for Storybook project)
{
  "buildCommand": "npm run build-storybook",
  "outputDirectory": "storybook-static",
  "framework": null
}

This tells Vercel to run the Storybook build instead of the Next.js build and serve the resulting static files. Deploy this as a separate Vercel project pointing to the same GitHub repository but with this custom configuration.

You will end up with two URLs:

  • your-project.vercel.app — your main Next.js application
  • your-project-storybook.vercel.app — your Storybook component library
Framer Motion