Deploy to Vercel

Deploy your Next.js template to Vercel in 5 minutes. Vercel is built by the creators of Next.js and offers the best Next.js hosting experience.

Why Vercel?

✅ Zero Configuration - Works out of the box ✅ Automatic HTTPS - SSL certificates included ✅ Global CDN - Fast worldwide ✅ Free Tier - Perfect for getting started ✅ Preview Deployments - Test before going live ✅ Analytics Built-in - Monitor performance

Quick Deploy

Option 1: Deploy from Git (Recommended)

Step 1: Push to GitHub


# Initialize git (if not done)
git init
git add .
git commit -m "Initial commit"
 
# Create GitHub repo and push
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

Step 2: Import to Vercel

Visit vercel.com/new
Click “Import Git Repository”
Select your repository
Click “Deploy”

That’s it! Vercel automatically detects Next.js and deploys.

Option 2: Deploy with Vercel CLI

Step 1: Install Vercel CLI


npm i -g vercel

Step 2: Deploy


# From your project directory
vercel
 
# Follow the prompts:
# - Set up and deploy? Yes
# - Which scope? (Select your account)
# - Link to existing project? No
# - Project name? (Enter name)
# - Directory? ./
# - Override settings? No

Step 3: Deploy to Production


vercel --prod

Configuration

Environment Variables

Add via Dashboard:

Go to your project settings
Navigate to “Environment Variables”

Add your variables:


NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_API_URL=https://api.yourdomain.com

Redeploy for changes to take effect

Add via CLI:


vercel env add NEXT_PUBLIC_SITE_URL
# Enter value when prompted

Build Settings

Vercel auto-detects Next.js. Override if needed:

vercel.json:


{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "nextjs"
}

Custom Domain

Step 1: Add Domain

Go to project settings
Click “Domains”
Enter your domain
Click “Add”

Step 2: Configure DNS

For root domain (example.com):


Type: A
Name: @
Value: 76.76.21.21

For www subdomain:


Type: CNAME
Name: www
Value: cname.vercel-dns.com

Step 3: Wait DNS propagation takes 24-48 hours.

Deployment Workflow

Automatic Deployments

Vercel automatically deploys:

Production: Pushes to main branch
Preview: Pushes to other branches
Preview: Pull requests

Manual Deployments

Via CLI:


# Deploy to preview
vercel
 
# Deploy to production
vercel --prod
 
# Deploy specific branch
vercel --prod --branch=staging

Advanced Features

Preview Deployments

Every push gets a unique URL:


https://your-project-git-branch-name.vercel.app

Perfect for:

Testing features
Client previews
QA testing

Edge Functions

Vercel supports Edge Functions for ultra-fast API routes:


// app/api/hello/route.ts
export const runtime = 'edge'
 
export async function GET() {
  return new Response('Hello from the edge!')
}

Analytics

Enable Vercel Analytics:

Step 1: Install Package


npm install @vercel/analytics

Step 2: Add to Layout


// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Speed Insights

Monitor performance:


npm install @vercel/speed-insights


// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  )
}

Monitoring

View Deployments


vercel ls

View Logs


vercel logs

Check Build Status

Visit dashboard: vercel.com/dashboard

Pricing

Hobby (Free):

Unlimited deployments
100GB bandwidth/month
Automatic HTTPS
Preview deployments

Pro ($20/month):

1TB bandwidth/month
Password protection
Advanced analytics
Priority support

Enterprise:

Custom bandwidth
SSO
SLA
Dedicated support

Troubleshooting

Build Fails

Check build logs:


vercel logs

Common fixes:


# Clear cache and redeploy
vercel --force
 
# Check Node version
node --version  # Should be 18+

Environment Variables Not Working

Ensure NEXT_PUBLIC_ prefix for client-side vars
Redeploy after adding variables
Check variable scope (production/preview/development)

Custom Domain Not Working

Verify DNS settings in registrar
Wait 24-48 hours for propagation
Check status in Vercel dashboard
Try flushing DNS: ipconfig /flushdns (Windows) or sudo dscacheutil -flushcache (Mac)

404 on Page Refresh

Next.js handles this automatically. If you see 404s:

Ensure you’re using next/link for navigation
Verify next.config.js doesn’t override routing
Check that pages are in correct app/ directory

Rollback Deployment

Via Dashboard:

Go to “Deployments”
Find previous deployment
Click ”…” → “Promote to Production”

Via CLI:


# List deployments
vercel ls
 
# Rollback to specific deployment
vercel rollback [deployment-url]

Security

Headers

Add security headers in next.config.js:


module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
        ],
      },
    ]
  },
}

Password Protection (Pro)

Protect preview deployments:

Go to project settings
Click “Deployment Protection”
Enable password protection
Set password

Best Practices

Use Git Integration - Automatic deployments
Set Up Staging - Use branch for testing
Enable Analytics - Monitor performance
Custom Domain - Professional appearance
Environment Variables - Keep secrets secure
Preview URLs - Test before production
Monitor Logs - Catch issues early

Next Steps

✅ Deployed? Great! Now:

Set up custom domain
Enable analytics
Configure environment variables
Set up staging branch
Add monitoring

Need help? Email support@capricorn.engineering

Resources: