---
title: "Deploy the App"
description: "Deploy your Next.js app to Vercel with automatic builds and preview deployments. Connect your GitHub repository for continuous deployment and see your statically generated pages live on a global CDN."
canonical_url: "https://vercel.com/academy/ai-summary-app-with-nextjs/deploy-the-app"
md_url: "https://vercel.com/academy/ai-summary-app-with-nextjs/deploy-the-app.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-04-11T07:49:17.065Z"
content_type: "lesson"
course: "ai-summary-app-with-nextjs"
course_title: "Creating an AI Summary App with Next.js"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# Deploy the App

# 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:

```bash
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](https://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

```bash
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](https://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)

5. 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:**

```bash
# 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:**

- [Vercel Documentation](https://vercel.com/docs)
- [Deploying Next.js](https://nextjs.org/docs/deployment)
- [Vercel CLI](https://vercel.com/docs/cli)
- [Custom Domains](https://vercel.com/docs/concepts/projects/custom-domains)


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)