Intermediate15 min1 prerequisite

Leverage Vercel's advanced features including Edge Functions, Analytics, domains, and team collaboration.

Advanced Features

Beyond basic deployment, Vercel offers Edge Functions, Analytics, custom domains, and team features.

Edge Functions

What Are Edge Functions?

Edge Functions run at CDN edge locations worldwide—faster than traditional serverless.

Terminal

Traditional Serverless:
User (Tokyo) → Serverless (Virginia) → Response
Latency: ~200ms

Edge Function:
User (Tokyo) → Edge (Tokyo) → Response
Latency: ~50ms

Edge Runtime in Next.js

Terminal

// app/api/geo/route.ts
export const runtime = 'edge'

export async function GET(request: Request) {
  // Runs at edge, ~50ms response time
  return Response.json({
    message: 'Hello from the edge!'
  })
}

Edge with Geolocation

Terminal

// app/api/location/route.ts
export const runtime = 'edge'

export async function GET(request: Request) {
  const country = request.headers.get('x-vercel-ip-country')
  const city = request.headers.get('x-vercel-ip-city')

  return Response.json({
    country,
    city,
    greeting: `Hello from ${city}, ${country}!`
  })
}

Edge Middleware

Terminal

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const country = request.geo?.country

  // Redirect based on location
  if (country === 'DE') {
    return NextResponse.redirect(new URL('/de', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/((?!api|_next/static|favicon.ico).*)'
}

Edge Limitations

Edge functions have restrictions:

Feature	Node.js	Edge
Runtime	Full Node.js	V8 isolates
Size	50MB	1MB
Timeout	60s (Pro)	25s
npm packages	All	Web-compatible only
File system	Yes	No
Native modules	Yes	No

Vercel Analytics

Web Analytics

Track visitors without cookies:

Terminal

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Install package:

Terminal

npm install @vercel/analytics

Speed Insights

Monitor Core Web Vitals:

Terminal

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  )
}

Install package:

Terminal

npm install @vercel/speed-insights

Analytics Dashboard

View in dashboard:

Terminal

Project → Analytics → Overview

Metrics:
- Page views
- Unique visitors
- Top pages
- Referrers
- Countries
- Devices

Core Web Vitals

Speed Insights tracks:

Metric	Good	Description
LCP	< 2.5s	Largest Contentful Paint
FID	< 100ms	First Input Delay
CLS	< 0.1	Cumulative Layout Shift
TTFB	< 800ms	Time to First Byte

Custom Domains

Adding a Domain

Terminal

Project → Settings → Domains → Add Domain

Enter: myapp.com

DNS Configuration

Option 1: Nameservers (Recommended)

Point your domain's nameservers to Vercel:

Terminal

ns1.vercel-dns.com
ns2.vercel-dns.com

Option 2: A/CNAME Records

Terminal

# A Record (apex domain)
@ → 76.76.21.21

# CNAME (www)
www → cname.vercel-dns.com

SSL Certificates

Automatic SSL included:

Free certificates
Auto-renewal
HTTP/2 and HTTP/3

Multiple Domains

Terminal

myapp.com          → Production
www.myapp.com      → Redirect to myapp.com
staging.myapp.com  → Preview branch

Preview Deployments

Branch Previews

Every branch gets a unique URL:

Terminal

main         → myapp.com (production)
feature/new  → myapp-git-feature-new-user.vercel.app
fix/bug      → myapp-git-fix-bug-user.vercel.app

Preview Comments

Enable comments on preview deployments:

Terminal

Project → Settings → Comments → Enable

Team members can leave feedback directly on the preview.

Protected Previews

Require authentication for preview URLs:

Terminal

Project → Settings → Deployment Protection
→ Vercel Authentication (team members)
→ Password Protection (shared password)

Preview Environment Variables

Different values for previews:

Terminal

Production:
  DATABASE_URL=postgresql://prod...

Preview:
  DATABASE_URL=postgresql://staging...

Serverless Function Configuration

Increase Timeout

Pro plan allows longer timeouts:

Terminal

// app/api/long-task/route.ts
export const maxDuration = 60  // 60 seconds

export async function POST(request: Request) {
  // Long-running operation
}

Increase Memory

Terminal

// vercel.json
{
  "functions": {
    "app/api/heavy/route.ts": {
      "memory": 1024
    }
  }
}

Memory options: 128, 256, 512, 1024, 2048, 3008 MB

Cron Jobs

Schedule functions:

Terminal

// vercel.json
{
  "crons": [
    {
      "path": "/api/daily-cleanup",
      "schedule": "0 0 * * *"
    },
    {
      "path": "/api/hourly-sync",
      "schedule": "0 * * * *"
    }
  ]
}

Terminal

// app/api/daily-cleanup/route.ts
export async function GET() {
  // Runs daily at midnight UTC
  await cleanupOldData()
  return Response.json({ success: true })
}

Team Collaboration

Team Projects

Terminal

Dashboard → Create Team → Invite Members

Roles:

Owner: Full access, billing
Member: Deploy, view logs
Viewer: View only

Git Permissions

Control who can deploy:

Terminal

Settings → Git → Deployment Permissions
→ Protect Production Branch
→ Required reviewers

Audit Logs

Track team activity (Pro/Enterprise):

Terminal

Team Settings → Audit Log
- Deployments
- Environment variable changes
- Team member changes

Vercel Storage

Vercel KV (Redis)

Key-value storage:

Terminal

import { kv } from '@vercel/kv'

// Set value
await kv.set('user:123', { name: 'John' })

// Get value
const user = await kv.get('user:123')

// With expiration
await kv.set('session:abc', data, { ex: 3600 })

Vercel Blob

File storage:

Terminal

import { put, del } from '@vercel/blob'

// Upload file
const blob = await put('avatars/user.png', file, {
  access: 'public'
})

// Delete file
await del(blob.url)

Vercel Postgres

Managed PostgreSQL:

Terminal

import { sql } from '@vercel/postgres'

const { rows } = await sql`
  SELECT * FROM users WHERE id = ${userId}
`

Monitoring and Logs

Real-time Logs

Terminal

Project → Logs → Filter by:
- Function name
- Status code
- Time range

Log Drains

Send logs to external services:

Terminal

Project → Settings → Log Drains
→ Datadog
→ Logflare
→ Custom webhook

Alerts

Set up deployment notifications:

Terminal

Project → Settings → Notifications
→ Slack
→ Email
→ Webhook

Performance Optimization

Image Optimization

Next.js Image component uses Vercel's optimizer:

Terminal

import Image from 'next/image'

<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  alt="Hero"
  priority
/>

Static Generation

Pre-render pages at build time:

Terminal

// Statically generated
export default function Page() {
  return <div>Static content</div>
}

// With data
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map(post => ({ slug: post.slug }))
}

ISR (Incremental Static Regeneration)

Revalidate static pages:

Terminal

// Revalidate every hour
export const revalidate = 3600

export default async function Page() {
  const data = await fetchData()
  return <div>{data}</div>
}

Summary

Edge Functions: Fast, global execution
Analytics: Visitor tracking and Core Web Vitals
Domains: Custom domains with automatic SSL
Previews: Unique URLs for every branch
Cron Jobs: Scheduled function execution
Storage: KV, Blob, and Postgres options

Next Steps

Learn version control basics with Git and GitHub for managing your codebase.

Mark this lesson as complete to track your progress