Day 5

A live Next.js app deployed to Vercel with a production PostgreSQL database, environment variables configured, automatic deploys on push, and preview deployments for every PR.

Prepare for Production

Before deploying, make sure your app is ready. Run the build locally to catch type errors, check that all env vars have examples, and make sure the database URL points to production.

# Run the production build locally
npm run build
# This catches TypeScript errors and missing imports

# Check that you have .env.example
cat .env.example

# Database
DATABASE_URL="postgresql://..."

# NextAuth
NEXTAUTH_URL="https://your-domain.com"
NEXTAUTH_SECRET="generate-with-openssl-rand-base64-32"

# GitHub OAuth
GITHUB_ID="your-github-client-id"
GITHUB_SECRET="your-github-client-secret"

Set Up a Production Database

SQLite doesn't work on Vercel (no persistent filesystem). Use Vercel Postgres (powered by Neon) for a free serverless PostgreSQL database.

# Install Vercel CLI
npm install -g vercel
vercel login

# Create a Vercel Postgres database
vercel postgres create my-db
# This creates a PostgreSQL database and gives you the connection string

# Pull env vars from Vercel to your local .env
vercel env pull .env.local

datasource db {
  provider          = "postgresql"
  url               = env("POSTGRES_URL")
  directUrl         = env("POSTGRES_URL_NON_POOLING")
}

# Push schema to production database
npx prisma db push

Deploy to Vercel

Vercel detects Next.js automatically and configures the build settings. Connect your GitHub repo once and every push triggers a new deployment.

# Deploy from CLI
vercel --prod
# Your project is now at https://your-project.vercel.app

# Or connect via GitHub at vercel.com:
# 1. Import repository
# 2. Add environment variables
# 3. Deploy

# Set NEXTAUTH_SECRET
openssl rand -base64 32
# Copy output → Vercel Environment Variables → NEXTAUTH_SECRET

Custom Domain and Performance

Add a custom domain and review Vercel's built-in analytics to understand your app's performance in production.

# Add custom domain via Vercel CLI
vercel domains add yourdomain.com

# Check deployment logs
vercel logs

# Inspect specific deployment
vercel inspect [deployment-url]

In your Vercel dashboard, enable Web Analytics (free) to see page views, Core Web Vitals scores, and geography. For production apps, check that all pages have a First Contentful Paint under 1.8 seconds.

Go Further on Your Own

• Set up a custom domain and configure the NEXTAUTH_URL environment variable
• Add Vercel Speed Insights to monitor Core Web Vitals in production
• Set up Sentry (sentry.io) for error tracking in production — 5 minute setup with the Vercel integration

Course Complete!

You finished all 5 days. Ready to go deeper?

Want live instruction and hands-on projects? Join the AI bootcamp — 3 days, 5 cities.

Course Complete

Completing all five days means having a solid working knowledge of Nextjs. The skills here translate directly to real projects. The next step is practice — pick a project and build something with what was learned.