Deploying to Vercel

# 1. Next.js project initialized
npm create next-app@latest my-app
cd my-app

# 2. Git repository initialized
git init
git add .
git commit -m "Initial commit"

# 3. Push to GitHub/GitLab/Bitbucket
# Create repository on GitHub
git remote add origin https://github.com/username/my-app.git
git push -u origin main

# ✅ Project in version control
# ✅ Committed to git
# ✅ Pushed to remote repository

# Install Vercel CLI globally
npm i -g vercel

# or use with npx (no installation)
npx vercel

# ✅ Deploy from command line
# ✅ Local development with vercel dev
# ✅ Manage deployments

# Navigate to project
cd my-next-app

# Deploy to Vercel
vercel

# Follow prompts:
# ? Set up and deploy "~/my-next-app"? [Y/n] y
# ? Which scope do you want to deploy to? Your Account
# ? Link to existing project? [y/N] n
# ? What's your project's name? my-next-app
# ? In which directory is your code located? ./

# ✅ Project deployed
# ✅ Preview URL generated
# ✅ Linked to Vercel account

# Deploy to production
vercel --prod

# ✅ Production deployment
# ✅ your-app.vercel.app live

# Deploy to preview
vercel

# Deploy to production
vercel --prod

# Run local dev server with Vercel environment
vercel dev

# List all deployments
vercel list

# View logs
vercel logs

# Pull environment variables
vercel env pull .env.local

# Link local project to Vercel project
vercel link

# Remove deployment
vercel remove [deployment-url]

# View project info
vercel inspect [deployment-url]

# ✅ Complete CLI control
# ✅ Local development
# ✅ Deployment management

# Production Branch (usually main/master)
git checkout main
git add .
git commit -m "Update homepage"
git push origin main

# → Deploys to production URL (your-app.vercel.app)
# ✅ Production deployment
# ✅ Updates live site
# ✅ Custom domain if configured

# Feature Branch
git checkout -b feature/new-ui
git add .
git commit -m "New UI design"
git push origin feature/new-ui

# → Creates preview deployment
# ✅ Unique URL: your-app-git-feature-new-ui-username.vercel.app
# ✅ Test changes safely
# ✅ Share with team

# Pull Request
# Create PR on GitHub from feature/new-ui → main

# → Preview deployment linked to PR
# ✅ Preview URL in PR comments
# ✅ Test before merging
# ✅ Automatic updates on new commits

# Preview URLs format:
# your-app-[git-branch-name]-[team/user].vercel.app

# Examples:
your-app-git-feature-auth-john.vercel.app
your-app-git-bug-fix-mobile-team.vercel.app
your-app-git-redesign-homepage-acme.vercel.app

# ✅ Unique URL per branch
# ✅ Latest commit always deployed
# ✅ Safe testing environment
# ✅ Share with stakeholders

# Production
# Applied to: main/master branch deployments
DATABASE_URL=postgresql://prod-server/db
API_URL=https://api.production.com

# Preview
# Applied to: all branch and PR deployments
DATABASE_URL=postgresql://preview-server/db
API_URL=https://api.staging.com

# Development
# Applied to: vercel dev (local development)
DATABASE_URL=postgresql://localhost/db
API_URL=http://localhost:3001

# ✅ Different values per environment
# ✅ Production uses prod values
# ✅ Previews use staging values

# Pull environment variables to local
vercel env pull .env.local

# This creates .env.local with development variables
# ✅ Sync with Vercel settings
# ✅ Use in local development

# Add environment variable via CLI
vercel env add DATABASE_URL

# Follow prompts:
# ? What's the value of DATABASE_URL? postgresql://...
# ? Add DATABASE_URL to which Environments? Production, Preview, Development

# List all environment variables
vercel env ls

# Remove environment variable
vercel env rm DATABASE_URL

# ✅ Manage via CLI
# ✅ Script deployment setup

# Public variables (exposed to browser)
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_GA_ID=UA-12345

# Private variables (server-only)
DATABASE_URL=postgresql://...
API_SECRET_KEY=secret-key-123

# Remember:
# ✅ NEXT_PUBLIC_ → Available in browser
# ✅ No NEXT_PUBLIC_ → Server-only
# ⚠️ Never put secrets in NEXT_PUBLIC_ variables

# Access in code:
// Client and Server
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

// Server only
const dbUrl = process.env.DATABASE_URL;

# You can add multiple domains:
example.com                  # Primary
www.example.com              # Redirect to primary
app.example.com              # Subdomain
staging.example.com          # Staging environment

# Set up redirects:
# www.example.com → example.com (automatic)
# old-domain.com → example.com (configure in settings)

# ✅ Multiple domains per project
# ✅ Automatic redirects
# ✅ Subdomain support

{
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "SAMEORIGIN"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        }
      ]
    }
  ]
}

// ✅ Configure redirects
// ✅ Set headers
// ✅ Custom routes

{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "nextjs",
  "regions": ["iad1"], // Region: Washington, D.C.
  
  "github": {
    "silent": true // Don't comment on commits
  }
}

// ✅ Override build commands
// ✅ Specify regions
// ✅ GitHub integration settings

{
  "redirects": [
    {
      "source": "/blog/:slug",
      "destination": "/posts/:slug",
      "permanent": true
    },
    {
      "source": "/old-site/(.*)",
      "destination": "https://old.example.com/$1",
      "permanent": false
    }
  ],
  
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://api.example.com/:path*"
    }
  ]
}

// ✅ Permanent redirects (308)
// ✅ Temporary redirects (307)
// ✅ Proxy API requests

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    },
    {
      "source": "/api/(.*)",
      "headers": [
        {
          "key": "Access-Control-Allow-Origin",
          "value": "*"
        }
      ]
    }
  ]
}

// ✅ Security headers
// ✅ CORS configuration
// ✅ Custom headers per route

# 1. Create feature branch
git checkout -b feature/new-feature

# 2. Make changes and commit
git add .
git commit -m "Add new feature"

# 3. Push to remote
git push origin feature/new-feature
# → Vercel creates preview deployment

# 4. Create Pull Request on GitHub
# → Preview deployment linked to PR
# → Team reviews preview URL

# 5. Merge PR to main
git checkout main
git pull origin main
# → Vercel deploys to production automatically

# 6. Production is live
# → your-app.vercel.app updated
# → Custom domain updated

# ✅ Safe testing in preview
# ✅ Team review before production
# ✅ Automatic production deployment

# Critical bug in production

# 1. Create hotfix branch from main
git checkout main
git checkout -b hotfix/critical-bug

# 2. Fix bug and commit
git add .
git commit -m "Fix critical bug"

# 3. Push and create PR
git push origin hotfix/critical-bug
# → Preview deployment for testing

# 4. Verify fix in preview
# Test thoroughly on preview URL

# 5. Merge to main
# → Automatic production deployment

# 6. Monitor deployment
# Check Vercel dashboard for deployment status

# OR: Emergency direct push to main
git checkout main
git merge hotfix/critical-bug
git push origin main
# → Immediate production deployment

# ✅ Fast hotfix deployment
# ✅ Preview testing available
# ✅ Quick production fix

# Enable Vercel Analytics:
# 1. Go to Project Settings → Analytics
# 2. Click "Enable Analytics"
# 3. Analytics automatically tracked

# Metrics tracked:
# - Page views
# - Unique visitors
# - Top pages
# - Traffic sources
# - Real User Monitoring (Web Vitals)

# ✅ Built-in analytics
# ✅ No code changes needed
# ✅ Privacy-friendly (no cookies)

# View logs in Vercel dashboard:
# Deployments → [Select deployment] → Build Logs

# View logs with CLI:
vercel logs [deployment-url]

# Real-time logs:
vercel logs --follow

# Filter by function:
vercel logs --output=api/hello.js

# ✅ Complete build logs
# ✅ Runtime logs
# ✅ Debug deployment issues

# Set up notifications:
# Project Settings → Notifications

# Notification types:
# - Deployment started
# - Deployment ready
# - Deployment failed
# - Domain configuration
# - SSL certificate issues

# Notification channels:
# - Email
# - Slack
# - Discord
# - Custom webhooks

# ✅ Stay informed
# ✅ Quick issue detection
# ✅ Team collaboration

# ✅ GOOD: Set in Vercel dashboard
# Production: DATABASE_URL=postgresql://prod-db
# Preview: DATABASE_URL=postgresql://staging-db
# Development: DATABASE_URL=postgresql://localhost

# ❌ BAD: Commit secrets to repository
# .env.production (committed to git)
DATABASE_URL=postgresql://prod-db  # DON'T DO THIS!

# ✅ Use .env.example for template
DATABASE_URL=your-database-url-here
API_KEY=your-api-key-here

# Commit .env.example, not .env.production

# ✅ GOOD: Always create PR
git checkout -b feature/update
git push origin feature/update
# Create PR → Test preview URL → Merge

# ❌ BAD: Push directly to main
git checkout main
git push origin main
# No testing, directly to production!

# Use preview deployments to catch issues

# Set production branch in Vercel:
# Project Settings → Git → Production Branch

# Options:
# - main (recommended)
# - master
# - production

# ✅ Clear production branch
# ✅ All other branches = preview
# ✅ Consistent workflow

# Don't upload to Vercel
.env.local
.env*.local
*.log
.DS_Store
node_modules
.next
coverage
.vscode

# ✅ Smaller uploads
# ✅ Faster deployments
# ✅ Secure (no local env vars)

# Set up custom domain ASAP:
# 1. Prevents "your-app.vercel.app" from being indexed
# 2. Consistent URLs for users
# 3. Professional appearance

# Configure:
# - Primary domain (example.com)
# - www redirect (www.example.com → example.com)
# - SSL automatic

# ✅ Professional domains
# ✅ Better SEO
# ✅ Automatic HTTPS