Vercel Logo

Deploy the App

Vercel is built by the Next.js team and optimized for Next.js apps. Deployments are instant, scaling is automatic, and static pages are served from a global CDN. Plus, you get preview URLs for every git push.

Outcome

Deploy your product review app to Vercel with automatic deployments from GitHub. Verify that all pages load instantly thanks to static generation.

Fast Track

  1. Run git init && git add -A && git commit -m "feat: complete foundations" then push to a new GitHub repo
  2. Go to vercel.com → Add New Project → Import your repo (auto-detects Next.js)
  3. Click Deploy, verify build shows ● (SSG) for product routes, test production URL

Hands-on Exercise 1.5

Deploy your app to production:

Requirements:

  1. Push your project to a GitHub repository
  2. Import the repository to Vercel
  3. Configure the project (use default settings)
  4. Verify deployment and test all routes
  5. Check build output to confirm static generation

Implementation hints:

  • Create a new GitHub repo (public or private)
  • Vercel auto-detects Next.js projects
  • No environment variables needed yet (we'll add AI Gateway in Section 2)
  • Product pages should show ● (SSG) in build output
  • Test all 3 product pages and homepage

Step 1: Initialize Git Repository

If you haven't already:

git init
git add -A
git commit -m "feat: complete foundations section with product reviews"

Step 2: Create GitHub Repository

  1. Go to github.com and create a new repository
  2. Name it ai-review-summary (or your preferred name)
  3. Don't initialize with README, .gitignore, or license (we already have code)
  4. Copy the remote URL

Step 3: Push to GitHub

git remote add origin https://github.com/YOUR_USERNAME/ai-review-summary.git
git branch -M main
git push -u origin main

Your code is now on GitHub!

Step 4: Import to Vercel

  1. Go to vercel.com and sign in (or create account)
  2. Click "Add New..." → "Project"
  3. Import your GitHub repository
  4. Vercel auto-detects Next.js configuration

Project settings:

  • Framework Preset: Next.js (auto-detected)
  • Root Directory: ./ (leave default)
  • Build Command: next build (auto-detected)
  • Output Directory: .next (auto-detected)
  • Install Command: pnpm install (auto-detected)
  1. Click Deploy

Step 5: Watch the Build

Vercel streams the build output live:

Running "pnpm install"
...
Building...
Route (app)
┌ ○ /
├ ○ /_not-found
└ ● /[productId]
  ├ /mower
  ├ /ecoBright
  └ /aquaHeat

○  (Static)  prerendered as static content
●  (SSG)     prerendered as static HTML (uses generateStaticParams)

✓ Build successful

What to look for:

  • All product routes show ● (SSG - static generation with generateStaticParams)
  • Homepage shows ○ (pure static)
  • No ƒ symbols (dynamic/server-rendered) - we want pure static
  • Build completes in ~30-60 seconds

Step 6: Verify Deployment

Once deployed, Vercel shows:

  • Production URL: https://your-project.vercel.app
  • Deployment status: ✓ Ready
  • Visit button: Opens your live site

Test your deployed app:

  1. Visit production URL

  2. Click through all products:

    • All pages load instantly (static generation working)
    • Star ratings, avatars, timestamps display correctly
    • Links work between pages

  3. Test 404 handling:

    • Visit https://your-project.vercel.app/invalid-product
    • Should show 404 page

  4. Check page load times (open DevTools → Network tab):

    • Homepage: ~50-100ms
    • Product pages: ~50-100ms
    • All static HTML, no server rendering

Understanding Vercel Deployments

Every git push creates:

  1. Preview deployment - Unique URL for testing
  2. Automatic builds - No manual steps
  3. Instant rollbacks - One-click revert to previous version

Production vs Preview:

  • main branch → Production (your-project.vercel.app)
  • Other branches → Preview (your-project-git-feature.vercel.app)

Automatic Deployments

Make a change and push:

# Edit something (e.g., update a product description in lib/sample-data.ts)
 
git add -A
git commit -m "docs: update product descriptions"
git push

Vercel automatically:

  1. Detects the push
  2. Builds a new version
  3. Deploys to production
  4. Sends you a notification

Check deployment history:

  • Vercel dashboard → Your project → Deployments
  • See every commit with timestamps
  • One-click rollback to any version

Static Generation on Vercel

How Vercel serves your app:

User requests /mower
         ↓
Vercel Edge Network (CDN)
         ↓
Serves pre-built HTML from nearest location
         ↓
~10-50ms response time

No server computation. No database queries. Just HTML from a CDN.

Global performance:

  • Tokyo: ~30ms
  • London: ~25ms
  • New York: ~20ms
  • São Paulo: ~40ms

Same fast performance worldwide.

Build Output Explained

Symbols:

  • ○ (Static) - Pure HTML, prerendered as static content
  • ● (SSG) - Prerendered as static HTML using generateStaticParams
  • ◐ (Partial Prerender) - Static HTML with dynamic server-streamed content
  • ƒ (Dynamic) - Server-rendered on demand

Your build:

Route (app)
┌ ○ /                # Homepage (static)
├ ○ /_not-found      # 404 page (static)
└ ● /[productId]     # Product pages (SSG)
  ├ /mower
  ├ /ecoBright
  └ /aquaHeat

All pages are static. Perfect for a review site.

Analytics and Monitoring

Vercel provides:

  • Real-time analytics (Visitors, Page Views, Top Pages)
  • Web Vitals (Core Web Vitals scores)
  • Deployment logs
  • Function logs (when we add API routes later)

Check your analytics:

  1. Vercel dashboard → Your project → Analytics
  2. See real user traffic
  3. Monitor performance metrics

Done-When

  • Code pushed to GitHub
  • Project deployed to Vercel
  • All pages load and function correctly
  • Production URL accessible
  • Automatic deployments working

What's Next

Your product review app is live on a global CDN with instant page loads. Section 1 (Foundations) is complete!

In Section 2, you'll add AI-powered review summaries using Vercel AI Gateway and the AI SDK. You'll generate summaries with Claude, improve them with prompt engineering, add streaming, and extract structured output.

Sources: