Deploying to Vercel

Vercel is the platform created by the same team that builds Next.js, making it the most seamless deployment target. Connecting your GitHub repository to Vercel takes a few minutes: create an account, import your repository, and Vercel automatically detects Next.js and configures the build settings. Every push to main triggers a production deployment, and every pull request gets a unique preview URL for review. Vercel automatically enables all Next.js features without additional configuration. Server Components, Route Handlers, and Image Optimisation work out of the box. ISR is backed by Vercel's global Edge Network — cached pages are stored at CDN nodes close to users worldwide. The Edge Runtime for Middleware and Route Handlers runs in Vercel's Edge Network, providing sub-millisecond cold starts compared to serverless functions. Environment variables are configured in the Vercel dashboard under your project's Settings > Environment Variables. You set separate values for Production, Preview, and Development environments. Variables marked as sensitive are encrypted and only exposed to the build and runtime processes. The NEXT_PUBLIC_ prefix works on Vercel just as in local development — those variables are inlined into the client bundle at build time.

Example

# Deploy to Vercel via CLI

# Install the Vercel CLI globally
npm install -g vercel

# Log in to your Vercel account
vercel login

# Deploy from the project directory
# First run: interactive setup, links to a Vercel project
vercel

# Deploy to production explicitly
vercel --prod

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

# List all deployments for the current project
vercel ls

# Inspect a specific deployment
vercel inspect <deployment-url>

# Roll back to the previous production deployment
vercel rollback

# Example vercel.json for custom configuration
# (most settings go in next.config.js — vercel.json is for edge cases)
// vercel.json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
      ]
    }
  ],
  "regions": ["iad1", "lhr1"]
}

HTML

Full Editor

Related Resources

Next.js Reference

Complete tag & property list

Next.js How-To Guides

Step-by-step practical guides

Next.js Exercises

Practice what you've learned