Deploying a Next.js AI App to Vercel: From Zero to Production in 30 Minutes

Vercel is the fastest way to get a Next.js application in front of users. But 'deploy to Vercel' hides a lot of detail — environment variables, preview deployments, custom domains, and the specific configuration decisions that matter for AI applications. This guide walks through the complete setup.

Prerequisites

• A Next.js 14+ project (App Router or Pages Router both work)
• A Vercel account — free tier is sufficient to follow this guide
• Vercel CLI installed: npm i -g vercel
• Your AI provider API key (OpenAI, Anthropic, etc.)

Step 1: Connect Your Repository

The recommended path is to connect a GitHub, GitLab, or Bitbucket repository. Every push to main triggers a production deployment; every pull request gets its own preview URL.

1. Go to vercel.com/new
2. Click 'Import Git Repository' and authorise Vercel to access your repo
3. Select your repository from the list
4. Vercel auto-detects Next.js and pre-fills the build settings — leave them as-is
5. Click Deploy

If your project is in a subdirectory of a monorepo, set the Root Directory field to the package path before deploying. You can also configure this later under Project Settings > General.

Step 2: Configure Environment Variables

Environment variables set in the Vercel dashboard are injected at build time and at runtime. They are never exposed in your git repository.

# Add variables via CLI
vercel env add OPENAI_API_KEY production
vercel env add OPENAI_API_KEY preview
vercel env add OPENAI_API_KEY development
 
# Or pull existing variables to a local .env.local
vercel env pull .env.local

For AI applications, set environment-specific values: use a test API key for preview and development environments, and your production key for production only.

Never prefix secret keys with NEXT_PUBLIC_. That prefix exposes the variable to the browser bundle. Only use NEXT_PUBLIC_ for values that are safe to be public (e.g. your Supabase anon key, analytics IDs).

Step 3: Configure Function Timeouts for AI Routes

By default, Vercel Hobby plan functions time out after 10 seconds and Pro plan after 60 seconds. LLM API calls regularly exceed 10 seconds for longer completions. Configure timeouts per route in vercel.json.

{
  "functions": {
    "app/api/chat/route.ts": {
      "maxDuration": 60
    },
    "app/api/generate/route.ts": {
      "maxDuration": 60
    }
  }
}

For streaming responses, the function stays alive as long as the stream is open. Use the Vercel AI SDK's streamText() with the Edge runtime for the lowest latency and no timeout concerns — Edge Functions have a 30-second limit but cold starts are near-zero.

Step 4: Streaming AI Responses with the Edge Runtime

The fastest pattern for AI chat in Next.js on Vercel is an Edge Function with streaming. The Edge runtime has no cold start, costs less per invocation, and handles streaming natively.

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
 
export const runtime = 'edge';
 
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const result = await streamText({
    model: openai('gpt-4o'),
    messages,
  });
 
  return result.toDataStreamResponse();
}

Step 5: Preview Deployments

Every pull request automatically gets a unique preview URL like your-project-git-branch-name-team.vercel.app. This is one of Vercel's most valuable features for AI apps — you can test a new model or prompt change in isolation before merging.

Configure preview-specific environment variables to point to a test database or use a cheaper model variant, so preview deployments don't accumulate production API costs.

Step 6: Custom Domain

1. Go to Project Settings > Domains
2. Enter your domain and click Add
3. Add the CNAME or A record shown to your DNS provider
4. Vercel automatically provisions and renews the SSL certificate

DNS propagation typically takes 5–30 minutes. Vercel will show a green tick when the domain is verified and the certificate is active.

Step 7: Monitor with Vercel Analytics

Enable Web Vitals and Function Logs from the Analytics tab. For AI applications, watch the Function Duration chart for your AI routes — p95 latency above 10 seconds is a signal to consider streaming or offloading to a background job.